Merge branch 'main' into main

.env

@@ -62,6 +62,7 @@ MODELS=`[
   }
 ]`
 OLD_MODELS=`[]`# any removed models, `{ name: string, displayName?: string, id?: string }`
+TASK_MODEL='' # name of the model used for tasks such as summarizing title, creating query, etc.
 
 PUBLIC_ORIGIN=#https://huggingface.co
 PUBLIC_SHARE_PREFIX=#https://hf.co/chat

.github/workflows/deploy-release.yml

@@ -0,0 +1,24 @@
+name: Deploy to production
+on:
+  release:
+    types: [released]
+
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check large files
+        uses: ActionsDesk/[email protected]
+        with:
+          filesizelimit: 10485760 # this is 10MB so we can sync to HF Spaces
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Push to hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: git push https://nsarrazin:[email protected]/spaces/huggingchat/chat-ui main

.github/workflows/deploy-staging.yml

@@ -0,0 +1,24 @@
+name: Deploy to staging environment
+on:
+  push:
+    branches: [main]
+
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check large files
+        uses: ActionsDesk/[email protected]
+        with:
+          filesizelimit: 10485760 # this is 10MB so we can sync to HF Spaces
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Push to hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: git push https://nsarrazin:[email protected]/spaces/huggingchat/chat-ui-staging main

PRIVACY.md

@@ -1,22 +1,25 @@
 ## Privacy
 
-> Last updated: July 23, 2023
+> Last updated: October 4, 2023
 
 Users of HuggingChat are authenticated through their HF user account.
 
-By default, your conversations may be shared with the respective models' authors (e.g. if you're chatting with the Open Assistant model, to <a target="_blank" href="https://open-assistant.io/dashboard">Open Assistant</a>) to improve their training data and model over time. Model authors are the custodians of the data collected by their model, even if it's hosted on our platform.
+By default, your conversations may be shared with the respective models' authors to improve their training data and model over time. Model authors are the custodians of the data collected by their model, even if it's hosted on our platform.
 
 If you disable data sharing in your settings, your conversations will not be used for any downstream usage (including for research or model training purposes), and they will only be stored to let you access past conversations. You can click on the Delete icon to delete any past conversation at any moment.
 
-🗓 Please also consult huggingface.co's main privacy policy at https://huggingface.co/privacy. To exercise any of your legal privacy rights, please send an email to [email protected].
+🗓 Please also consult huggingface.co's main privacy policy at <https://huggingface.co/privacy>. To exercise any of your legal privacy rights, please send an email to <[email protected]>.
 
 ## About available LLMs
 
-The goal of this app is to showcase that it is now (May 2023) possible to build an open source alternative to ChatGPT. 💪
+The goal of this app is to showcase that it is now possible to build an open source alternative to ChatGPT. 💪
 
-For now, it's running both OpenAssistant's [latest LLaMA based model](https://huggingface.co/OpenAssistant/oasst-sft-6-llama-30b-xor) (which is one of the current best open source chat models) as well as [Meta's newer Llama 2](https://huggingface.co/meta-llama/Llama-2-70b-chat-hf), but the plan in the longer-term is to expose all good-quality chat models from the Hub.
+For now (October 2023), it's running:
 
-We are not affiliated with Open Assistant nor Meta AI, but if you want to contribute to the training data for the next generation of open models, please consider contributing to https://open-assistant.io/ or https://ai.meta.com/llama/ ❤️
+- [Llama 2 70B](https://huggingface.co/meta-llama/Llama-2-70b-chat-hf)
+- [CodeLlama 35B](https://about.fb.com/news/2023/08/code-llama-ai-for-coding/)
+- [Falcon 180B](https://www.tii.ae/news/technology-innovation-institute-introduces-worlds-most-powerful-open-llm-falcon-180b)
+- [Mistral 7B](https://mistral.ai/news/announcing-mistral-7b/)
 
 ## Technical details
 
@@ -28,11 +31,6 @@ The inference backend is running the optimized [text-generation-inference](https
 
 It is therefore possible to deploy a copy of this app to a Space and customize it (swap model, add some UI elements, or store user messages according to your own Terms and conditions). You can also 1-click deploy your own instance using the [Chat UI Spaces Docker template](https://huggingface.co/new-space?template=huggingchat/chat-ui-template).
 
-We welcome any feedback on this app: please participate to the public discussion at https://huggingface.co/spaces/huggingchat/chat-ui/discussions
+We welcome any feedback on this app: please participate to the public discussion at <https://huggingface.co/spaces/huggingchat/chat-ui/discussions>
 
 <a target="_blank" href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"><img src="https://huggingface.co/datasets/huggingface/badges/raw/main/open-a-discussion-xl.svg" title="open a discussion"></a>
-
-## Coming soon
-
-- User setting to share conversations with model authors (done ✅)
-- LLM watermarking

README.md

@@ -28,8 +28,9 @@ A chat interface using open source models, eg OpenAssistant or Llama. It is a Sv
 
 If you don't want to configure, setup, and launch your own Chat UI yourself, you can use this option as a fast deploy alternative.
 
-You can deploy your own customized Chat UI instance with any supported LLM of your choice with only a few clicks to Hugging Face Spaces thanks to the Chat UI Spaces Docker template. Get started [here](https://huggingface.co/new-space?template=huggingchat/chat-ui-template).
-If you'd like to deploy a model with gated access or a model in a private repository, you can simply provide `HUGGING_FACE_HUB_TOKEN` in [Space secrets](https://huggingface.co/docs/hub/spaces-overview#managing-secrets-and-environment-variables). You need to set its value to an access token you can get from [here](https://huggingface.co/settings/tokens).
+You can deploy your own customized Chat UI instance with any supported [LLM](https://huggingface.co/models?pipeline_tag=text-generation&sort=trending) of your choice on [Hugging Face Spaces](https://huggingface.co/spaces). To do so, use the chat-ui template [available here](https://huggingface.co/new-space?template=huggingchat/chat-ui-template).
+
+Set `HUGGING_FACE_HUB_TOKEN` in [Space secrets](https://huggingface.co/docs/hub/spaces-overview#managing-secrets-and-environment-variables) to deploy a model with gated access or a model in a private repository. It's also compatible with [Inference for PROs](https://huggingface.co/blog/inference-pro) curated list of powerful models with higher rate limits. Make sure to create your personal token first in your [User Access Tokens settings](https://huggingface.co/settings/tokens).
 
 Read the full tutorial [here](https://huggingface.co/docs/hub/spaces-sdks-docker-chatui#chatui-on-spaces).
 
@@ -39,7 +40,7 @@ The default config for Chat UI is stored in the `.env` file. You will need to ov
 
 Start by creating a `.env.local` file in the root of the repository. The bare minimum config you need to get Chat UI to run locally is the following:
 
-```bash
+```env
 MONGODB_URL=<the URL to your mongoDB instance>
 HF_ACCESS_TOKEN=<your access token>
 ```
@@ -87,7 +88,7 @@ Chat UI features a powerful Web Search feature. It works by:
 
 The login feature is disabled by default and users are attributed a unique ID based on their browser. But if you want to use OpenID to authenticate your users, you can add the following to your `.env.local` file:
 
-```bash
+```env
 OPENID_PROVIDER_URL=<your OIDC issuer>
 OPENID_CLIENT_ID=<your OIDC client ID>
 OPENID_CLIENT_SECRET=<your OIDC client secret>
@@ -99,7 +100,7 @@ These variables will enable the openID sign-in modal for users.
 
 You can use a few environment variables to customize the look and feel of chat-ui. These are by default:
 
-```
+```env
 PUBLIC_APP_NAME=ChatUI
 PUBLIC_APP_ASSETS=chatui
 PUBLIC_APP_COLOR=blue
@@ -113,16 +114,15 @@ PUBLIC_APP_DISCLAIMER=
 - `PUBLIC_APP_DATA_SHARING` Can be set to 1 to add a toggle in the user settings that lets your users opt-in to data sharing with models creator.
 - `PUBLIC_APP_DISCLAIMER` If set to 1, we show a disclaimer about generated outputs on login.
 
-### Web Search
+### Web Search config
 
 You can enable the web search by adding either `SERPER_API_KEY` ([serper.dev](https://serper.dev/)) or `SERPAPI_KEY` ([serpapi.com](https://serpapi.com/)) to your `.env.local`.
 
 ### Custom models
 
 You can customize the parameters passed to the model or even use a new model by updating the `MODELS` variable in your `.env.local`. The default one can be found in `.env` and looks like this :
 
-```
-
+```env
 MODELS=`[
   {
     "name": "OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5",
@@ -261,11 +261,11 @@ MODELS=`[
 
 By default the prompt is constructed using `userMessageToken`, `assistantMessageToken`, `userMessageEndToken`, `assistantMessageEndToken`, `preprompt` parameters and a series of default templates.
 
-However, these templates can be modified by setting the `chatPromptTemplate` and `webSearchQueryPromptTemplate` parameters. Note that if WebSearch is not enabled, only `chatPromptTemplate` needs to be set. The template language is https://handlebarsjs.com. The templates have access to the model's prompt parameters (`preprompt`, etc.). However, if the templates are specified it is recommended to inline the prompt parameters, as using the references (`{{preprompt}}`) is deprecated.
+However, these templates can be modified by setting the `chatPromptTemplate` and `webSearchQueryPromptTemplate` parameters. Note that if WebSearch is not enabled, only `chatPromptTemplate` needs to be set. The template language is <https://handlebarsjs.com>. The templates have access to the model's prompt parameters (`preprompt`, etc.). However, if the templates are specified it is recommended to inline the prompt parameters, as using the references (`{{preprompt}}`) is deprecated.
 
 For example:
 
-```
+```prompt
 <System>You are an AI, called ChatAI.</System>
 {{#each messages}}
   {{#ifUser}}<User>{{content}}</User>{{/ifUser}}
@@ -274,13 +274,13 @@ For example:
 <Assistant>
 ```
 
-**chatPromptTemplate**
+##### chatPromptTemplate
 
 When quering the model for a chat response, the `chatPromptTemplate` template is used. `messages` is an array of chat messages, it has the format `[{ content: string }, ...]`. To idenify if a message is a user message or an assistant message the `ifUser` and `ifAssistant` block helpers can be used.
 
 The following is the default `chatPromptTemplate`, although newlines and indentiation have been added for readability.
 
-```
+```prompt
 {{preprompt}}
 {{#each messages}}
   {{#ifUser}}{{@root.userMessageToken}}{{content}}{{@root.userMessageEndToken}}{{/ifUser}}
@@ -289,13 +289,13 @@ The following is the default `chatPromptTemplate`, although newlines and indenti
 {{assistantMessageToken}}
 ```
 
-**webSearchQueryPromptTemplate**
+##### webSearchQueryPromptTemplate
 
 When performing a websearch, the search query is constructed using the `webSearchQueryPromptTemplate` template. It is recommended that that the prompt instructs the chat model to only return a few keywords.
 
 The following is the default `webSearchQueryPromptTemplate`.
 
-```
+```prompt
 {{userMessageToken}}
   My question is: {{message.content}}.
   Based on the conversation history (my previous questions are: {{previousMessages}}), give me an appropriate query to answer my question for google search. You should not say more than query. You should not say any words except the query. For the context, today is {{currentDate}}
@@ -311,13 +311,11 @@ A good option is to hit a [text-generation-inference](https://github.com/hugging
 
 To do this, you can add your own endpoints to the `MODELS` variable in `.env.local`, by adding an `"endpoints"` key for each model in `MODELS`.
 
-```
-
+```env
 {
 // rest of the model config here
 "endpoints": [{"url": "https://HOST:PORT"}]
 }
-
 ```
 
 If `endpoints` is left unspecified, ChatUI will look for the model on the hosted Hugging Face inference API using the model name.
@@ -338,22 +336,20 @@ For `Bearer` you can use a token, which can be grabbed from [here](https://huggi
 
 You can then add the generated information and the `authorization` parameter to your `.env.local`.
 
-```
-
+```env
 "endpoints": [
 {
 "url": "https://HOST:PORT",
 "authorization": "Basic VVNFUjpQQVNT",
 }
 ]
-
 ```
 
 ### Amazon SageMaker
 
 You can also specify your Amazon SageMaker instance as an endpoint for chat-ui. The config goes like this:
 
-```
+```env
 "endpoints": [
     {
       "host" : "sagemaker",
@@ -363,6 +359,7 @@ You can also specify your Amazon SageMaker instance as an endpoint for chat-ui.
       "sessionToken": "", // optional
       "weight": 1
     }
+]
 ```
 
 You can get the `accessKey` and `secretKey` from your AWS user, under programmatic access.
@@ -379,8 +376,7 @@ If you're using a self-signed certificate, e.g. for testing or development purpo
 
 If the model being hosted will be available on multiple servers/instances add the `weight` parameter to your `.env.local`. The `weight` will be used to determine the probability of requesting a particular endpoint.
 
-```
-
+```env
 "endpoints": [
 {
 "url": "https://HOST:PORT",

src/lib/components/CopyToClipBoardBtn.svelte

@@ -41,6 +41,7 @@
 	"
 	title={"Copy to clipboard"}
 	type="button"
+	on:click
 	on:click={handleClick}
 >
 	<span class="relative">

src/lib/components/SystemPromptModal.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import Modal from "./Modal.svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonBlockchain from "~icons/carbon/blockchain";
+
+	export let preprompt: string;
+
+	let isOpen = false;
+</script>
+
+<button
+	type="button"
+	class="mx-auto flex items-center gap-1.5 rounded-full border border-gray-100 bg-gray-50 px-3 py-1 text-xs text-gray-500 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+	on:click={() => (isOpen = !isOpen)}
+	on:keypress={(e) => e.key === "Enter" && (isOpen = !isOpen)}
+>
+	<CarbonBlockchain class="text-xxs" /> Using Custom System Prompt
+</button>
+
+{#if isOpen}
+	<Modal on:close={() => (isOpen = false)} width="w-full max-w-2xl">
+		<div class="flex w-full flex-col gap-5 p-6">
+			<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
+				<h2>System Prompt</h2>
+				<button type="button" class="group" on:click={() => (isOpen = false)}>
+					<CarbonClose class="mt-auto text-gray-900 group-hover:text-gray-500" />
+				</button>
+			</div>
+			<textarea
+				disabled
+				value={preprompt}
+				class="min-h-[420px] w-full resize-none rounded-lg border bg-gray-50 p-2.5 text-gray-600 max-sm:text-sm"
+			/>
+		</div>
+	</Modal>
+{/if}

src/lib/components/chat/ChatMessage.svelte

@@ -7,6 +7,7 @@
 	import { page } from "$app/stores";
 
 	import CodeBlock from "../CodeBlock.svelte";
+	import CopyToClipBoardBtn from "../CopyToClipBoardBtn.svelte";
 	import IconLoading from "../icons/IconLoading.svelte";
 	import CarbonRotate360 from "~icons/carbon/rotate-360";
 	import CarbonDownload from "~icons/carbon/download";
@@ -58,6 +59,7 @@
 	let contentEl: HTMLElement;
 	let loadingEl: IconLoading;
 	let pendingTimeout: ReturnType<typeof setTimeout>;
+	let isCopied = false;
 
 	const renderer = new marked.Renderer();
 	// For code blocks with simple backticks
@@ -121,6 +123,12 @@
 	$: webSearchSources =
 		searchUpdates &&
 		searchUpdates?.filter(({ messageType }) => messageType === "sources")?.[0]?.sources;
+
+	$: if (isCopied) {
+		setTimeout(() => {
+			isCopied = false;
+		}, 1000);
+	}
 </script>
 
 {#if message.from === "assistant"}
@@ -186,7 +194,7 @@
 			<div
 				class="absolute bottom-1 right-0 flex max-md:transition-all md:bottom-0 md:group-hover:visible md:group-hover:opacity-100
 					{message.score ? 'visible opacity-100' : 'invisible max-md:-translate-y-4 max-md:opacity-0'}
-					{isTapped ? 'max-md:visible max-md:translate-y-0 max-md:opacity-100' : ''}
+					{isTapped || isCopied ? 'max-md:visible max-md:translate-y-0 max-md:opacity-100' : ''}
 				"
 			>
 				<button
@@ -212,6 +220,13 @@
 				>
 					<CarbonThumbsDown class="h-[1.14em] w-[1.14em]" />
 				</button>
+				<CopyToClipBoardBtn
+					on:click={() => {
+						isCopied = true;
+					}}
+					classNames="ml-1.5 !rounded-sm !p-1 !text-sm !text-gray-400 focus:!ring-0 hover:!text-gray-500 dark:!text-gray-400 dark:hover:!text-gray-300 !border-none !shadow-none"
+					value={message.content}
+				/>
 			</div>
 		{/if}
 	</div>