Orca-2-13b

.dockerignore

@@ -6,6 +6,3 @@ LICENSE
 README.md
 node_modules/
 .svelte-kit/
-.env*
-!.env
-.env.local

.env

@@ -6,42 +6,28 @@ MONGODB_DB_NAME=chat-ui
 MONGODB_DIRECT_CONNECTION=false
 
 COOKIE_NAME=hf-chat
-HF_TOKEN=#hf_<token> from https://huggingface.co/settings/token
+HF_ACCESS_TOKEN=#hf_<token> from from https://huggingface.co/settings/token
 HF_API_ROOT=https://api-inference.huggingface.co/models
-
 OPENAI_API_KEY=#your openai api key here
-ANTHROPIC_API_KEY=#your anthropic api key here
-CLOUDFLARE_ACCOUNT_ID=#your cloudflare account id here
-CLOUDFLARE_API_TOKEN=#your cloudflare api token here
-COHERE_API_TOKEN=#your cohere api token here
-
-HF_ACCESS_TOKEN=#LEGACY! Use HF_TOKEN instead
 
 # used to activate search with web functionality. disabled if none are defined. choose one of the following:
 YDC_API_KEY=#your docs.you.com api key here
 SERPER_API_KEY=#your serper.dev api key here
 SERPAPI_KEY=#your serpapi key here
-SERPSTACK_API_KEY=#your serpstack api key here
 USE_LOCAL_WEBSEARCH=#set to true to parse google results yourself, overrides other API keys
-SEARXNG_QUERY_URL=# where '<query>' will be replaced with query keywords see https://docs.searxng.org/dev/search_api.html eg https://searxng.yourdomain.com/search?q=<query>&engines=duckduckgo,google&format=json
-
-WEBSEARCH_ALLOWLIST=`[]` # if it's defined, allow websites from only this list.
-WEBSEARCH_BLOCKLIST=`[]` # if it's defined, block websites from this list.
 
 # Parameters to enable open id login
 OPENID_CONFIG=`{
   "PROVIDER_URL": "",
   "CLIENT_ID": "",
   "CLIENT_SECRET": "",
-  "SCOPES": "",
-  "NAME_CLAIM": ""
+  "SCOPES": ""
 }`
 
 # /!\ legacy openid settings, prefer the config above
 OPENID_CLIENT_ID=
 OPENID_CLIENT_SECRET=
 OPENID_SCOPES="openid profile" # Add "email" for some providers like Google that do not provide preferred_username
-OPENID_NAME_CLAIM="name" # Change to "username" for some providers that do not provide name
 OPENID_PROVIDER_URL=https://huggingface.co # for Google, use https://accounts.google.com
 OPENID_TOLERANCE=
 OPENID_RESOURCE=
@@ -54,105 +40,71 @@ CA_PATH=#
 CLIENT_KEY_PASSWORD=#
 REJECT_UNAUTHORIZED=true
 
-TEXT_EMBEDDING_MODELS = `[
-  {
-    "name": "Xenova/gte-small",
-    "displayName": "Xenova/gte-small",
-    "description": "Local embedding model running on the server.",
-    "chunkCharLength": 512,
-    "endpoints": [
-      { "type": "transformersjs" }
-    ]
-  }
-]`
-
 # 'name', 'userMessageToken', 'assistantMessageToken' are required
 MODELS=`[
-    {
-      "name": "mistralai/Mistral-7B-Instruct-v0.1",
-      "displayName": "mistralai/Mistral-7B-Instruct-v0.1",
-      "description": "Mistral 7B is a new Apache 2.0 model, released by Mistral AI that outperforms Llama2 13B in benchmarks.",
-      "websiteUrl": "https://mistral.ai/news/announcing-mistral-7b/",
-      "preprompt": "",
-      "chatPromptTemplate" : "<s>{{#each messages}}{{#ifUser}}[INST] {{#if @first}}{{#if @root.preprompt}}{{@root.preprompt}}\n{{/if}}{{/if}}{{content}} [/INST]{{/ifUser}}{{#ifAssistant}}{{content}}</s>{{/ifAssistant}}{{/each}}",
-      "parameters": {
-        "temperature": 0.1,
-        "top_p": 0.95,
-        "repetition_penalty": 1.2,
-        "top_k": 50,
-        "truncate": 3072,
-        "max_new_tokens": 1024,
-        "stop": ["</s>"]
-      },
-      "promptExamples": [
-        {
-          "title": "Write an email from bullet list",
-          "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
-        }, {
-          "title": "Code a snake game",
-          "prompt": "Code a basic snake game in python, give explanations for each step."
-        }, {
-          "title": "Assist in a task",
-          "prompt": "How do I make a delicious lemon cheesecake?"
-        }
-      ]
+  {
+    "name": "OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5",
+    "datasetName": "OpenAssistant/oasst1",
+    "description": "A good alternative to ChatGPT",
+    "websiteUrl": "https://open-assistant.io",
+    "userMessageToken": "<|prompter|>",
+    "assistantMessageToken": "<|assistant|>",
+    "messageEndToken": "</s>",
+    "preprompt": "Below are a series of dialogues between various people and an AI assistant. The AI tries to be helpful, polite, honest, sophisticated, emotionally aware, and humble-but-knowledgeable. The assistant is happy to help with almost anything, and will do its best to understand exactly what is needed. It also tries to avoid giving false or misleading information, and it caveats when it isn't entirely sure about the right answer. That said, the assistant is practical and really does its best, and doesn't let caution get too much in the way of being useful.\n-----\n",
+    "promptExamples": [
+      {
+        "title": "Write an email from bullet list",
+        "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
+      }, {
+        "title": "Code a snake game",
+        "prompt": "Code a basic snake game in python, give explanations for each step."
+      }, {
+        "title": "Assist in a task",
+        "prompt": "How do I make a delicious lemon cheesecake?"
+      }
+    ],
+    "parameters": {
+      "temperature": 0.9,
+      "top_p": 0.95,
+      "repetition_penalty": 1.2,
+      "top_k": 50,
+      "truncate": 1000,
+      "max_new_tokens": 1024
     }
+  }
 ]`
-
 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.
+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
 PUBLIC_GOOGLE_ANALYTICS_ID=#G-XXXXXXXX / Leave empty to disable
-PUBLIC_PLAUSIBLE_SCRIPT_URL=#/js/script.js / Leave empty to disable
 PUBLIC_ANNOUNCEMENT_BANNERS=`[
     {
-    "title": "Code Llama 70B is available! 🦙",
-    "linkTitle": "try it",
-    "linkHref": "https://huggingface.co/chat?model=codellama/CodeLlama-70b-Instruct-hf"
+    "title": "Llama v2 is live on HuggingChat! 🦙",
+    "linkTitle": "Announcement",
+    "linkHref": "https://huggingface.co/blog/llama2"
   }
 ]`
 
-PUBLIC_APPLE_APP_ID=#1234567890 / Leave empty to disable
-
 PARQUET_EXPORT_DATASET=
 PARQUET_EXPORT_HF_TOKEN=
-ADMIN_API_SECRET=# secret to admin API calls, like computing usage stats or exporting parquet data
+PARQUET_EXPORT_SECRET=
 
-PARQUET_EXPORT_SECRET=#DEPRECATED, use ADMIN_API_SECRET instead
-
-RATE_LIMIT= # /!\ Legacy definition of messages per minute. Use USAGE_LIMITS.messagesPerMinute instead
+RATE_LIMIT= # requests per minute
 MESSAGES_BEFORE_LOGIN=# how many messages a user can send in a conversation before having to login. set to 0 to force login right away
 
-APP_BASE="" # base path of the app, e.g. /chat, left blank as default
 PUBLIC_APP_NAME=ChatUI # name used as title throughout the app
 PUBLIC_APP_ASSETS=chatui # used to find logos & favicons in static/$PUBLIC_APP_ASSETS
 PUBLIC_APP_COLOR=blue # can be any of tailwind colors: https://tailwindcss.com/docs/customizing-colors#default-color-palette
 PUBLIC_APP_DESCRIPTION=# description used throughout the app (if not set, a default one will be used)
 PUBLIC_APP_DATA_SHARING=#set to 1 to enable options & text regarding data sharing
 PUBLIC_APP_DISCLAIMER=#set to 1 to show a disclaimer on login page
-PUBLIC_APP_DISCLAIMER_MESSAGE="Disclaimer: AI is an area of active research with known problems such as biased generation and misinformation. Do not use this application for high-stakes decisions or advice. Do not insert your personal data, especially sensitive, like health data."
 LLM_SUMMERIZATION=true
 
-EXPOSE_API=true
 # PUBLIC_APP_NAME=HuggingChat
 # PUBLIC_APP_ASSETS=huggingchat
 # PUBLIC_APP_COLOR=yellow
 # PUBLIC_APP_DESCRIPTION="Making the community's best AI chat models available to everyone."
 # PUBLIC_APP_DATA_SHARING=1
-# PUBLIC_APP_DISCLAIMER=1
-
-ENABLE_ASSISTANTS=false #set to true to enable assistants feature
-ENABLE_ASSISTANTS_RAG=false # /!\ This will let users specify arbitrary URLs that the server will then request. Make sure you have the proper firewall rules in place. 
-REQUIRE_FEATURED_ASSISTANTS=false
-ENABLE_LOCAL_FETCH=false #set to true to disable the blocklist for local fetches. Only enable this if you have the proper firewall rules to prevent SSRF attacks and understand the implications.
-ALTERNATIVE_REDIRECT_URLS=`[]` #valide alternative redirect URL for OAuth
-WEBHOOK_URL_REPORT_ASSISTANT=#provide webhook url to get notified when an assistant gets reported
-
-ALLOWED_USER_EMAILS=`[]` # if it's defined, only these emails will be allowed to use the app
-
-USAGE_LIMITS=`{}`
-ALLOW_INSECURE_COOKIES=false # recommended to keep this to false but set to true if you need to run over http without tls
-METRICS_PORT=
-LOG_LEVEL=info
+# PUBLIC_APP_DISCLAIMER=1

.env.template

@@ -1,121 +1,16 @@
 # template used in production for HuggingChat.
 
 MODELS=`[
-  {
-    "name" : "CohereForAI/c4ai-command-r-plus",
-    "tokenizer": "Xenova/c4ai-command-r-v01-tokenizer",
-    "description": "Command R+ is Cohere's latest LLM and is the first open weight model to beat GPT4 in the Chatbot Arena!",
-    "modelUrl": "https://huggingface.co/CohereForAI/c4ai-command-r-plus",
-    "websiteUrl": "https://docs.cohere.com/docs/command-r-plus",
-    "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/cohere-logo.png",
-    "parameters": {
-      "stop": ["<|END_OF_TURN_TOKEN|>"],
-      "truncate" : 28672,
-      "max_new_tokens" : 4096,
-      "temperature" : 0.3
-    },
-    "promptExamples" : [
-      {
-        "title": "Write an email from bullet list",
-        "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
-      }, {
-        "title": "Code a snake game",
-        "prompt": "Code a basic snake game in python, give explanations for each step."
-      }, {
-        "title": "Assist in a task",
-        "prompt": "How do I make a delicious lemon cheesecake?"
-      }
-    ]
-  },
-  {
-    "name" : "meta-llama/Meta-Llama-3-70B-Instruct",
-    "description": "Generation over generation, Meta Llama 3 demonstrates state-of-the-art performance on a wide range of industry benchmarks and offers new capabilities, including improved reasoning.",
-    "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/meta-logo.png",
-    "modelUrl": "https://huggingface.co/meta-llama/Meta-Llama-3-70B-Instruct",
-    "websiteUrl": "https://llama.meta.com/llama3/",
-    "tokenizer" : "philschmid/meta-llama-3-tokenizer",
-    "promptExamples" : [
-      {
-        "title": "Write an email from bullet list",
-        "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
-      }, {
-        "title": "Code a snake game",
-        "prompt": "Code a basic snake game in python, give explanations for each step."
-      }, {
-        "title": "Assist in a task",
-        "prompt": "How do I make a delicious lemon cheesecake?"
-      }
-    ],
-    "parameters": {
-      "stop": ["<|eot_id|>"],
-      "truncate": 6144,
-      "max_new_tokens": 2047
-    }
-  },
-  {
-    "name" : "HuggingFaceH4/zephyr-orpo-141b-A35b-v0.1",
-    "tokenizer": "HuggingFaceH4/zephyr-orpo-141b-A35b-v0.1",
-    "description": "Zephyr 141B-A35B is a fine-tuned version of Mistral 8x22B, trained using ORPO, a novel alignment algorithm.",
-    "modelUrl": "https://huggingface.co/HuggingFaceH4/zephyr-orpo-141b-A35b-v0.1",
-    "websiteUrl": "https://huggingface.co/HuggingFaceH4/zephyr-orpo-141b-A35b-v0.1",
-    "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/zephyr-logo.png",
-    "parameters": {
-      "truncate" : 24576,
-      "max_new_tokens" : 8192,
-    },
-    "preprompt" : "You are Zephyr, an assistant developed by KAIST AI, Argilla, and Hugging Face. You should give concise responses to very simple questions, but provide thorough responses to more complex and open-ended questions. You are happy to help with writing, analysis, question answering, math, coding, and all sorts of other tasks.",
-    "promptExamples" : [
-      {
-        "title": "Write a poem",
-        "prompt": "Write a poem to help me remember the first 10 elements on the periodic table, giving each element its own line."
-      }, {
-        "title": "Code a snake game",
-        "prompt": "Code a basic snake game in python, give explanations for each step."
-      }, {
-        "title": "Assist in a task",
-        "prompt": "How do I make a delicious lemon cheesecake?"
-      }
-    ]
-  },
-  {
-    "name" : "mistralai/Mixtral-8x7B-Instruct-v0.1",
-    "description" : "The latest MoE model from Mistral AI! 8x7B and outperforms Llama 2 70B in most benchmarks.",
-    "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/mistral-logo.png",
-    "websiteUrl" : "https://mistral.ai/news/mixtral-of-experts/",
-    "modelUrl": "https://huggingface.co/mistralai/Mixtral-8x7B-Instruct-v0.1",
-    "tokenizer": "mistralai/Mixtral-8x7B-Instruct-v0.1",
-    "preprompt" : "",
-    "chatPromptTemplate": "<s> {{#each messages}}{{#ifUser}}[INST]{{#if @first}}{{#if @root.preprompt}}{{@root.preprompt}}\n{{/if}}{{/if}} {{content}} [/INST]{{/ifUser}}{{#ifAssistant}} {{content}}</s> {{/ifAssistant}}{{/each}}",
-    "parameters" : {
-      "temperature" : 0.6,
-      "top_p" : 0.95,
-      "repetition_penalty" : 1.2,
-      "top_k" : 50,
-      "truncate" : 24576,
-      "max_new_tokens" : 8192,
-      "stop" : ["</s>"]
-    },
-    "promptExamples" : [
-      {
-        "title": "Write an email from bullet list",
-        "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
-      }, {
-        "title": "Code a snake game",
-        "prompt": "Code a basic snake game in python, give explanations for each step."
-      }, {
-        "title": "Assist in a task",
-        "prompt": "How do I make a delicious lemon cheesecake?"
-      }
-    ]
-  },
-  {
-      "name" : "NousResearch/Nous-Hermes-2-Mixtral-8x7B-DPO",
-      "description" : "Nous Hermes 2 Mixtral 8x7B DPO is the new flagship Nous Research model trained over the Mixtral 8x7B MoE LLM.",
-      "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/nous-logo.png",
-      "websiteUrl" : "https://nousresearch.com/",
-      "modelUrl": "https://huggingface.co/NousResearch/Nous-Hermes-2-Mixtral-8x7B-DPO",
-      "tokenizer": "NousResearch/Nous-Hermes-2-Mixtral-8x7B-DPO",
-      "chatPromptTemplate" : "{{#if @root.preprompt}}<|im_start|>system\n{{@root.preprompt}}<|im_end|>\n{{/if}}{{#each messages}}{{#ifUser}}<|im_start|>user\n{{content}}<|im_end|>\n<|im_start|>assistant\n{{/ifUser}}{{#ifAssistant}}{{content}}<|im_end|>\n{{/ifAssistant}}{{/each}}",
+    {
+      "name": "meta-llama/Llama-2-70b-chat-hf",
+      "description": "The latest and biggest model from Meta, fine-tuned for chat.",
+      "websiteUrl": "https://ai.meta.com/llama/",
+      "userMessageToken": "",
+      "userMessageEndToken": " [/INST] ",
+      "assistantMessageToken": "",
+      "assistantMessageEndToken": " </s><s>[INST] ",
+      "preprompt": " ",
+      "chatPromptTemplate" : "<s>[INST] <<SYS>>\n{{preprompt}}\n<</SYS>>\n\n{{#each messages}}{{#ifUser}}{{content}} [/INST] {{/ifUser}}{{#ifAssistant}}{{content}} </s><s>[INST] {{/ifAssistant}}{{/each}}",
       "promptExamples": [
         {
           "title": "Write an email from bullet list",
@@ -129,63 +24,63 @@ MODELS=`[
         }
       ],
       "parameters": {
-        "temperature": 0.7,
+        "temperature": 0.1,
         "top_p": 0.95,
-        "repetition_penalty": 1,
+        "repetition_penalty": 1.2,
         "top_k": 50,
-        "truncate": 24576,
-        "max_new_tokens": 2048,
-        "stop": ["<|im_end|>"]
+        "truncate": 3072,
+        "max_new_tokens": 1024
       }
     },
-      {
-    "name" : "google/gemma-1.1-7b-it",
-    "description": "Gemma 7B 1.1 is the latest release in the Gemma family of lightweight models built by Google, trained using a novel RLHF method.",
-    "websiteUrl" : "https://blog.google/technology/developers/gemma-open-models/",
-    "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/google-logo.png",
-    "modelUrl": "https://huggingface.co/google/gemma-1.1-7b-it",
-    "preprompt": "",
-    "chatPromptTemplate" : "{{#each messages}}{{#ifUser}}<start_of_turn>user\n{{#if @first}}{{#if @root.preprompt}}{{@root.preprompt}}\n{{/if}}{{/if}}{{content}}<end_of_turn>\n<start_of_turn>model\n{{/ifUser}}{{#ifAssistant}}{{content}}<end_of_turn>\n{{/ifAssistant}}{{/each}}",
-    "promptExamples": [
-      {
-        "title": "Write an email from bullet list",
-        "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
-      }, {
-        "title": "Code a snake game",
-        "prompt": "Code a basic snake game in python, give explanations for each step."
-      }, {
-        "title": "Assist in a task",
-        "prompt": "How do I make a delicious lemon cheesecake?"
-      }
-    ],
-    "parameters": {
-        "do_sample": true,
-        "truncate": 7168,
-        "max_new_tokens": 1024,
-        "stop" : ["<end_of_turn>"]
-      }
-  },
-
+    {
+      "name": "codellama/CodeLlama-34b-Instruct-hf",
+      "displayName": "codellama/CodeLlama-34b-Instruct-hf",
+      "description": "Code Llama, a state of the art code model from Meta.",
+      "websiteUrl": "https://about.fb.com/news/2023/08/code-llama-ai-for-coding/",
+      "userMessageToken": "",
+      "userMessageEndToken": " [/INST] ",
+      "assistantMessageToken": "",
+      "assistantMessageEndToken": " </s><s>[INST] ",
+      "preprompt": " ",
+      "chatPromptTemplate" : "<s>[INST] <<SYS>>\n{{preprompt}}\n<</SYS>>\n\n{{#each messages}}{{#ifUser}}{{content}} [/INST] {{/ifUser}}{{#ifAssistant}}{{content}} </s><s>[INST] {{/ifAssistant}}{{/each}}",
+      "promptExamples": [
         {
-      "name": "mistralai/Mistral-7B-Instruct-v0.2",
-      "displayName": "mistralai/Mistral-7B-Instruct-v0.2",
-      "description": "Mistral 7B is a new Apache 2.0 model, released by Mistral AI that outperforms Llama2 13B in benchmarks.",
-      "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/mistral-logo.png",
-      "websiteUrl": "https://mistral.ai/news/announcing-mistral-7b/",
-      "modelUrl": "https://huggingface.co/mistralai/Mistral-7B-Instruct-v0.2",
-      "tokenizer": "mistralai/Mistral-7B-Instruct-v0.2",
-      "preprompt": "",
-      "chatPromptTemplate" : "<s>{{#each messages}}{{#ifUser}}[INST] {{#if @first}}{{#if @root.preprompt}}{{@root.preprompt}}\n{{/if}}{{/if}}{{content}} [/INST]{{/ifUser}}{{#ifAssistant}}{{content}}</s>{{/ifAssistant}}{{/each}}",
+          "title": "Fibonacci in Python",
+          "prompt": "Write a python function to calculate the nth fibonacci number."
+        }, {
+          "title": "JavaScript promises",
+          "prompt": "How can I wait for multiple JavaScript promises to fulfill before doing something with their values?"
+        }, {
+          "title": "Rust filesystem",
+          "prompt": "How can I load a file from disk in Rust?"
+        }
+      ],
       "parameters": {
-        "temperature": 0.3,
+        "temperature": 0.1,
         "top_p": 0.95,
         "repetition_penalty": 1.2,
         "top_k": 50,
-        "truncate": 3072,
-        "max_new_tokens": 1024,
-        "stop": ["</s>"]
+        "truncate": 4096,
+        "max_new_tokens": 4096
+      }
       },
-      "promptExamples": [
+      {
+        "name": "tiiuae/falcon-180B-chat",
+        "displayName": "tiiuae/falcon-180B-chat",
+        "description": "Falcon-180B is a 180B parameters causal decoder-only model built by TII and trained on 3,500B tokens.",
+        "websiteUrl": "https://www.tii.ae/news/technology-innovation-institute-introduces-worlds-most-powerful-open-llm-falcon-180b",
+        "preprompt": " ",
+        "chatPromptTemplate": "System: {{preprompt}}\nUser:{{#each messages}}{{#ifUser}}{{content}}\nFalcon:{{/ifUser}}{{#ifAssistant}}{{content}}\nUser:{{/ifAssistant}}{{/each}}",
+        "parameters": {
+          "temperature": 0.1,
+          "top_p": 0.95,
+          "repetition_penalty": 1.2,
+          "top_k": 50,
+          "truncate": 1024,
+          "max_new_tokens": 1024,
+          "stop": ["User:"]
+      },
+          "promptExamples": [
         {
           "title": "Write an email from bullet list",
           "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
@@ -199,18 +94,20 @@ MODELS=`[
       ]
     },
     {
-      "name": "microsoft/Phi-3-mini-4k-instruct",
-      "tokenizer": "microsoft/Phi-3-mini-4k-instruct",
-      "description" : "Phi-3 Mini-4K-Instruct is a 3.8B parameters, lightweight, state-of-the-art open model built upon datasets used for Phi-2.",
-      "logoUrl": "https://huggingface.co/datasets/huggingchat/models-logo/resolve/main/microsoft-logo.png",
-      "modelUrl": "https://huggingface.co/microsoft/Phi-3-mini-4k-instruct",
-      "websiteUrl": "https://azure.microsoft.com/en-us/blog/introducing-phi-3-redefining-whats-possible-with-slms/",
+      "name": "mistralai/Mistral-7B-Instruct-v0.1",
+      "displayName": "mistralai/Mistral-7B-Instruct-v0.1",
+      "description": "Mistral 7B is a new Apache 2.0 model, released by Mistral AI that outperforms Llama2 13B in benchmarks.",
+      "websiteUrl": "https://mistral.ai/news/announcing-mistral-7b/",
       "preprompt": "",
-      "chatPromptTemplate": "<s>{{preprompt}}{{#each messages}}{{#ifUser}}<|user|>\n{{content}}<|end|>\n<|assistant|>\n{{/ifUser}}{{#ifAssistant}}{{content}}<|end|>\n{{/ifAssistant}}{{/each}}",
+      "chatPromptTemplate" : "<s>{{#each messages}}{{#ifUser}}[INST] {{#if @first}}{{#if @root.preprompt}}{{@root.preprompt}}\n{{/if}}{{/if}}{{content}} [/INST]{{/ifUser}}{{#ifAssistant}}{{content}}</s>{{/ifAssistant}}{{/each}}",
       "parameters": {
-        "stop": ["<|end|>", "<|endoftext|>", "<|assistant|>"],
+        "temperature": 0.1,
+        "top_p": 0.95,
+        "repetition_penalty": 1.2,
+        "top_k": 50,
+        "truncate": 3072,
         "max_new_tokens": 1024,
-        "truncate": 3071
+        "stop": ["</s>"]
       },
       "promptExamples": [
         {
@@ -225,47 +122,41 @@ MODELS=`[
         }
       ]
     },
-    {
-      "name": "meta-llama/Meta-Llama-3-8B-Instruct",
-      "tokenizer" : "philschmid/meta-llama-3-tokenizer",
-      "parameters": {
-        "temperature": 0.1,
-        "stop": ["<|eot_id|>"],
-        "truncate": 1024,
-      },
-      "unlisted": true
-    }
-]`
-
-OLD_MODELS=`[
-  {"name":"bigcode/starcoder"},
-  {"name":"OpenAssistant/oasst-sft-6-llama-30b-xor"},
-  {"name":"HuggingFaceH4/zephyr-7b-alpha"},
-  {"name":"openchat/openchat_3.5"},
-  {"name":"openchat/openchat-3.5-1210"},
-  {"name": "tiiuae/falcon-180B-chat"},
-  {"name": "codellama/CodeLlama-34b-Instruct-hf"},
-  {"name": "google/gemma-7b-it"},
-  {"name": "meta-llama/Llama-2-70b-chat-hf"},
-  {"name": "codellama/CodeLlama-70b-Instruct-hf"},
-  {"name": "openchat/openchat-3.5-0106"}
-]`
-
-TASK_MODEL='meta-llama/Meta-Llama-3-8B-Instruct'
-
-TEXT_EMBEDDING_MODELS = `[
-  {
-    "name": "bge-base-en-v1-5-sxa",
-    "displayName": "bge-base-en-v1-5-sxa",
-    "chunkCharLength": 512,
-    "endpoints": [
-      { "type": "tei",
-        "url" : "https://huggingchat-tei.hf.space/"
+      {
+    "name": "openchat/openchat_3.5",
+    "displayName": "openchat/openchat_3.5",
+    "description": "OpenChat 3.5 is the #1 model on MT-Bench, with only 7B parameters.",
+    "websiteUrl": "https://huggingface.co/openchat/openchat_3.5",
+    "preprompt": "",
+    "chatPromptTemplate" : "<s>{{#each messages}}{{#ifUser}}GPT4 Correct User: {{#if @first}}{{#if @root.preprompt}}{{@root.preprompt}}\n{{/if}}{{/if}}{{content}}<|end_of_turn|>GPT4 Correct Assistant:{{/ifUser}}{{#ifAssistant}}{{content}}<|end_of_turn|>{{/ifAssistant}}{{/each}}",
+    "parameters": {
+      "temperature": 0.6,
+      "top_p": 0.95,
+      "repetition_penalty": 1.2,
+      "top_k": 50,
+      "truncate": 6016,
+      "max_new_tokens": 2048,
+      "stop": ["<|end_of_turn|>"]
+    },
+    "promptExamples": [
+      {
+        "title": "Write an email from bullet list",
+        "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
+      }, {
+        "title": "Code a snake game",
+        "prompt": "Code a basic snake game in python, give explanations for each step."
+      }, {
+        "title": "Assist in a task",
+        "prompt": "How do I make a delicious lemon cheesecake?"
       }
     ]
   }
 ]`
 
+OLD_MODELS=`[{"name":"bigcode/starcoder"}, {"name":"OpenAssistant/oasst-sft-6-llama-30b-xor"}, {"name":"HuggingFaceH4/zephyr-7b-alpha"}]`
+
+TASK_MODEL='mistralai/Mistral-7B-Instruct-v0.1'
+
 
 APP_BASE="/chat"
 PUBLIC_ORIGIN=https://huggingface.co
@@ -276,23 +167,14 @@ PUBLIC_APP_NAME=HuggingChat
 PUBLIC_APP_ASSETS=huggingchat
 PUBLIC_APP_COLOR=yellow
 PUBLIC_APP_DESCRIPTION="Making the community's best AI chat models available to everyone."
-PUBLIC_APP_DISCLAIMER_MESSAGE="Disclaimer: AI is an area of active research with known problems such as biased generation and misinformation. Do not use this application for high-stakes decisions or advice."
-PUBLIC_APP_DATA_SHARING=0
+PUBLIC_APP_DATA_SHARING=1
 PUBLIC_APP_DISCLAIMER=1
 
-PUBLIC_PLAUSIBLE_SCRIPT_URL="/js/script.js"
-PUBLIC_APPLE_APP_ID=6476778843
-# Not part of the .env but set as other variables in the space
-# ADDRESS_HEADER=X-Forwarded-For
-# XFF_DEPTH=2
+RATE_LIMIT=16
+MESSAGES_BEFORE_LOGIN=5# how many messages a user can send in a conversation before having to login. set to 0 to force login right away
 
-ENABLE_ASSISTANTS=true
-ENABLE_ASSISTANTS_RAG=true
-REQUIRE_FEATURED_ASSISTANTS=true
-EXPOSE_API=true
+PUBLIC_GOOGLE_ANALYTICS_ID=G-8Q63TH4CSL
 
-ALTERNATIVE_REDIRECT_URLS=`[
-  huggingchat://login/callback
-]`
-
-WEBSEARCH_BLOCKLIST=`["youtube.com", "twitter.com"]`
+# Not part of the .env but set as other variables in the space
+# ADDRESS_HEADER=X-Forwarded-For
+# XFF_DEPTH=2

.eslintrc.cjs

@@ -34,7 +34,6 @@ module.exports = {
 				argsIgnorePattern: "^_",
 			},
 		],
-		"object-shorthand": ["error", "always"],
 	},
 	env: {
 		browser: true,

.github/release.yml

@@ -1,16 +0,0 @@
-changelog:
-  exclude:
-    labels:
-      - huggingchat
-      - CI/CD
-      - documentation
-  categories:
-    - title: Features
-      labels:
-        - enhancement
-    - title: Bugfixes
-      labels:
-        - bug
-    - title: Other changes
-      labels:
-        - "*"

.github/workflows/build-image.yml

@@ -1,125 +0,0 @@
-name: Build and Publish Image
-
-on:
-  push:
-    branches:
-      - "main"
-  pull_request:
-    branches:
-      - "*"
-    paths:
-      - "Dockerfile"
-      - "entrypoint.sh"
-  workflow_dispatch:
-  release:
-    types: [published, edited]
-
-jobs:
-  build-and-publish-image-with-db:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Extract package version
-        id: package-version
-        run: |
-          VERSION=$(jq -r .version package.json)
-          echo "VERSION=$VERSION" >> $GITHUB_OUTPUT
-          MAJOR=$(echo $VERSION | cut -d '.' -f1)
-          echo "MAJOR=$MAJOR" >> $GITHUB_OUTPUT
-          MINOR=$(echo $VERSION | cut -d '.' -f1).$(echo $VERSION | cut -d '.' -f2)
-          echo "MINOR=$MINOR" >> $GITHUB_OUTPUT
-
-      - name: Docker metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ghcr.io/huggingface/chat-ui-db
-          tags: |
-            type=raw,value=${{ steps.package-version.outputs.VERSION }},enable=${{github.event_name == 'release'}}
-            type=raw,value=${{ steps.package-version.outputs.MAJOR }},enable=${{github.event_name == 'release'}}
-            type=raw,value=${{ steps.package-version.outputs.MINOR }},enable=${{github.event_name == 'release'}}
-            type=raw,value=latest,enable={{is_default_branch}}
-            type=sha,enable={{is_default_branch}}
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to GitHub Container Registry
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build and Publish Docker Image with DB
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: Dockerfile
-          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: linux/amd64,linux/arm64
-          build-args: |
-            INCLUDE_DB=true
-  build-and-publish-image-nodb:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Extract package version
-        id: package-version
-        run: |
-          VERSION=$(jq -r .version package.json)
-          echo "VERSION=$VERSION" >> $GITHUB_OUTPUT
-          MAJOR=$(echo $VERSION | cut -d '.' -f1)
-          echo "MAJOR=$MAJOR" >> $GITHUB_OUTPUT
-          MINOR=$(echo $VERSION | cut -d '.' -f1).$(echo $VERSION | cut -d '.' -f2)
-          echo "MINOR=$MINOR" >> $GITHUB_OUTPUT
-
-      - name: Docker metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ghcr.io/huggingface/chat-ui
-          tags: |
-            type=raw,value=${{ steps.package-version.outputs.VERSION }},enable=${{github.event_name == 'release'}}
-            type=raw,value=${{ steps.package-version.outputs.MAJOR }},enable=${{github.event_name == 'release'}}
-            type=raw,value=${{ steps.package-version.outputs.MINOR }},enable=${{github.event_name == 'release'}}
-            type=raw,value=latest,enable={{is_default_branch}}
-            type=sha,enable={{is_default_branch}}
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to GitHub Container Registry
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build and Publish Docker Image without DB
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: Dockerfile
-          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: linux/amd64,linux/arm64
-          build-args: |
-            INCLUDE_DB=false

.github/workflows/deploy-release.yml

@@ -1,6 +1,9 @@
 name: Deploy to production
 on:
-  # run this workflow manually from the Actions tab
+  release:
+    types: [released]
+
+  # to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 jobs:
@@ -21,11 +24,7 @@ jobs:
           SERPER_API_KEY: ${{ secrets.SERPER_API_KEY }}
           OPENID_CONFIG: ${{ secrets.OPENID_CONFIG }}
           MONGODB_URL: ${{ secrets.MONGODB_URL }}
-          HF_DEPLOYMENT_TOKEN: ${{ secrets.HF_DEPLOYMENT_TOKEN }}
-          WEBHOOK_URL_REPORT_ASSISTANT: ${{ secrets.WEBHOOK_URL_REPORT_ASSISTANT }}
-          ADMIN_API_SECRET: ${{ secrets.ADMIN_API_SECRET }}
-          USAGE_LIMITS: ${{ secrets.USAGE_LIMITS }}
-          MESSAGES_BEFORE_LOGIN: ${{ secrets.MESSAGES_BEFORE_LOGIN }}
+          HF_ACCESS_TOKEN: ${{ secrets.HF_ACCESS_TOKEN }}
         run: npm run updateProdEnv
   sync-to-hub:
     runs-on: ubuntu-latest
@@ -40,5 +39,5 @@ jobs:
           lfs: true
       - name: Push to hub
         env:
-          HF_DEPLOYMENT_TOKEN: ${{ secrets.HF_DEPLOYMENT_TOKEN }}
-        run: git push https://nsarrazin:$HF_DEPLOYMENT_TOKEN@huggingface.co/spaces/huggingchat/chat-ui main
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: git push https://nsarrazin:$HF_TOKEN@huggingface.co/spaces/huggingchat/chat-ui main

.github/workflows/deploy-staging.yml

@@ -20,5 +20,5 @@ jobs:
           lfs: true
       - name: Push to hub
         env:
-          HF_DEPLOYMENT_TOKEN: ${{ secrets.HF_DEPLOYMENT_TOKEN }}
-        run: git push https://nsarrazin:$HF_DEPLOYMENT_TOKEN@huggingface.co/spaces/huggingchat/chat-ui-staging main
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: git push https://nsarrazin:$HF_TOKEN@huggingface.co/spaces/huggingchat/chat-ui-staging main

.github/workflows/lint-and-test.yml

@@ -53,4 +53,4 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Build Docker image
-        run: docker build --secret id=DOTENV_LOCAL,src=.env.ci -t chat-ui:latest .
+        run: docker build --secret id=DOTENV_LOCAL,src=conf/.env.ci -t chat-ui:latest .

.gitignore

@@ -5,11 +5,10 @@ node_modules
 /package
 .env
 .env.*
+!.env.example
+!.env.template
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 SECRET_CONFIG
 .idea
-!.env.ci
-!.env
-!.env.template
-gcp-*.json
+!conf/.env.ci

.vscode/settings.json

@@ -2,7 +2,7 @@
 	"editor.formatOnSave": true,
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.codeActionsOnSave": {
-		"source.fixAll": "explicit"
+		"source.fixAll": true
 	},
 	"eslint.validate": ["javascript", "svelte"]
 }

Dockerfile

@@ -1,10 +1,7 @@
 # syntax=docker/dockerfile:1
 # read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
 # you will also find guides on how best to write your Dockerfile
-ARG INCLUDE_DB=false
-
-# stage that install the dependencies
-FROM node:20 as builder-production
+FROM node:19 as builder-production
 
 WORKDIR /app
 
@@ -15,74 +12,21 @@ RUN --mount=type=cache,target=/app/.npm \
 
 FROM builder-production as builder
 
-ARG APP_BASE=
-ARG PUBLIC_APP_COLOR=blue
-
 RUN --mount=type=cache,target=/app/.npm \
         npm set cache /app/.npm && \
         npm ci
 
 COPY --link --chown=1000 . .
 
-RUN npm run build
-
-# mongo image
-FROM mongo:latest as mongo
-
-# image to be used if INCLUDE_DB is false
-FROM node:20-slim as local_db_false
-
-# image to be used if INCLUDE_DB is true
-FROM node:20-slim as local_db_true
-
-RUN apt-get update
-RUN apt-get install gnupg curl -y
-# copy mongo from the other stage
-COPY --from=mongo /usr/bin/mongo* /usr/bin/
-
-ENV MONGODB_URL=mongodb://localhost:27017
-RUN mkdir -p /data/db
-RUN chown -R 1000:1000 /data/db
-
-# final image
-FROM local_db_${INCLUDE_DB} as final
-
-# build arg to determine if the database should be included
-ARG INCLUDE_DB=false
-ENV INCLUDE_DB=${INCLUDE_DB}
-
-# svelte requires APP_BASE at build time so it must be passed as a build arg
-ARG APP_BASE=
-# tailwind requires the primary theme to be known at build time so it must be passed as a build arg
-ARG PUBLIC_APP_COLOR=blue
-
-
-# install dotenv-cli
-RUN npm install -g dotenv-cli
-
-# switch to a user that works for spaces
-RUN userdel -r node
-RUN useradd -m -u 1000 user
-USER user
-
-ENV HOME=/home/user \
-	PATH=/home/user/.local/bin:$PATH
-
-WORKDIR /app
-
-# add a .env.local if the user doesn't bind a volume to it
-RUN touch /app/.env.local
+RUN --mount=type=secret,id=DOTENV_LOCAL,dst=.env.local \
+    npm run build
 
-# get the default config, the entrypoint script and the server script
-COPY --chown=1000 package.json /app/package.json
-COPY --chown=1000 .env /app/.env
-COPY --chown=1000 entrypoint.sh /app/entrypoint.sh
-COPY --chown=1000 gcp-*.json /app/
+FROM node:19-slim
 
-#import the build & dependencies
-COPY --from=builder --chown=1000 /app/build /app/build
-COPY --from=builder --chown=1000 /app/node_modules /app/node_modules
+RUN npm install -g pm2
 
-RUN chmod +x /app/entrypoint.sh
+COPY --from=builder-production /app/node_modules /app/node_modules
+COPY --link --chown=1000 package.json /app/package.json
+COPY --from=builder /app/build /app/build
 
-CMD ["/bin/bash", "-c", "/app/entrypoint.sh"]
+CMD pm2 start /app/build/index.js -i $CPU_CORES --no-daemon

PRIVACY.md

@@ -1,12 +1,12 @@
 ## Privacy
 
-> Last updated: April 15, 2024
+> Last updated: October 4, 2023
 
 Users of HuggingChat are authenticated through their HF user account.
 
-We endorse Privacy by Design. As such, your conversations are private to you and will not be shared with anyone, including model authors, for any purpose, including for research or model training purposes.
+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.
 
-You conversation data 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.
+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 <privacy@huggingface.co>.
 
@@ -14,18 +14,12 @@ You conversation data will only be stored to let you access past conversations.
 
 The goal of this app is to showcase that it is now possible to build an open source alternative to ChatGPT. 💪
 
-We aim to always provide a diverse set of state of the art open LLMs, hence we rotate the available models over time.
-
-Historically, HuggingChat has been running models such as:
+For now (October 2023), it's running:
 
 - [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/)
-- [Cohere Command R+](https://huggingface.co/chat/models/CohereForAI/c4ai-command-r-plus)
-- [Google Gemma 7B](https://huggingface.co/chat/models/google/gemma-1.1-7b-it)
-
-This is only a partial list. Check the [models](https://huggingface.co/chat/models/) page for up-to-date list of the best available LLMs.
 
 ## Technical details
 

PROMPTS.md

@@ -43,27 +43,3 @@ System: {{preprompt}}\nUser:{{#each messages}}{{#ifUser}}{{content}}\nFalcon:{{/
 ```env
 <s>{{#each messages}}{{#ifUser}}GPT4 User: {{#if @first}}{{#if @root.preprompt}}{{@root.preprompt}}\n{{/if}}{{/if}}{{content}}<|end_of_turn|>GPT4 Assistant: {{/ifUser}}{{#ifAssistant}}{{content}}<|end_of_turn|>{{/ifAssistant}}{{/each}}
 ```
-
-## Mixtral
-
-```env
-<s> {{#each messages}}{{#ifUser}}[INST]{{#if @first}}{{#if @root.preprompt}}{{@root.preprompt}}\n{{/if}}{{/if}} {{content}} [/INST]{{/ifUser}}{{#ifAssistant}} {{content}}</s> {{/ifAssistant}}{{/each}}
-```
-
-## ChatML
-
-```env
-{{#if @root.preprompt}}<|im_start|>system\n{{@root.preprompt}}<|im_end|>\n{{/if}}{{#each messages}}{{#ifUser}}<|im_start|>user\n{{content}}<|im_end|>\n<|im_start|>assistant\n{{/ifUser}}{{#ifAssistant}}{{content}}<|im_end|>\n{{/ifAssistant}}{{/each}}
-```
-
-## CodeLlama 70B
-
-```env
-<s>{{#if @root.preprompt}}Source: system\n\n {{@root.preprompt}} <step> {{/if}}{{#each messages}}{{#ifUser}}Source: user\n\n {{content}} <step> {{/ifUser}}{{#ifAssistant}}Source: assistant\n\n {{content}} <step> {{/ifAssistant}}{{/each}}Source: assistant\nDestination: user\n\n ``
-```
-
-## Gemma
-
-```env
-{{#each messages}}{{#ifUser}}<start_of_turn>user\n{{#if @first}}{{#if @root.preprompt}}{{@root.preprompt}}\n{{/if}}{{/if}}{{content}}<end_of_turn>\n<start_of_turn>model\n{{/ifUser}}{{#ifAssistant}}{{content}}<end_of_turn>\n{{/ifAssistant}}{{/each}}
-```

README.md

@@ -8,8 +8,6 @@ pinned: false
 license: apache-2.0
 base_path: /chat
 app_port: 3000
-failure_strategy: rollback
-load_balancing_strategy: random
 ---
 
 # Chat UI
@@ -22,19 +20,17 @@ A chat interface using open source models, eg OpenAssistant or Llama. It is a Sv
 1. [Setup](#setup)
 2. [Launch](#launch)
 3. [Web Search](#web-search)
-4. [Text Embedding Models](#text-embedding-models)
-5. [Extra parameters](#extra-parameters)
-6. [Common issues](#common-issues)
-7. [Deploying to a HF Space](#deploying-to-a-hf-space)
-8. [Building](#building)
+4. [Extra parameters](#extra-parameters)
+5. [Deploying to a HF Space](#deploying-to-a-hf-space)
+6. [Building](#building)
 
-## No Setup Deploy
+##  No Setup Deploy
 
 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](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 `HF_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).
+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).
 
@@ -46,7 +42,7 @@ Start by creating a `.env.local` file in the root of the repository. The bare mi
 
 ```env
 MONGODB_URL=<the URL to your MongoDB instance>
-HF_TOKEN=<your access token>
+HF_ACCESS_TOKEN=<your access token>
 ```
 
 ### Database
@@ -82,50 +78,10 @@ Chat UI features a powerful Web Search feature. It works by:
 
 1. Generating an appropriate search query from the user prompt.
 2. Performing web search and extracting content from webpages.
-3. Creating embeddings from texts using a text embedding model.
+3. Creating embeddings from texts using [transformers.js](https://huggingface.co/docs/transformers.js). Specifically, using [Xenova/gte-small](https://huggingface.co/Xenova/gte-small) model.
 4. From these embeddings, find the ones that are closest to the user query using a vector similarity search. Specifically, we use `inner product` distance.
 5. Get the corresponding texts to those closest embeddings and perform [Retrieval-Augmented Generation](https://huggingface.co/papers/2005.11401) (i.e. expand user prompt by adding those texts so that an LLM can use this information).
 
-## Text Embedding Models
-
-By default (for backward compatibility), when `TEXT_EMBEDDING_MODELS` environment variable is not defined, [transformers.js](https://huggingface.co/docs/transformers.js) embedding models will be used for embedding tasks, specifically, [Xenova/gte-small](https://huggingface.co/Xenova/gte-small) model.
-
-You can customize the embedding model by setting `TEXT_EMBEDDING_MODELS` in your `.env.local` file. For example:
-
-```env
-TEXT_EMBEDDING_MODELS = `[
-  {
-    "name": "Xenova/gte-small",
-    "displayName": "Xenova/gte-small",
-    "description": "locally running embedding",
-    "chunkCharLength": 512,
-    "endpoints": [
-      {"type": "transformersjs"}
-    ]
-  },
-  {
-    "name": "intfloat/e5-base-v2",
-    "displayName": "intfloat/e5-base-v2",
-    "description": "hosted embedding model",
-    "chunkCharLength": 768,
-    "preQuery": "query: ", # See https://huggingface.co/intfloat/e5-base-v2#faq
-    "prePassage": "passage: ", # See https://huggingface.co/intfloat/e5-base-v2#faq
-    "endpoints": [
-      {
-        "type": "tei",
-        "url": "http://127.0.0.1:8080/",
-        "authorization": "TOKEN_TYPE TOKEN" // optional authorization field. Example: "Basic VVNFUjpQQVNT"
-      }
-    ]
-  }
-]`
-```
-
-The required fields are `name`, `chunkCharLength` and `endpoints`.
-Supported text embedding backends are: [`transformers.js`](https://huggingface.co/docs/transformers.js), [`TEI`](https://github.com/huggingface/text-embeddings-inference) and [`OpenAI`](https://platform.openai.com/docs/guides/embeddings). `transformers.js` models run locally as part of `chat-ui`, whereas `TEI` models run in a different environment & accessed through an API endpoint. `openai` models are accessed through the [OpenAI API](https://platform.openai.com/docs/guides/embeddings).
-
-When more than one embedding models are supplied in `.env.local` file, the first will be used by default, and the others will only be used on LLM's which configured `embeddingModel` to the name of the model.
-
 ## Extra parameters
 
 ### OpenID connect
@@ -166,9 +122,9 @@ PUBLIC_APP_DISCLAIMER=
 
 ### Web Search config
 
-You can enable the web search through an API by adding `YDC_API_KEY` ([docs.you.com](https://docs.you.com)) or `SERPER_API_KEY` ([serper.dev](https://serper.dev/)) or `SERPAPI_KEY` ([serpapi.com](https://serpapi.com/)) or `SERPSTACK_API_KEY` ([serpstack.com](https://serpstack.com/)) to your `.env.local`.
+You can enable the web search through an API by adding `YDC_API_KEY` ([docs.you.com](https://docs.you.com)) or `SERPER_API_KEY` ([serper.dev](https://serper.dev/)) or `SERPAPI_KEY` ([serpapi.com](https://serpapi.com/)) to your `.env.local`.
 
-You can also simply enable the local google websearch by setting `USE_LOCAL_WEBSEARCH=true` in your `.env.local` or specify a SearXNG instance by adding the query URL to `SEARXNG_QUERY_URL`.
+You can also simply enable the local websearch by setting `USE_LOCAL_WEBSEARCH=true` in your `.env.local`.
 
 ### Custom models
 
@@ -177,33 +133,36 @@ You can customize the parameters passed to the model or even use a new model by
 ```env
 MODELS=`[
   {
-    "name": "mistralai/Mistral-7B-Instruct-v0.2",
-    "displayName": "mistralai/Mistral-7B-Instruct-v0.2",
-    "description": "Mistral 7B is a new Apache 2.0 model, released by Mistral AI that outperforms Llama2 13B in benchmarks.",
-    "websiteUrl": "https://mistral.ai/news/announcing-mistral-7b/",
-    "preprompt": "",
-    "chatPromptTemplate" : "<s>{{#each messages}}{{#ifUser}}[INST] {{#if @first}}{{#if @root.preprompt}}{{@root.preprompt}}\n{{/if}}{{/if}}{{content}} [/INST]{{/ifUser}}{{#ifAssistant}}{{content}}</s>{{/ifAssistant}}{{/each}}",
-    "parameters": {
-      "temperature": 0.3,
-      "top_p": 0.95,
-      "repetition_penalty": 1.2,
-      "top_k": 50,
-      "truncate": 3072,
-      "max_new_tokens": 1024,
-      "stop": ["</s>"]
-    },
+    "name": "OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5",
+    "datasetName": "OpenAssistant/oasst1",
+    "description": "A good alternative to ChatGPT",
+    "websiteUrl": "https://open-assistant.io",
+    "userMessageToken": "<|prompter|>", # This does not need to be a token, can be any string
+    "assistantMessageToken": "<|assistant|>", # This does not need to be a token, can be any string
+    "userMessageEndToken": "<|endoftext|>", # Applies only to user messages. Can be any string.
+    "assistantMessageEndToken": "<|endoftext|>", # Applies only to assistant messages. Can be any string.
+    "preprompt": "Below are a series of dialogues between various people and an AI assistant. The AI tries to be helpful, polite, honest, sophisticated, emotionally aware, and humble but knowledgeable. The assistant is happy to help with almost anything and will do its best to understand exactly what is needed. It also tries to avoid giving false or misleading information, and it caveats when it isn't entirely sure about the right answer. That said, the assistant is practical and really does its best, and doesn't let caution get too much in the way of being useful.\n-----\n",
     "promptExamples": [
       {
         "title": "Write an email from bullet list",
         "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
       }, {
         "title": "Code a snake game",
-        "prompt": "Code a basic snake game in python, give explanations for each step."
+        "prompt": "Code a basic snake game in python and give explanations for each step."
       }, {
         "title": "Assist in a task",
         "prompt": "How do I make a delicious lemon cheesecake?"
       }
-    ]
+    ],
+    "parameters": {
+      "temperature": 0.9,
+      "top_p": 0.95,
+      "repetition_penalty": 1.2,
+      "top_k": 50,
+      "truncate": 1000,
+      "max_new_tokens": 1024,
+      "stop": ["<|endoftext|>"]  # This does not need to be tokens, can be any list of strings
+    }
   }
 ]`
 
@@ -228,7 +187,7 @@ The following is the default `chatPromptTemplate`, although newlines and indenti
 
 #### Multi modal model
 
-We currently only support IDEFICS as a multimodal model, hosted on TGI. You can enable it by using the following config (if you have a PRO HF Api token):
+We currently only support IDEFICS as a multimodal model, hosted on TGI. You can enable it by using the followin config (if you have a PRO HF Api token):
 
 ```env
     {
@@ -318,78 +277,6 @@ MODELS=`[{
 }]`
 ```
 
-You may also consume any model provider that provides compatible OpenAI API endpoint. For example, you may self-host [Portkey](https://github.com/Portkey-AI/gateway) gateway and experiment with Claude or GPTs offered by Azure OpenAI. Example for Claude from Anthropic:
-
-```
-MODELS=`[{
-  "name": "claude-2.1",
-  "displayName": "Claude 2.1",
-  "description": "Anthropic has been founded by former OpenAI researchers...",
-  "parameters": {
-      "temperature": 0.5,
-      "max_new_tokens": 4096,
-  },
-  "endpoints": [
-      {
-          "type": "openai",
-          "baseURL": "https://gateway.example.com/v1",
-          "defaultHeaders": {
-              "x-portkey-config": '{"provider":"anthropic","api_key":"sk-ant-abc...xyz"}'
-          }
-      }
-  ]
-}]`
-```
-
-Example for GPT 4 deployed on Azure OpenAI:
-
-```
-MODELS=`[{
-  "id": "gpt-4-1106-preview",
-  "name": "gpt-4-1106-preview",
-  "displayName": "gpt-4-1106-preview",
-  "parameters": {
-      "temperature": 0.5,
-      "max_new_tokens": 4096,
-  },
-  "endpoints": [
-      {
-          "type": "openai",
-          "baseURL": "https://{resource-name}.openai.azure.com/openai/deployments/{deployment-id}",
-          "defaultHeaders": {
-              "api-key": "{api-key}"
-          },
-          "defaultQuery": {
-              "api-version": "2023-05-15"
-          }
-      }
-  ]
-}]`
-```
-
-Or try Mistral from [Deepinfra](https://deepinfra.com/mistralai/Mistral-7B-Instruct-v0.1/api?example=openai-http):
-
-> Note, apiKey can either be set custom per endpoint, or globally using `OPENAI_API_KEY` variable.
-
-```
-MODELS=`[{
-  "name": "mistral-7b",
-  "displayName": "Mistral 7B",
-  "description": "A 7B dense Transformer, fast-deployed and easily customisable. Small, yet powerful for a variety of use cases. Supports English and code, and a 8k context window.",
-  "parameters": {
-      "temperature": 0.5,
-      "max_new_tokens": 4096,
-  },
-  "endpoints": [
-      {
-          "type": "openai",
-          "baseURL": "https://api.deepinfra.com/v1/openai",
-          "apiKey": "abc...xyz"
-      }
-  ]
-}]`
-```
-
 ##### Llama.cpp API server
 
 chat-ui also supports the llama.cpp API server directly without the need for an adapter. You can do this using the `llamacpp` endpoint type.
@@ -401,7 +288,7 @@ If you want to run chat-ui with llama.cpp, you can do the following, using Zephy
 3. Add the following to your `.env.local`:
 
 ```env
-MODELS=`[
+MODELS=[
   {
       "name": "Local Zephyr",
       "chatPromptTemplate": "<|system|>\n{{preprompt}}</s>\n{{#each messages}}{{#ifUser}}<|user|>\n{{content}}</s>\n<|assistant|>\n{{/ifUser}}{{#ifAssistant}}{{content}}</s>\n{{/ifAssistant}}{{/each}}",
@@ -421,7 +308,7 @@ MODELS=`[
         }
       ]
   }
-]`
+]
 ```
 
 Start chat-ui with `npm run dev` and you should be able to chat with Zephyr locally.
@@ -437,7 +324,7 @@ ollama run mistral
 Then specify the endpoints like so:
 
 ```env
-MODELS=`[
+MODELS=[
   {
       "name": "Ollama Mistral",
       "chatPromptTemplate": "<s>{{#each messages}}{{#ifUser}}[INST] {{#if @first}}{{#if @root.preprompt}}{{@root.preprompt}}\n{{/if}}{{/if}} {{content}} [/INST]{{/ifUser}}{{#ifAssistant}}{{content}}</s> {{/ifAssistant}}{{/each}}",
@@ -458,52 +345,7 @@ MODELS=`[
         }
       ]
   }
-]`
-```
-
-#### Anthropic
-
-We also support Anthropic models through the official SDK. You may provide your API key via the `ANTHROPIC_API_KEY` env variable, or alternatively, through the `endpoints.apiKey` as per the following example.
-
-```
-MODELS=`[
-  {
-      "name": "claude-3-sonnet-20240229",
-      "displayName": "Claude 3 Sonnet",
-      "description": "Ideal balance of intelligence and speed",
-      "parameters": {
-        "max_new_tokens": 4096,
-      },
-      "endpoints": [
-        {
-          "type": "anthropic",
-          // optionals
-          "apiKey": "sk-ant-...",
-          "baseURL": "https://api.anthropic.com",
-          defaultHeaders: {},
-          defaultQuery: {}
-        }
-      ]
-  },
-  {
-      "name": "claude-3-opus-20240229",
-      "displayName": "Claude 3 Opus",
-      "description": "Most powerful model for highly complex tasks",
-      "parameters": {
-         "max_new_tokens": 4096
-      },
-      "endpoints": [
-        {
-          "type": "anthropic",
-          // optionals
-          "apiKey": "sk-ant-...",
-          "baseURL": "https://api.anthropic.com",
-          defaultHeaders: {},
-          defaultQuery: {}
-        }
-      ]
-  }
-]`
+]
 ```
 
 #### Amazon
@@ -530,120 +372,6 @@ You can also set `"service" : "lambda"` to use a lambda instance.
 
 You can get the `accessKey` and `secretKey` from your AWS user, under programmatic access.
 
-#### Cloudflare Workers AI
-
-You can also use Cloudflare Workers AI to run your own models with serverless inference.
-
-You will need to have a Cloudflare account, then get your [account ID](https://developers.cloudflare.com/fundamentals/setup/find-account-and-zone-ids/) as well as your [API token](https://developers.cloudflare.com/workers-ai/get-started/rest-api/#1-get-an-api-token) for Workers AI.
-
-You can either specify them directly in your `.env.local` using the `CLOUDFLARE_ACCOUNT_ID` and `CLOUDFLARE_API_TOKEN` variables, or you can set them directly in the endpoint config.
-
-You can find the list of models available on Cloudflare [here](https://developers.cloudflare.com/workers-ai/models/#text-generation).
-
-```env
-  {
-  "name" : "nousresearch/hermes-2-pro-mistral-7b",
-  "tokenizer": "nousresearch/hermes-2-pro-mistral-7b",
-  "parameters": {
-    "stop": ["<|im_end|>"]
-  },
-  "endpoints" : [
-    {
-      "type" : "cloudflare"
-      <!-- optionally specify these
-      "accountId": "your-account-id",
-      "authToken": "your-api-token"
-      -->
-    }
-  ]
-}
-```
-
-> [!NOTE]  
-> Cloudlare Workers AI currently do not support custom sampling parameters like temperature, top_p, etc.
-
-#### Cohere
-
-You can also use Cohere to run their models directly from chat-ui. You will need to have a Cohere account, then get your [API token](https://dashboard.cohere.com/api-keys). You can either specify it directly in your `.env.local` using the `COHERE_API_TOKEN` variable, or you can set it in the endpoint config.
-
-Here is an example of a Cohere model config. You can set which model you want to use by setting the `id` field to the model name.
-
-```env
-  {
-    "name" : "CohereForAI/c4ai-command-r-v01",
-    "id": "command-r",
-    "description": "C4AI Command-R is a research release of a 35 billion parameter highly performant generative model",
-    "endpoints": [
-      {
-        "type": "cohere",
-        <!-- optionally specify these, or use COHERE_API_TOKEN
-        "apiKey": "your-api-token"
-        -->
-      }
-    ]
-  }
-```
-
-##### Google Vertex models
-
-Chat UI can connect to the google Vertex API endpoints ([List of supported models](https://cloud.google.com/vertex-ai/generative-ai/docs/learn/models)).
-
-To enable:
-
-1. [Select](https://console.cloud.google.com/project) or [create](https://cloud.google.com/resource-manager/docs/creating-managing-projects#creating_a_project) a Google Cloud project.
-1. [Enable billing for your project](https://cloud.google.com/billing/docs/how-to/modify-project).
-1. [Enable the Vertex AI API](https://console.cloud.google.com/flows/enableapi?apiid=aiplatform.googleapis.com).
-1. [Set up authentication with a service account](https://cloud.google.com/docs/authentication/getting-started)
-   so you can access the API from your local workstation.
-
-The service account credentials file can be imported as an environmental variable:
-
-```env
-    GOOGLE_APPLICATION_CREDENTIALS = clientid.json
-```
-
-Make sure your docker container has access to the file and the variable is correctly set.
-Afterwards Google Vertex endpoints can be configured as following:
-
-```
-MODELS=`[
-//...
-    {
-       "name": "gemini-1.5-pro",
-       "displayName": "Vertex Gemini Pro 1.5",
-       "endpoints" : [{
-          "type": "vertex",
-          "project": "abc-xyz",
-          "location": "europe-west3",
-          "model": "gemini-1.5-pro-preview-0409", // model-name
-
-          // Optional
-          "safetyThreshold": "BLOCK_MEDIUM_AND_ABOVE",
-          "apiEndpoint": "", // alternative api endpoint url
-       }]
-     },
-]`
-
-```
-
-##### LangServe
-
-LangChain applications that are deployed using LangServe can be called with the following config:
-
-```
-MODELS=`[
-//...
-    {
-       "name": "summarization-chain", //model-name
-       "endpoints" : [{
-         "type": "langserve",
-         "url" : "http://127.0.0.1:8100",
-       }]
-     },
-]`
-
-```
-
 ### Custom endpoint authorization
 
 #### Basic and Bearer
@@ -662,30 +390,28 @@ You can then add the generated information and the `authorization` parameter to
 
 ```env
 "endpoints": [
-  {
-    "url": "https://HOST:PORT",
-    "authorization": "Basic VVNFUjpQQVNT",
-  }
+{
+"url": "https://HOST:PORT",
+"authorization": "Basic VVNFUjpQQVNT",
+}
 ]
 ```
 
-Please note that if `HF_TOKEN` is also set or not empty, it will take precedence.
-
 #### Models hosted on multiple custom endpoints
 
 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",
-    "weight": 1
-  },
-  {
-    "url": "https://HOST:PORT",
-    "weight": 2
-  }
-  ...
+{
+"url": "https://HOST:PORT",
+"weight": 1
+}
+{
+"url": "https://HOST:PORT",
+"weight": 2
+}
+...
 ]
 ```
 
@@ -697,53 +423,6 @@ If you're using a certificate signed by a private CA, you will also need to add
 
 If you're using a self-signed certificate, e.g. for testing or development purposes, you can set the `REJECT_UNAUTHORIZED` parameter to `false` in your `.env.local`. This will disable certificate validation, and allow Chat UI to connect to your custom endpoint.
 
-#### Specific Embedding Model
-
-A model can use any of the embedding models defined in `.env.local`, (currently used when web searching),
-by default it will use the first embedding model, but it can be changed with the field `embeddingModel`:
-
-```env
-TEXT_EMBEDDING_MODELS = `[
-  {
-    "name": "Xenova/gte-small",
-    "chunkCharLength": 512,
-    "endpoints": [
-      {"type": "transformersjs"}
-    ]
-  },
-  {
-    "name": "intfloat/e5-base-v2",
-    "chunkCharLength": 768,
-    "endpoints": [
-      {"type": "tei", "url": "http://127.0.0.1:8080/", "authorization": "Basic VVNFUjpQQVNT"},
-      {"type": "tei", "url": "http://127.0.0.1:8081/"}
-    ]
-  }
-]`
-
-MODELS=`[
-  {
-      "name": "Ollama Mistral",
-      "chatPromptTemplate": "...",
-      "embeddingModel": "intfloat/e5-base-v2"
-      "parameters": {
-        ...
-      },
-      "endpoints": [
-        ...
-      ]
-  }
-]`
-```
-
-## Common issues
-
-### 403：You don't have access to this conversation
-
-Most likely you are running chat-ui over HTTP. The recommended option is to setup something like NGINX to handle HTTPS and proxy the requests to chat-ui. If you really need to run over HTTP you can add `ALLOW_INSECURE_COOKIES=true` to your `.env.local`.
-
-Make sure to set your `PUBLIC_ORIGIN` in your `.env.local` to the correct URL as well.
-
 ## Deploying to a HF Space
 
 Create a `DOTENV_LOCAL` secret to your HF space with the content of your .env.local, and they will be picked up automatically when you run.
@@ -759,76 +438,3 @@ npm run build
 You can preview the production build with `npm run preview`.
 
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-
-## Config changes for HuggingChat
-
-The config file for HuggingChat is stored in the `.env.template` file at the root of the repository. It is the single source of truth that is used to generate the actual `.env.local` file using our CI/CD pipeline. See [updateProdEnv](https://github.com/huggingface/chat-ui/blob/cdb33a9583f5339ade724db615347393ef48f5cd/scripts/updateProdEnv.ts) for more details.
-
-> [!TIP]
-> If you want to make changes to the model config used in production for HuggingChat, you should do so against `.env.template`.
-
-We currently use the following secrets for deploying HuggingChat in addition to the `.env.template` above:
-
-- `MONGODB_URL`
-- `HF_TOKEN`
-- `OPENID_CONFIG`
-- `SERPER_API_KEY`
-
-### Running a copy of HuggingChat locally
-
-If you want to run an exact copy of HuggingChat locally, you will need to do the following first:
-
-1. Create an [OAuth App on the hub](https://huggingface.co/settings/applications/new) with `openid profile email` permissions. Make sure to set the callback URL to something like `http://localhost:5173/chat/login/callback` which matches the right path for your local instance.
-2. Create a [HF Token](https://huggingface.co/settings/tokens) with your Hugging Face account. You will need a Pro account to be able to access some of the larger models available through HuggingChat.
-3. Create a free account with [serper.dev](https://serper.dev/) (you will get 2500 free search queries)
-4. Run an instance of mongoDB, however you want. (Local or remote)
-
-You can then create a new `.env.SECRET_CONFIG` file with the following content
-
-```env
-MONGODB_URL=<link to your mongo DB from step 4>
-HF_TOKEN=<your HF token from step 2>
-OPENID_CONFIG=`{
-  PROVIDER_URL: "https://huggingface.co",
-  CLIENT_ID: "<your client ID from step 1>",
-  CLIENT_SECRET: "<your client secret from step 1>",
-}`
-SERPER_API_KEY=<your serper API key from step 3>
-MESSAGES_BEFORE_LOGIN=<can be any numerical value, or set to 0 to require login>
-```
-
-You can then run `npm run updateLocalEnv` in the root of chat-ui. This will create a `.env.local` file which combines the `.env.template` and the `.env.SECRET_CONFIG` file. You can then run `npm run dev` to start your local instance of HuggingChat.
-
-### Populate database
-
-> [!WARNING]
-> The `MONGODB_URL` used for this script will be fetched from `.env.local`. Make sure it's correct! The command runs directly on the database.
-
-You can populate the database using faker data using the `populate` script:
-
-```bash
-npm run populate <flags here>
-```
-
-At least one flag must be specified, the following flags are available:
-
-- `reset` - resets the database
-- `all` - populates all tables
-- `users` - populates the users table
-- `settings` - populates the settings table for existing users
-- `assistants` - populates the assistants table for existing users
-- `conversations` - populates the conversations table for existing users
-
-For example, you could use it like so:
-
-```bash
-npm run populate reset
-```
-
-to clear out the database. Then login in the app to create your user and run the following command:
-
-```bash
-npm run populate users settings assistants conversations
-```
-
-to populate the database with fake data, including fake conversations and assistants for your user.

entrypoint.sh

@@ -1,19 +0,0 @@
-ENV_LOCAL_PATH=/app/.env.local
-
-if test -z "${DOTENV_LOCAL}" ; then
-    if ! test -f "${ENV_LOCAL_PATH}" ; then
-        echo "DOTENV_LOCAL was not found in the ENV variables and .env.local is not set using a bind volume. Make sure to set environment variables properly. "
-    fi;
-else
-    echo "DOTENV_LOCAL was found in the ENV variables. Creating .env.local file."
-    cat <<< "$DOTENV_LOCAL" > ${ENV_LOCAL_PATH}
-fi;
-
-if [ "$INCLUDE_DB" = "true" ] ; then
-    echo "Starting local MongoDB instance"
-    nohup mongod &
-fi;
-
-export PUBLIC_VERSION=$(node -p "require('./package.json').version")
-
-dotenv -e /app/.env -c -- node /app/build/index.js -- --host 0.0.0.0 --port 3000

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chat-ui",
-	"version": "0.8.3",
+	"version": "0.6.0",
 	"private": true,
 	"packageManager": "npm@9.5.0",
 	"scripts": {
@@ -13,83 +13,61 @@
 		"format": "prettier --plugin-search-dir . --write .",
 		"test": "MONGODB_URL=mongodb://127.0.0.1:27017/ vitest",
 		"updateLocalEnv": "node --loader ts-node/esm scripts/updateLocalEnv.ts",
-		"updateProdEnv": "node --loader ts-node/esm scripts/updateProdEnv.ts",
-		"populate": "vite-node --options.transformMode.ssr='/.*/' scripts/populate.ts"
+		"updateProdEnv": "node --loader ts-node/esm scripts/updateProdEnv.ts"
 	},
 	"devDependencies": {
-		"@faker-js/faker": "^8.4.1",
 		"@iconify-json/carbon": "^1.1.16",
 		"@iconify-json/eos-icons": "^1.1.6",
-		"@sveltejs/adapter-node": "^1.3.1",
-		"@sveltejs/kit": "^1.30.4",
+		"@sveltejs/adapter-node": "^1.2.4",
+		"@sveltejs/kit": "^1.26.0",
 		"@tailwindcss/typography": "^0.5.9",
-		"@types/express": "^4.17.21",
 		"@types/jsdom": "^21.1.1",
-		"@types/minimist": "^1.2.5",
+		"@types/marked": "^4.0.8",
 		"@types/parquetjs": "^0.10.3",
-		"@types/uuid": "^9.0.8",
 		"@typescript-eslint/eslint-plugin": "^6.x",
 		"@typescript-eslint/parser": "^6.x",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
-		"minimist": "^1.2.8",
+		"marked-katex-extension": "^3.0.6",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
 		"prettier-plugin-tailwindcss": "^0.2.7",
-		"prom-client": "^15.1.2",
-		"svelte": "^4.2.8",
-		"svelte-check": "^3.6.2",
+		"svelte": "^4.0.0",
+		"svelte-check": "^3.4.3",
 		"ts-node": "^10.9.1",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"unplugin-icons": "^0.16.1",
-		"vite": "^4.5.3",
-		"vite-node": "^1.3.1",
+		"vite": "^4.3.9",
 		"vitest": "^0.31.0"
 	},
 	"type": "module",
 	"dependencies": {
 		"@huggingface/hub": "^0.5.1",
 		"@huggingface/inference": "^2.6.3",
-		"@iconify-json/bi": "^1.1.21",
-		"@resvg/resvg-js": "^2.6.0",
-		"@xenova/transformers": "^2.16.1",
+		"@xenova/transformers": "^2.6.0",
 		"autoprefixer": "^10.4.14",
 		"browser-image-resizer": "^2.4.1",
 		"date-fns": "^2.29.3",
 		"dotenv": "^16.0.3",
-		"express": "^4.19.2",
 		"handlebars": "^4.7.8",
 		"highlight.js": "^11.7.0",
 		"image-size": "^1.0.2",
-		"ip-address": "^9.0.5",
 		"jsdom": "^22.0.0",
-		"json5": "^2.2.3",
-		"marked": "^12.0.1",
-		"marked-katex-extension": "^5.0.1",
+		"marked": "^4.3.0",
 		"mongodb": "^5.8.0",
 		"nanoid": "^4.0.2",
 		"openid-client": "^5.4.2",
 		"parquetjs": "^0.11.2",
-		"pino": "^9.0.0",
-		"pino-pretty": "^11.0.0",
 		"postcss": "^8.4.31",
-		"saslprep": "^1.0.3",
-		"satori": "^0.10.11",
-		"satori-html": "^0.3.2",
 		"serpapi": "^1.1.1",
-		"sharp": "^0.33.2",
 		"tailwind-scrollbar": "^3.0.0",
-		"tailwindcss": "^3.4.0",
-		"uuid": "^9.0.1",
+		"tailwindcss": "^3.3.1",
 		"zod": "^3.22.3"
 	},
 	"optionalDependencies": {
-		"@anthropic-ai/sdk": "^0.17.1",
-		"@google-cloud/vertexai": "^1.1.0",
 		"aws4fetch": "^1.0.17",
-		"cohere-ai": "^7.9.0",
 		"openai": "^4.14.2"
 	}
 }

scripts/populate.ts

@@ -1,269 +0,0 @@
-import readline from "readline";
-import minimist from "minimist";
-
-// @ts-expect-error: vite-node makes the var available but the typescript compiler doesn't see them
-import { env } from "$env/dynamic/private";
-
-import { faker } from "@faker-js/faker";
-import { ObjectId } from "mongodb";
-
-// @ts-expect-error: vite-node makes the var available but the typescript compiler doesn't see them
-import { collections } from "$lib/server/database";
-import { models } from "../src/lib/server/models.ts";
-import type { User } from "../src/lib/types/User";
-import type { Assistant } from "../src/lib/types/Assistant";
-import type { Conversation } from "../src/lib/types/Conversation";
-import type { Settings } from "../src/lib/types/Settings";
-import { defaultEmbeddingModel } from "../src/lib/server/embeddingModels.ts";
-import { Message } from "../src/lib/types/Message.ts";
-
-import { addChildren } from "../src/lib/utils/tree/addChildren.ts";
-import { generateSearchTokens } from "../src/lib/utils/searchTokens.ts";
-
-const rl = readline.createInterface({
-	input: process.stdin,
-	output: process.stdout,
-});
-
-rl.on("close", function () {
-	process.exit(0);
-});
-
-const possibleFlags = ["reset", "all", "users", "settings", "assistants", "conversations"];
-const argv = minimist(process.argv.slice(2));
-const flags = argv["_"].filter((flag) => possibleFlags.includes(flag));
-
-async function generateMessages(preprompt?: string): Promise<Message[]> {
-	const isLinear = faker.datatype.boolean(0.5);
-	const isInterrupted = faker.datatype.boolean(0.05);
-
-	const messages: Message[] = [];
-
-	messages.push({
-		id: crypto.randomUUID(),
-		from: "system",
-		content: preprompt ?? "",
-		createdAt: faker.date.recent({ days: 30 }),
-		updatedAt: faker.date.recent({ days: 30 }),
-	});
-
-	let isUser = true;
-	let lastId = messages[0].id;
-	if (isLinear) {
-		const convLength = faker.number.int({ min: 1, max: 25 }) * 2; // must always be even
-
-		for (let i = 0; i < convLength; i++) {
-			lastId = addChildren(
-				{
-					messages,
-					rootMessageId: messages[0].id,
-				},
-				{
-					from: isUser ? "user" : "assistant",
-					content: faker.lorem.sentence({
-						min: 10,
-						max: isUser ? 50 : 200,
-					}),
-					createdAt: faker.date.recent({ days: 30 }),
-					updatedAt: faker.date.recent({ days: 30 }),
-					interrupted: i === convLength - 1 && isInterrupted,
-				},
-				lastId
-			);
-			isUser = !isUser;
-		}
-	} else {
-		const convLength = faker.number.int({ min: 2, max: 200 });
-
-		for (let i = 0; i < convLength; i++) {
-			addChildren(
-				{
-					messages,
-					rootMessageId: messages[0].id,
-				},
-				{
-					from: isUser ? "user" : "assistant",
-					content: faker.lorem.sentence({
-						min: 10,
-						max: isUser ? 50 : 200,
-					}),
-					createdAt: faker.date.recent({ days: 30 }),
-					updatedAt: faker.date.recent({ days: 30 }),
-					interrupted: i === convLength - 1 && isInterrupted,
-				},
-				faker.helpers.arrayElement([
-					messages[0].id,
-					...messages.filter((m) => m.from === (isUser ? "assistant" : "user")).map((m) => m.id),
-				])
-			);
-
-			isUser = !isUser;
-		}
-	}
-	return messages;
-}
-
-async function seed() {
-	console.log("Seeding...");
-	const modelIds = models.map((model) => model.id);
-
-	if (flags.includes("reset")) {
-		console.log("Starting reset of DB");
-		await collections.users.deleteMany({});
-		await collections.settings.deleteMany({});
-		await collections.assistants.deleteMany({});
-		await collections.conversations.deleteMany({});
-		console.log("Reset done");
-	}
-
-	if (flags.includes("users") || flags.includes("all")) {
-		console.log("Creating 100 new users");
-		const newUsers: User[] = Array.from({ length: 100 }, () => ({
-			_id: new ObjectId(),
-			createdAt: faker.date.recent({ days: 30 }),
-			updatedAt: faker.date.recent({ days: 30 }),
-			username: faker.internet.userName(),
-			name: faker.person.fullName(),
-			hfUserId: faker.string.alphanumeric(24),
-			avatarUrl: faker.image.avatar(),
-		}));
-
-		await collections.users.insertMany(newUsers);
-		console.log("Done creating users.");
-	}
-
-	const users = await collections.users.find().toArray();
-	if (flags.includes("settings") || flags.includes("all")) {
-		console.log("Updating settings for all users");
-		users.forEach(async (user) => {
-			const settings: Settings = {
-				userId: user._id,
-				shareConversationsWithModelAuthors: faker.datatype.boolean(0.25),
-				hideEmojiOnSidebar: faker.datatype.boolean(0.25),
-				ethicsModalAcceptedAt: faker.date.recent({ days: 30 }),
-				activeModel: faker.helpers.arrayElement(modelIds),
-				createdAt: faker.date.recent({ days: 30 }),
-				updatedAt: faker.date.recent({ days: 30 }),
-				customPrompts: {},
-				assistants: [],
-			};
-			await collections.settings.updateOne(
-				{ userId: user._id },
-				{ $set: { ...settings } },
-				{ upsert: true }
-			);
-		});
-		console.log("Done updating settings.");
-	}
-
-	if (flags.includes("assistants") || flags.includes("all")) {
-		console.log("Creating assistants for all users");
-		await Promise.all(
-			users.map(async (user) => {
-				const name = faker.animal.insect();
-				const assistants = faker.helpers.multiple<Assistant>(
-					() => ({
-						_id: new ObjectId(),
-						name,
-						createdById: user._id,
-						createdByName: user.username,
-						createdAt: faker.date.recent({ days: 30 }),
-						updatedAt: faker.date.recent({ days: 30 }),
-						userCount: faker.number.int({ min: 1, max: 100000 }),
-						featured: faker.datatype.boolean(0.25),
-						modelId: faker.helpers.arrayElement(modelIds),
-						description: faker.lorem.sentence(),
-						preprompt: faker.hacker.phrase(),
-						exampleInputs: faker.helpers.multiple(() => faker.lorem.sentence(), {
-							count: faker.number.int({ min: 0, max: 4 }),
-						}),
-						searchTokens: generateSearchTokens(name),
-						last24HoursCount: faker.number.int({ min: 0, max: 1000 }),
-					}),
-					{ count: faker.number.int({ min: 3, max: 10 }) }
-				);
-				await collections.assistants.insertMany(assistants);
-				await collections.settings.updateOne(
-					{ userId: user._id },
-					{ $set: { assistants: assistants.map((a) => a._id.toString()) } },
-					{ upsert: true }
-				);
-			})
-		);
-		console.log("Done creating assistants.");
-	}
-
-	if (flags.includes("conversations") || flags.includes("all")) {
-		console.log("Creating conversations for all users");
-		await Promise.all(
-			users.map(async (user) => {
-				const conversations = faker.helpers.multiple(
-					async () => {
-						const settings = await collections.settings.findOne<Settings>({ userId: user._id });
-
-						const assistantId =
-							settings?.assistants && settings.assistants.length > 0 && faker.datatype.boolean(0.1)
-								? faker.helpers.arrayElement<ObjectId>(settings.assistants)
-								: undefined;
-
-						const preprompt =
-							(assistantId
-								? await collections.assistants
-										.findOne({ _id: assistantId })
-										.then((assistant: Assistant) => assistant?.preprompt ?? "")
-								: faker.helpers.maybe(() => faker.hacker.phrase(), { probability: 0.5 })) ?? "";
-
-						const messages = await generateMessages(preprompt);
-
-						const conv = {
-							_id: new ObjectId(),
-							userId: user._id,
-							assistantId,
-							preprompt,
-							createdAt: faker.date.recent({ days: 145 }),
-							updatedAt: faker.date.recent({ days: 145 }),
-							model: faker.helpers.arrayElement(modelIds),
-							title: faker.internet.emoji() + " " + faker.hacker.phrase(),
-							embeddingModel: defaultEmbeddingModel.id,
-							messages,
-							rootMessageId: messages[0].id,
-						} satisfies Conversation;
-
-						return conv;
-					},
-					{ count: faker.number.int({ min: 10, max: 200 }) }
-				);
-
-				await collections.conversations.insertMany(await Promise.all(conversations));
-			})
-		);
-		console.log("Done creating conversations.");
-	}
-}
-
-// run seed
-(async () => {
-	try {
-		rl.question(
-			"You're about to run a seeding script on the following MONGODB_URL: \x1b[31m" +
-				env.MONGODB_URL +
-				"\x1b[0m\n\n With the following flags: \x1b[31m" +
-				flags.join("\x1b[0m , \x1b[31m") +
-				"\x1b[0m\n \n\n Are you sure you want to continue? (yes/no): ",
-			async (confirm) => {
-				if (confirm !== "yes") {
-					console.log("Not 'yes', exiting.");
-					rl.close();
-					process.exit(0);
-				}
-				console.log("Starting seeding...");
-				await seed();
-				console.log("Seeding done.");
-				rl.close();
-			}
-		);
-	} catch (e) {
-		console.error(e);
-		process.exit(1);
-	}
-})();

scripts/updateProdEnv.ts

@@ -1,15 +1,11 @@
 import fs from "fs";
 
-const HF_DEPLOYMENT_TOKEN = process.env.HF_DEPLOYMENT_TOKEN; // token used for pushing to hub
+const HF_TOKEN = process.env.HF_TOKEN; // token used for pushing to hub
 
 const SERPER_API_KEY = process.env.SERPER_API_KEY;
 const OPENID_CONFIG = process.env.OPENID_CONFIG;
 const MONGODB_URL = process.env.MONGODB_URL;
-const HF_TOKEN = process.env.HF_TOKEN ?? process.env.HF_ACCESS_TOKEN; // token used for API requests in prod
-const WEBHOOK_URL_REPORT_ASSISTANT = process.env.WEBHOOK_URL_REPORT_ASSISTANT; // slack webhook url used to get "report assistant" events
-const ADMIN_API_SECRET = process.env.ADMIN_API_SECRET;
-const USAGE_LIMITS = process.env.USAGE_LIMITS;
-const MESSAGES_BEFORE_LOGIN = process.env.MESSAGES_BEFORE_LOGIN;
+const HF_ACCESS_TOKEN = process.env.HF_ACCESS_TOKEN; // token used for API requests in prod
 
 // Read the content of the file .env.template
 const PUBLIC_CONFIG = fs.readFileSync(".env.template", "utf8");
@@ -19,11 +15,7 @@ const full_config = `${PUBLIC_CONFIG}
 MONGODB_URL=${MONGODB_URL}
 OPENID_CONFIG=${OPENID_CONFIG}
 SERPER_API_KEY=${SERPER_API_KEY}
-HF_TOKEN=${HF_TOKEN}
-WEBHOOK_URL_REPORT_ASSISTANT=${WEBHOOK_URL_REPORT_ASSISTANT}
-ADMIN_API_SECRET=${ADMIN_API_SECRET}
-USAGE_LIMITS=${USAGE_LIMITS}
-MESSAGES_BEFORE_LOGIN=${MESSAGES_BEFORE_LOGIN}
+HF_ACCESS_TOKEN=${HF_ACCESS_TOKEN}
 `;
 
 // Make an HTTP POST request to add the space secrets
@@ -35,7 +27,7 @@ fetch(`https://huggingface.co/api/spaces/huggingchat/chat-ui/secrets`, {
 		description: `Env variable for HuggingChat. Last updated ${new Date().toISOString()}`,
 	}),
 	headers: {
-		Authorization: `Bearer ${HF_DEPLOYMENT_TOKEN}`,
+		Authorization: `Bearer ${HF_TOKEN}`,
 		"Content-Type": "application/json",
 	},
 });

src/ambient.d.ts

@@ -1,4 +0,0 @@
-declare module "*.ttf" {
-	const value: ArrayBuffer;
-	export default value;
-}

src/app.d.ts

@@ -12,11 +12,6 @@ declare global {
 			sessionId: string;
 			user?: User;
 		}
-
-		interface Error {
-			message: string;
-			errorId?: ReturnType<typeof crypto.randomUUID>;
-		}
 		// interface PageData {}
 		// interface Platform {}
 	}

src/hooks.server.ts

@@ -1,73 +1,24 @@
-import { env } from "$env/dynamic/private";
-import { env as envPublic } from "$env/dynamic/public";
-import type { Handle, HandleServerError } from "@sveltejs/kit";
+import { COOKIE_NAME, MESSAGES_BEFORE_LOGIN } from "$env/static/private";
+import type { Handle } from "@sveltejs/kit";
+import {
+	PUBLIC_GOOGLE_ANALYTICS_ID,
+	PUBLIC_ORIGIN,
+	PUBLIC_APP_DISCLAIMER,
+} from "$env/static/public";
 import { collections } from "$lib/server/database";
 import { base } from "$app/paths";
-import { findUser, refreshSessionCookie, requiresUser } from "$lib/server/auth";
+import { refreshSessionCookie, requiresUser } from "$lib/server/auth";
 import { ERROR_MESSAGES } from "$lib/stores/errors";
-import { sha256 } from "$lib/utils/sha256";
-import { addWeeks } from "date-fns";
-import { checkAndRunMigrations } from "$lib/migrations/migrations";
-import { building } from "$app/environment";
-import { refreshAssistantsCounts } from "$lib/assistantStats/refresh-assistants-counts";
-import { logger } from "$lib/server/logger";
-import { AbortedGenerations } from "$lib/server/abortedGenerations";
-import { MetricsServer } from "$lib/server/metrics";
-
-// TODO: move this code on a started server hook, instead of using a "building" flag
-if (!building) {
-	await checkAndRunMigrations();
-	if (env.ENABLE_ASSISTANTS) {
-		refreshAssistantsCounts();
-	}
-
-	// Init metrics server
-	MetricsServer.getInstance();
-
-	// Init AbortedGenerations refresh process
-	AbortedGenerations.getInstance();
-}
-
-export const handleError: HandleServerError = async ({ error, event }) => {
-	// handle 404
-
-	if (building) {
-		throw error;
-	}
-
-	if (event.route.id === null) {
-		return {
-			message: `Page ${event.url.pathname} not found`,
-		};
-	}
 
-	const errorId = crypto.randomUUID();
-
-	logger.error({
-		locals: event.locals,
-		url: event.request.url,
-		params: event.params,
-		request: event.request,
-		error,
-		errorId,
-	});
+export const handle: Handle = async ({ event, resolve }) => {
+	const token = event.cookies.get(COOKIE_NAME);
 
-	return {
-		message: "An error occurred",
-		errorId,
-	};
-};
+	event.locals.sessionId = token || crypto.randomUUID();
 
-export const handle: Handle = async ({ event, resolve }) => {
-	logger.debug({
-		locals: event.locals,
-		url: event.url.pathname,
-		params: event.params,
-		request: event.request,
-	});
+	const user = await collections.users.findOne({ sessionId: event.locals.sessionId });
 
-	if (event.url.pathname.startsWith(`${base}/api/`) && env.EXPOSE_API !== "true") {
-		return new Response("API is disabled", { status: 403 });
+	if (user) {
+		event.locals.user = user;
 	}
 
 	function errorResponse(status: number, message: string) {
@@ -82,44 +33,6 @@ export const handle: Handle = async ({ event, resolve }) => {
 		});
 	}
 
-	if (event.url.pathname.startsWith(`${base}/admin/`) || event.url.pathname === `${base}/admin`) {
-		const ADMIN_SECRET = env.ADMIN_API_SECRET || env.PARQUET_EXPORT_SECRET;
-
-		if (!ADMIN_SECRET) {
-			return errorResponse(500, "Admin API is not configured");
-		}
-
-		if (event.request.headers.get("Authorization") !== `Bearer ${ADMIN_SECRET}`) {
-			return errorResponse(401, "Unauthorized");
-		}
-	}
-
-	const token = event.cookies.get(env.COOKIE_NAME);
-
-	let secretSessionId: string;
-	let sessionId: string;
-
-	if (token) {
-		secretSessionId = token;
-		sessionId = await sha256(token);
-
-		const user = await findUser(sessionId);
-
-		if (user) {
-			event.locals.user = user;
-		}
-	} else {
-		// if the user doesn't have any cookie, we generate one for him
-		secretSessionId = crypto.randomUUID();
-		sessionId = await sha256(secretSessionId);
-
-		if (await collections.sessions.findOne({ sessionId })) {
-			return errorResponse(500, "Session ID collision");
-		}
-	}
-
-	event.locals.sessionId = sessionId;
-
 	// CSRF protection
 	const requestContentType = event.request.headers.get("content-type")?.split(";")[0] ?? "";
 	/** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype */
@@ -128,36 +41,21 @@ export const handle: Handle = async ({ event, resolve }) => {
 		"application/x-www-form-urlencoded",
 		"text/plain",
 	];
+	if (event.request.method === "POST" && nativeFormContentTypes.includes(requestContentType)) {
+		const referer = event.request.headers.get("referer");
 
-	if (event.request.method === "POST") {
-		refreshSessionCookie(event.cookies, event.locals.sessionId);
-
-		if (nativeFormContentTypes.includes(requestContentType)) {
-			const origin = event.request.headers.get("origin");
-
-			if (!origin) {
-				return errorResponse(403, "Non-JSON form requests need to have an origin");
-			}
-
-			const validOrigins = [
-				new URL(event.request.url).host,
-				...(envPublic.PUBLIC_ORIGIN ? [new URL(envPublic.PUBLIC_ORIGIN).host] : []),
-			];
-
-			if (!validOrigins.includes(new URL(origin).host)) {
-				return errorResponse(403, "Invalid referer for POST request");
-			}
+		if (!referer) {
+			return errorResponse(403, "Non-JSON form requests need to have a referer");
 		}
-	}
 
-	if (event.request.method === "POST") {
-		// if the request is a POST request we refresh the cookie
-		refreshSessionCookie(event.cookies, secretSessionId);
+		const validOrigins = [
+			new URL(event.request.url).origin,
+			...(PUBLIC_ORIGIN ? [new URL(PUBLIC_ORIGIN).origin] : []),
+		];
 
-		await collections.sessions.updateOne(
-			{ sessionId },
-			{ $set: { updatedAt: new Date(), expiresAt: addWeeks(new Date(), 2) } }
-		);
+		if (!validOrigins.includes(new URL(referer).origin)) {
+			return errorResponse(403, "Invalid referer for POST request");
+		}
 	}
 
 	if (
@@ -166,9 +64,9 @@ export const handle: Handle = async ({ event, resolve }) => {
 		!["GET", "OPTIONS", "HEAD"].includes(event.request.method)
 	) {
 		if (
-			!event.locals.user &&
+			!user &&
 			requiresUser &&
-			!((env.MESSAGES_BEFORE_LOGIN ? parseInt(env.MESSAGES_BEFORE_LOGIN) : 0) > 0)
+			!((MESSAGES_BEFORE_LOGIN ? parseInt(MESSAGES_BEFORE_LOGIN) : 0) > 0)
 		) {
 			return errorResponse(401, ERROR_MESSAGES.authOnly);
 		}
@@ -179,7 +77,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 		if (
 			!requiresUser &&
 			!event.url.pathname.startsWith(`${base}/settings`) &&
-			!!envPublic.PUBLIC_APP_DISCLAIMER
+			!!PUBLIC_APP_DISCLAIMER
 		) {
 			const hasAcceptedEthicsModal = await collections.settings.countDocuments({
 				sessionId: event.locals.sessionId,
@@ -192,6 +90,8 @@ export const handle: Handle = async ({ event, resolve }) => {
 		}
 	}
 
+	refreshSessionCookie(event.cookies, event.locals.sessionId);
+
 	let replaced = false;
 
 	const response = await resolve(event, {
@@ -202,7 +102,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 			}
 			replaced = true;
 
-			return chunk.html.replace("%gaId%", envPublic.PUBLIC_GOOGLE_ANALYTICS_ID);
+			return chunk.html.replace("%gaId%", PUBLIC_GOOGLE_ANALYTICS_ID);
 		},
 	});
 

src/lib/actions/clickOutside.ts

@@ -1,18 +0,0 @@
-export function clickOutside(element: HTMLDialogElement, callbackFunction: () => void) {
-	function onClick(event: MouseEvent) {
-		if (!element.contains(event.target as Node)) {
-			callbackFunction();
-		}
-	}
-
-	document.body.addEventListener("click", onClick);
-
-	return {
-		update(newCallbackFunction: () => void) {
-			callbackFunction = newCallbackFunction;
-		},
-		destroy() {
-			document.body.removeEventListener("click", onClick);
-		},
-	};
-}

src/lib/assistantStats/refresh-assistants-counts.ts

@@ -1,90 +0,0 @@
-import { Database } from "$lib/server/database";
-import { acquireLock, refreshLock } from "$lib/migrations/lock";
-import type { ObjectId } from "mongodb";
-import { subDays } from "date-fns";
-import { logger } from "$lib/server/logger";
-
-const LOCK_KEY = "assistants.count";
-
-let hasLock = false;
-let lockId: ObjectId | null = null;
-
-async function refreshAssistantsCountsHelper() {
-	if (!hasLock) {
-		return;
-	}
-
-	try {
-		await Database.getInstance()
-			.getClient()
-			.withSession((session) =>
-				session.withTransaction(async () => {
-					await Database.getInstance()
-						.getCollections()
-						.assistants.aggregate([
-							{ $project: { _id: 1 } },
-							{ $set: { last24HoursCount: 0 } },
-							{
-								$unionWith: {
-									coll: "assistants.stats",
-									pipeline: [
-										{
-											$match: { "date.at": { $gte: subDays(new Date(), 1) }, "date.span": "hour" },
-										},
-										{
-											$group: {
-												_id: "$assistantId",
-												last24HoursCount: { $sum: "$count" },
-											},
-										},
-									],
-								},
-							},
-							{
-								$group: {
-									_id: "$_id",
-									last24HoursCount: { $sum: "$last24HoursCount" },
-								},
-							},
-							{
-								$merge: {
-									into: "assistants",
-									on: "_id",
-									whenMatched: "merge",
-									whenNotMatched: "discard",
-								},
-							},
-						])
-						.next();
-				})
-			);
-	} catch (e) {
-		logger.error("Refresh assistants counter failed!");
-		logger.error(e);
-	}
-}
-
-async function maintainLock() {
-	if (hasLock && lockId) {
-		hasLock = await refreshLock(LOCK_KEY, lockId);
-
-		if (!hasLock) {
-			lockId = null;
-		}
-	} else if (!hasLock) {
-		lockId = (await acquireLock(LOCK_KEY)) || null;
-		hasLock = !!lockId;
-	}
-
-	setTimeout(maintainLock, 10_000);
-}
-
-export function refreshAssistantsCounts() {
-	const ONE_HOUR_MS = 3_600_000;
-
-	maintainLock().then(() => {
-		refreshAssistantsCountsHelper();
-
-		setInterval(refreshAssistantsCountsHelper, ONE_HOUR_MS);
-	});
-}

src/lib/buildPrompt.ts

@@ -1,33 +1,92 @@
-import type { EndpointParameters } from "./server/endpoints/endpoints";
 import type { BackendModel } from "./server/models";
+import type { Message } from "./types/Message";
+import { format } from "date-fns";
+import type { WebSearch } from "./types/WebSearch";
+import { downloadFile } from "./server/files/downloadFile";
+import type { Conversation } from "./types/Conversation";
 
-type buildPromptOptions = Pick<EndpointParameters, "messages" | "preprompt" | "continueMessage"> & {
+interface buildPromptOptions {
+	messages: Pick<Message, "from" | "content" | "files">[];
+	id?: Conversation["_id"];
 	model: BackendModel;
-};
+	locals?: App.Locals;
+	webSearch?: WebSearch;
+	preprompt?: string;
+	files?: File[];
+}
 
 export async function buildPrompt({
 	messages,
 	model,
+	webSearch,
 	preprompt,
-	continueMessage,
+	id,
 }: buildPromptOptions): Promise<string> {
-	const filteredMessages = messages.filter((m) => m.from !== "system");
+	if (webSearch && webSearch.context) {
+		const lastMsg = messages.slice(-1)[0];
+		const messagesWithoutLastUsrMsg = messages.slice(0, -1);
+		const previousUserMessages = messages.filter((el) => el.from === "user").slice(0, -1);
+
+		const previousQuestions =
+			previousUserMessages.length > 0
+				? `Previous questions: \n${previousUserMessages
+						.map(({ content }) => `- ${content}`)
+						.join("\n")}`
+				: "";
+		const currentDate = format(new Date(), "MMMM d, yyyy");
+		messages = [
+			...messagesWithoutLastUsrMsg,
+			{
+				from: "user",
+				content: `I searched the web using the query: ${webSearch.searchQuery}. Today is ${currentDate} and here are the results:
+				=====================
+				${webSearch.context}
+				=====================
+				${previousQuestions}
+				Answer the question: ${lastMsg.content} 
+				`,
+			},
+		];
+	}
+
+	// section to handle potential files input
+	if (model.multimodal) {
+		messages = await Promise.all(
+			messages.map(async (el) => {
+				let content = el.content;
 
-	let prompt = model
-		.chatPromptRender({ messages: filteredMessages, preprompt })
-		// Not super precise, but it's truncated in the model's backend anyway
-		.split(" ")
-		.slice(-(model.parameters?.truncate ?? 0))
-		.join(" ");
+				if (el.from === "user") {
+					if (el?.files && el.files.length > 0 && id) {
+						const markdowns = await Promise.all(
+							el.files.map(async (hash) => {
+								try {
+									const { content: image, mime } = await downloadFile(hash, id);
+									const b64 = image.toString("base64");
+									return `![](data:${mime};base64,${b64})})`;
+								} catch (e) {
+									console.error(e);
+								}
+							})
+						);
+						content += markdowns.join("\n ");
+					} else {
+						// if no image, append an empty white image
+						content +=
+							"\n![](data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAQABADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/igAoAKACgD/2Q==)";
+					}
+				}
 
-	if (continueMessage && model.parameters?.stop) {
-		prompt = model.parameters.stop.reduce((acc: string, curr: string) => {
-			if (acc.endsWith(curr)) {
-				return acc.slice(0, acc.length - curr.length);
-			}
-			return acc;
-		}, prompt.trimEnd());
+				return { ...el, content };
+			})
+		);
 	}
 
-	return prompt;
+	return (
+		model
+			.chatPromptRender({ messages, preprompt })
+			// Not super precise, but it's truncated in the model's backend anyway
+			.split(" ")
+			.slice(-(model.parameters?.truncate ?? 0))
+			.join(" ")
+	);
 }

src/lib/components/AnnouncementBanner.svelte

@@ -5,7 +5,7 @@
 
 <div class="flex items-center rounded-xl bg-gray-100 p-1 text-sm dark:bg-gray-800 {classNames}">
 	<span
-		class="from-primary-300 text-primary-700 dark:from-primary-900 dark:text-primary-400 mr-2 inline-flex items-center rounded-lg bg-gradient-to-br px-2 py-1 text-xxs font-medium uppercase leading-3"
+		class="mr-2 inline-flex items-center rounded-lg bg-gradient-to-br from-primary-300 px-2 py-1 text-xxs font-medium uppercase leading-3 text-primary-700 dark:from-primary-900 dark:text-primary-400"
 		>New</span
 	>
 	{title}

src/lib/components/AssistantSettings.svelte

@@ -1,593 +0,0 @@
-<script lang="ts">
-	import type { readAndCompressImage } from "browser-image-resizer";
-	import type { Model } from "$lib/types/Model";
-	import type { Assistant } from "$lib/types/Assistant";
-
-	import { onMount } from "svelte";
-	import { applyAction, enhance } from "$app/forms";
-	import { page } from "$app/stores";
-	import { base } from "$app/paths";
-	import CarbonPen from "~icons/carbon/pen";
-	import CarbonUpload from "~icons/carbon/upload";
-	import CarbonHelpFilled from "~icons/carbon/help";
-	import CarbonSettingsAdjust from "~icons/carbon/settings-adjust";
-
-	import { useSettingsStore } from "$lib/stores/settings";
-	import { isHuggingChat } from "$lib/utils/isHuggingChat";
-	import IconInternet from "./icons/IconInternet.svelte";
-	import TokensCounter from "./TokensCounter.svelte";
-	import HoverTooltip from "./HoverTooltip.svelte";
-	import { findCurrentModel } from "$lib/utils/models";
-
-	type ActionData = {
-		error: boolean;
-		errors: {
-			field: string | number;
-			message: string;
-		}[];
-	} | null;
-
-	type AssistantFront = Omit<Assistant, "_id" | "createdById"> & { _id: string };
-
-	export let form: ActionData;
-	export let assistant: AssistantFront | undefined = undefined;
-	export let models: Model[] = [];
-
-	let files: FileList | null = null;
-	const settings = useSettingsStore();
-	let modelId = "";
-	let systemPrompt = assistant?.preprompt ?? "";
-	let dynamicPrompt = assistant?.dynamicPrompt ?? false;
-	let showModelSettings = Object.values(assistant?.generateSettings ?? {}).some((v) => !!v);
-
-	let compress: typeof readAndCompressImage | null = null;
-
-	onMount(async () => {
-		const module = await import("browser-image-resizer");
-		compress = module.readAndCompressImage;
-
-		modelId = findCurrentModel(models, assistant ? assistant.modelId : $settings.activeModel).id;
-	});
-
-	let inputMessage1 = assistant?.exampleInputs[0] ?? "";
-	let inputMessage2 = assistant?.exampleInputs[1] ?? "";
-	let inputMessage3 = assistant?.exampleInputs[2] ?? "";
-	let inputMessage4 = assistant?.exampleInputs[3] ?? "";
-
-	function resetErrors() {
-		if (form) {
-			form.errors = [];
-			form.error = false;
-		}
-	}
-
-	function onFilesChange(e: Event) {
-		const inputEl = e.target as HTMLInputElement;
-		if (inputEl.files?.length && inputEl.files[0].size > 0) {
-			if (!inputEl.files[0].type.includes("image")) {
-				inputEl.files = null;
-				files = null;
-
-				form = { error: true, errors: [{ field: "avatar", message: "Only images are allowed" }] };
-				return;
-			}
-			files = inputEl.files;
-			resetErrors();
-			deleteExistingAvatar = false;
-		}
-	}
-
-	function getError(field: string, returnForm: ActionData) {
-		return returnForm?.errors.find((error) => error.field === field)?.message ?? "";
-	}
-
-	let deleteExistingAvatar = false;
-
-	let loading = false;
-
-	let ragMode: false | "links" | "domains" | "all" = assistant?.rag?.allowAllDomains
-		? "all"
-		: assistant?.rag?.allowedLinks?.length ?? 0 > 0
-		? "links"
-		: (assistant?.rag?.allowedDomains?.length ?? 0) > 0
-		? "domains"
-		: false;
-
-	const regex = /{{\s?url=(.+?)\s?}}/g;
-	$: templateVariables = [...systemPrompt.matchAll(regex)].map((match) => match[1]);
-	$: selectedModel = models.find((m) => m.id === modelId);
-</script>
-
-<form
-	method="POST"
-	class="relative flex h-full flex-col overflow-y-auto p-4 md:p-8"
-	enctype="multipart/form-data"
-	use:enhance={async ({ formData }) => {
-		loading = true;
-		if (files?.[0] && files[0].size > 0 && compress) {
-			await compress(files[0], {
-				maxWidth: 500,
-				maxHeight: 500,
-				quality: 1,
-			}).then((resizedImage) => {
-				formData.set("avatar", resizedImage);
-			});
-		}
-
-		if (deleteExistingAvatar === true) {
-			if (assistant?.avatar) {
-				// if there is an avatar we explicitly removei t
-				formData.set("avatar", "null");
-			} else {
-				// else we just remove it from the input
-				formData.delete("avatar");
-			}
-		} else {
-			if (files === null) {
-				formData.delete("avatar");
-			}
-		}
-
-		formData.delete("ragMode");
-
-		if (ragMode === false || !$page.data.enableAssistantsRAG) {
-			formData.set("ragAllowAll", "false");
-			formData.set("ragLinkList", "");
-			formData.set("ragDomainList", "");
-		} else if (ragMode === "all") {
-			formData.set("ragAllowAll", "true");
-			formData.set("ragLinkList", "");
-			formData.set("ragDomainList", "");
-		} else if (ragMode === "links") {
-			formData.set("ragAllowAll", "false");
-			formData.set("ragDomainList", "");
-		} else if (ragMode === "domains") {
-			formData.set("ragAllowAll", "false");
-			formData.set("ragLinkList", "");
-		}
-
-		return async ({ result }) => {
-			loading = false;
-			await applyAction(result);
-		};
-	}}
->
-	{#if assistant}
-		<h2 class="text-xl font-semibold">
-			Edit Assistant: {assistant?.name ?? "assistant"}
-		</h2>
-		<p class="mb-6 text-sm text-gray-500">
-			Modifying an existing assistant will propagate the changes to all users.
-		</p>
-	{:else}
-		<h2 class="text-xl font-semibold">Create new assistant</h2>
-		<p class="mb-6 text-sm text-gray-500">
-			Create and share your own AI Assistant. All assistants are <span
-				class="rounded-full border px-2 py-0.5 leading-none">public</span
-			>
-		</p>
-	{/if}
-
-	<div class="grid h-full w-full flex-1 grid-cols-2 gap-6 text-sm max-sm:grid-cols-1">
-		<div class="col-span-1 flex flex-col gap-4">
-			<div>
-				<div class="mb-1 block pb-2 text-sm font-semibold">Avatar</div>
-				<input
-					type="file"
-					accept="image/*"
-					name="avatar"
-					id="avatar"
-					class="hidden"
-					on:change={onFilesChange}
-				/>
-
-				{#if (files && files[0]) || (assistant?.avatar && !deleteExistingAvatar)}
-					<div class="group relative mx-auto h-12 w-12">
-						{#if files && files[0]}
-							<img
-								src={URL.createObjectURL(files[0])}
-								alt="avatar"
-								class="crop mx-auto h-12 w-12 cursor-pointer rounded-full object-cover"
-							/>
-						{:else if assistant?.avatar}
-							<img
-								src="{base}/settings/assistants/{assistant._id}/avatar.jpg?hash={assistant.avatar}"
-								alt="avatar"
-								class="crop mx-auto h-12 w-12 cursor-pointer rounded-full object-cover"
-							/>
-						{/if}
-
-						<label
-							for="avatar"
-							class="invisible absolute bottom-0 h-12 w-12 rounded-full bg-black bg-opacity-50 p-1 group-hover:visible hover:visible"
-						>
-							<CarbonPen class="mx-auto my-auto h-full cursor-pointer text-center text-white" />
-						</label>
-					</div>
-					<div class="mx-auto w-max pt-1">
-						<button
-							type="button"
-							on:click|stopPropagation|preventDefault={() => {
-								files = null;
-								deleteExistingAvatar = true;
-							}}
-							class="mx-auto w-max text-center text-xs text-gray-600 hover:underline"
-						>
-							Delete
-						</button>
-					</div>
-				{:else}
-					<div class="mb-1 flex w-max flex-row gap-4">
-						<label
-							for="avatar"
-							class="btn flex h-8 rounded-lg border bg-white px-3 py-1 text-gray-500 shadow-sm transition-all hover:bg-gray-100"
-						>
-							<CarbonUpload class="mr-2 text-xs " /> Upload
-						</label>
-					</div>
-				{/if}
-				<p class="text-xs text-red-500">{getError("avatar", form)}</p>
-			</div>
-
-			<label>
-				<div class="mb-1 font-semibold">Name</div>
-				<input
-					name="name"
-					class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
-					placeholder="Assistant Name"
-					value={assistant?.name ?? ""}
-				/>
-				<p class="text-xs text-red-500">{getError("name", form)}</p>
-			</label>
-
-			<label>
-				<div class="mb-1 font-semibold">Description</div>
-				<textarea
-					name="description"
-					class="h-15 w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
-					placeholder="He knows everything about python"
-					value={assistant?.description ?? ""}
-				/>
-				<p class="text-xs text-red-500">{getError("description", form)}</p>
-			</label>
-
-			<label>
-				<div class="mb-1 font-semibold">Model</div>
-				<div class="flex gap-2">
-					<select
-						name="modelId"
-						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
-						bind:value={modelId}
-					>
-						{#each models.filter((model) => !model.unlisted) as model}
-							<option value={model.id}>{model.displayName}</option>
-						{/each}
-						<p class="text-xs text-red-500">{getError("modelId", form)}</p>
-					</select>
-					<button
-						type="button"
-						class="flex aspect-square items-center gap-2 whitespace-nowrap rounded-lg border px-3 {showModelSettings
-							? 'border-blue-500/20 bg-blue-50 text-blue-600'
-							: ''}"
-						on:click={() => (showModelSettings = !showModelSettings)}
-						><CarbonSettingsAdjust class="text-xs" /></button
-					>
-				</div>
-				<div
-					class="mt-2 rounded-lg border border-blue-500/20 bg-blue-500/5 px-2 py-0.5"
-					class:hidden={!showModelSettings}
-				>
-					<p class="text-xs text-red-500">{getError("inputMessage1", form)}</p>
-					<div class="my-2 grid grid-cols-1 gap-2.5 sm:grid-cols-2 sm:grid-rows-2">
-						<label for="temperature" class="flex justify-between">
-							<span class="m-1 ml-0 flex items-center gap-1.5 whitespace-nowrap text-sm">
-								Temperature
-
-								<HoverTooltip
-									label="Temperature: Controls creativity, higher values allow more variety."
-								>
-									<CarbonHelpFilled
-										class="inline text-xxs text-gray-500 group-hover/tooltip:text-blue-600"
-									/>
-								</HoverTooltip>
-							</span>
-							<input
-								type="number"
-								name="temperature"
-								min="0.1"
-								max="2"
-								step="0.1"
-								class="w-20 rounded-lg border-2 border-gray-200 bg-gray-100 px-2 py-1"
-								placeholder={selectedModel?.parameters?.temperature?.toString() ?? "1"}
-								value={assistant?.generateSettings?.temperature ?? ""}
-							/>
-						</label>
-						<label for="top_p" class="flex justify-between">
-							<span class="m-1 ml-0 flex items-center gap-1.5 whitespace-nowrap text-sm">
-								Top P
-								<HoverTooltip
-									label="Top P: Sets word choice boundaries, lower values tighten focus."
-								>
-									<CarbonHelpFilled
-										class="inline text-xxs text-gray-500 group-hover/tooltip:text-blue-600"
-									/>
-								</HoverTooltip>
-							</span>
-
-							<input
-								type="number"
-								name="top_p"
-								class="w-20 rounded-lg border-2 border-gray-200 bg-gray-100 px-2 py-1"
-								min="0.05"
-								max="1"
-								step="0.05"
-								placeholder={selectedModel?.parameters?.top_p?.toString() ?? "1"}
-								value={assistant?.generateSettings?.top_p ?? ""}
-							/>
-						</label>
-						<label for="repetition_penalty" class="flex justify-between">
-							<span class="m-1 ml-0 flex items-center gap-1.5 whitespace-nowrap text-sm">
-								Repetition penalty
-								<HoverTooltip
-									label="Repetition penalty: Prevents reuse, higher values decrease repetition."
-								>
-									<CarbonHelpFilled
-										class="inline text-xxs text-gray-500 group-hover/tooltip:text-blue-600"
-									/>
-								</HoverTooltip>
-							</span>
-							<input
-								type="number"
-								name="repetition_penalty"
-								min="0.1"
-								max="2"
-								class="w-20 rounded-lg border-2 border-gray-200 bg-gray-100 px-2 py-1"
-								placeholder={selectedModel?.parameters?.repetition_penalty?.toString() ?? "1.0"}
-								value={assistant?.generateSettings?.repetition_penalty ?? ""}
-							/>
-						</label>
-						<label for="top_k" class="flex justify-between">
-							<span class="m-1 ml-0 flex items-center gap-1.5 whitespace-nowrap text-sm">
-								Top K <HoverTooltip
-									label="Top K: Restricts word options, lower values for predictability."
-								>
-									<CarbonHelpFilled
-										class="inline text-xxs text-gray-500 group-hover/tooltip:text-blue-600"
-									/>
-								</HoverTooltip>
-							</span>
-							<input
-								type="number"
-								name="top_k"
-								min="5"
-								max="100"
-								step="5"
-								class="w-20 rounded-lg border-2 border-gray-200 bg-gray-100 px-2 py-1"
-								placeholder={selectedModel?.parameters?.top_k?.toString() ?? "50"}
-								value={assistant?.generateSettings?.top_k ?? ""}
-							/>
-						</label>
-					</div>
-				</div>
-			</label>
-
-			<label>
-				<div class="mb-1 font-semibold">User start messages</div>
-				<div class="grid gap-1.5 text-sm md:grid-cols-2">
-					<input
-						name="exampleInput1"
-						placeholder="Start Message 1"
-						bind:value={inputMessage1}
-						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
-					/>
-					<input
-						name="exampleInput2"
-						placeholder="Start Message 2"
-						bind:value={inputMessage2}
-						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
-					/>
-
-					<input
-						name="exampleInput3"
-						placeholder="Start Message 3"
-						bind:value={inputMessage3}
-						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
-					/>
-					<input
-						name="exampleInput4"
-						placeholder="Start Message 4"
-						bind:value={inputMessage4}
-						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
-					/>
-				</div>
-				<p class="text-xs text-red-500">{getError("inputMessage1", form)}</p>
-			</label>
-			{#if $page.data.enableAssistantsRAG}
-				<div class="mb-4 flex flex-col flex-nowrap">
-					<span class="mt-2 text-smd font-semibold"
-						>Internet access
-						<IconInternet classNames="inline text-sm text-blue-600" />
-
-						<span class="ml-1 rounded bg-gray-100 px-1 py-0.5 text-xxs font-normal text-gray-600"
-							>Experimental</span
-						>
-
-						{#if isHuggingChat}
-							<a
-								href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions/385"
-								target="_blank"
-								class="ml-0.5 rounded bg-gray-100 px-1 py-0.5 text-xxs font-normal text-gray-700 underline decoration-gray-400"
-								>Give feedback</a
-							>
-						{/if}
-					</span>
-
-					<label class="mt-1">
-						<input
-							checked={!ragMode}
-							on:change={() => (ragMode = false)}
-							type="radio"
-							name="ragMode"
-							value={false}
-						/>
-						<span class="my-2 text-sm" class:font-semibold={!ragMode}> Default </span>
-						{#if !ragMode}
-							<span class="block text-xs text-gray-500">
-								Assistant will not use internet to do information retrieval and will respond faster.
-								Recommended for most Assistants.
-							</span>
-						{/if}
-					</label>
-
-					<label class="mt-1">
-						<input
-							checked={ragMode === "all"}
-							on:change={() => (ragMode = "all")}
-							type="radio"
-							name="ragMode"
-							value={"all"}
-						/>
-						<span class="my-2 text-sm" class:font-semibold={ragMode === "all"}> Web search </span>
-						{#if ragMode === "all"}
-							<span class="block text-xs text-gray-500">
-								Assistant will do a web search on each user request to find information.
-							</span>
-						{/if}
-					</label>
-
-					<label class="mt-1">
-						<input
-							checked={ragMode === "domains"}
-							on:change={() => (ragMode = "domains")}
-							type="radio"
-							name="ragMode"
-							value={false}
-						/>
-						<span class="my-2 text-sm" class:font-semibold={ragMode === "domains"}>
-							Domains search
-						</span>
-					</label>
-					{#if ragMode === "domains"}
-						<span class="mb-2 text-xs text-gray-500">
-							Specify domains and URLs that the application can search, separated by commas.
-						</span>
-
-						<input
-							name="ragDomainList"
-							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
-							placeholder="wikipedia.org,bbc.com"
-							value={assistant?.rag?.allowedDomains?.join(",") ?? ""}
-						/>
-						<p class="text-xs text-red-500">{getError("ragDomainList", form)}</p>
-					{/if}
-
-					<label class="mt-1">
-						<input
-							checked={ragMode === "links"}
-							on:change={() => (ragMode = "links")}
-							type="radio"
-							name="ragMode"
-							value={false}
-						/>
-						<span class="my-2 text-sm" class:font-semibold={ragMode === "links"}>
-							Specific Links
-						</span>
-					</label>
-					{#if ragMode === "links"}
-						<span class="mb-2 text-xs text-gray-500">
-							Specify a maximum of 10 direct URLs that the Assistant will access. HTML & Plain Text
-							only, separated by commas
-						</span>
-						<input
-							name="ragLinkList"
-							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
-							placeholder="https://raw.githubusercontent.com/huggingface/chat-ui/main/README.md"
-							value={assistant?.rag?.allowedLinks.join(",") ?? ""}
-						/>
-						<p class="text-xs text-red-500">{getError("ragLinkList", form)}</p>
-					{/if}
-
-					<!-- divider -->
-					<div class="my-3 ml-0 mr-6 w-full border border-gray-200" />
-
-					<label class="text-sm has-[:checked]:font-semibold">
-						<input type="checkbox" name="dynamicPrompt" bind:checked={dynamicPrompt} />
-						Dynamic Prompt
-						<p class="mb-2 text-xs font-normal text-gray-500">
-							Allow the use of template variables {"{{url=https://example.com/path}}"}
-							to insert dynamic content into your prompt by making GET requests to specified URLs on
-							each inference.
-						</p>
-					</label>
-				</div>
-			{/if}
-		</div>
-
-		<div class="relative col-span-1 flex h-full flex-col">
-			<div class="mb-1 flex justify-between text-sm">
-				<span class="font-semibold"> Instructions (System Prompt) </span>
-				{#if dynamicPrompt && templateVariables.length}
-					<div class="relative">
-						<button
-							type="button"
-							class="peer rounded bg-blue-500/20 px-1 text-xs text-blue-600 focus:bg-blue-500/30 focus:text-blue-800 sm:text-sm"
-						>
-							{templateVariables.length} template variable{templateVariables.length > 1 ? "s" : ""}
-						</button>
-						<div
-							class="invisible absolute right-0 top-6 z-10 rounded-lg border bg-white p-2 text-xs shadow-lg peer-focus:visible hover:visible sm:w-96"
-						>
-							Will performs a GET request and injects the response into the prompt. Works better
-							with plain text, csv or json content.
-							{#each templateVariables as match}
-								<a href={match} target="_blank" class="text-gray-500 underline decoration-gray-300"
-									>{match}</a
-								>
-							{/each}
-						</div>
-					</div>
-				{/if}
-			</div>
-			<div class="relative mb-20 flex h-full flex-col gap-2">
-				<textarea
-					name="preprompt"
-					class="min-h-[8lh] flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm"
-					placeholder="You'll act as..."
-					bind:value={systemPrompt}
-				/>
-				{#if modelId}
-					{@const model = models.find((_model) => _model.id === modelId)}
-					{#if model?.tokenizer && systemPrompt}
-						<TokensCounter
-							classNames="absolute bottom-4 right-4"
-							prompt={systemPrompt}
-							modelTokenizer={model.tokenizer}
-							truncate={model?.parameters?.truncate}
-						/>
-					{/if}
-				{/if}
-
-				<p class="text-xs text-red-500">{getError("preprompt", form)}</p>
-			</div>
-			<div class="absolute bottom-6 flex w-full justify-end gap-2 md:right-0 md:w-fit">
-				<a
-					href={assistant ? `${base}/settings/assistants/${assistant?._id}` : `${base}/settings`}
-					class="flex items-center justify-center rounded-full bg-gray-200 px-5 py-2 font-semibold text-gray-600"
-				>
-					Cancel
-				</a>
-				<button
-					type="submit"
-					disabled={loading}
-					aria-disabled={loading}
-					class="flex items-center justify-center rounded-full bg-black px-8 py-2 font-semibold"
-					class:bg-gray-200={loading}
-					class:text-gray-600={loading}
-					class:text-white={!loading}
-				>
-					{assistant ? "Save" : "Create"}
-				</button>
-			</div>
-		</div>
-	</div>
-</form>

src/lib/components/ContinueBtn.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-	import CarbonContinue from "~icons/carbon/continue";
-
-	export let classNames = "";
-</script>
-
-<button
-	type="button"
-	on:click
-	class="btn flex h-8 rounded-lg border bg-white px-3 py-1 text-gray-500 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 {classNames}"
->
-	<CarbonContinue class="mr-2 text-xs " /> Continue
-</button>

src/lib/components/CopyToClipBoardBtn.svelte

@@ -35,17 +35,17 @@
 </script>
 
 <button
-	class="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-700 dark:hover:border-gray-500 {classNames}"
+	class="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-600 dark:hover:border-gray-400 {classNames}
+		{!isSuccess && 'text-gray-200 dark:text-gray-200'}
+		{isSuccess && 'text-green-500'}
+	"
 	title={"Copy to clipboard"}
 	type="button"
 	on:click
 	on:click={handleClick}
 >
-	<div class="relative">
-		<slot>
-			<IconCopy classNames="dark:text-gray-700 text-gray-200" />
-		</slot>
-
+	<span class="relative">
+		<IconCopy />
 		<Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />
-	</div>
+	</span>
 </button>

src/lib/components/DisclaimerModal.svelte

@@ -1,54 +1,59 @@
 <script lang="ts">
 	import { base } from "$app/paths";
 	import { page } from "$app/stores";
-	import { env as envPublic } from "$env/dynamic/public";
+	import { PUBLIC_APP_DESCRIPTION, PUBLIC_APP_NAME } from "$env/static/public";
 	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
 	import Modal from "$lib/components/Modal.svelte";
-	import { useSettingsStore } from "$lib/stores/settings";
-	import { cookiesAreEnabled } from "$lib/utils/cookiesAreEnabled";
+	import type { LayoutData } from "../../routes/$types";
 	import Logo from "./icons/Logo.svelte";
 
-	const settings = useSettingsStore();
+	export let settings: LayoutData["settings"];
 </script>
 
 <Modal>
 	<div
-		class="from-primary-500/40 via-primary-500/10 to-primary-500/0 flex w-full flex-col items-center gap-6 bg-gradient-to-b px-5 pb-8 pt-9 text-center sm:px-6"
+		class="flex w-full flex-col items-center gap-6 bg-gradient-to-b from-primary-500/40 via-primary-500/10 to-primary-500/0 px-5 pb-8 pt-9 text-center sm:px-6"
 	>
 		<h2 class="flex items-center text-2xl font-semibold text-gray-800">
 			<Logo classNames="mr-1" />
-			{envPublic.PUBLIC_APP_NAME}
+			{PUBLIC_APP_NAME}
 		</h2>
 
 		<p class="text-lg font-semibold leading-snug text-gray-800" style="text-wrap: balance;">
-			{envPublic.PUBLIC_APP_DESCRIPTION}
+			{PUBLIC_APP_DESCRIPTION}
 		</p>
 
 		<p class="text-sm text-gray-500">
-			{envPublic.PUBLIC_APP_DISCLAIMER_MESSAGE}
+			Disclaimer: AI is an area of active research with known problems such as biased generation and
+			misinformation. Do not use this application for high-stakes decisions or advice.
 		</p>
 
 		<div class="flex w-full flex-col items-center gap-2">
 			{#if $page.data.guestMode || !$page.data.loginEnabled}
-				<button
-					class="w-full justify-center rounded-full border-2 border-gray-300 bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
-					class:bg-white={$page.data.loginEnabled}
-					class:text-gray-800={$page.data.loginEnabled}
-					class:hover:bg-slate-100={$page.data.loginEnabled}
-					on:click|preventDefault|stopPropagation={() => {
-						if (!cookiesAreEnabled()) {
-							window.open(window.location.href, "_blank");
-						}
-
-						$settings.ethicsModalAccepted = true;
-					}}
-				>
-					{#if $page.data.loginEnabled}
-						Try as guest
-					{:else}
-						Start chatting
-					{/if}
-				</button>
+				<form action="{base}/settings" method="POST" class="w-full">
+					<input type="hidden" name="ethicsModalAccepted" value={true} />
+					{#each Object.entries(settings).filter(([k]) => !(k === "customPrompts")) as [key, val]}
+						<input type="hidden" name={key} value={val} />
+					{/each}
+					<input
+						type="hidden"
+						name="customPrompts"
+						value={JSON.stringify(settings.customPrompts)}
+					/>
+					<button
+						type="submit"
+						class="w-full justify-center rounded-full border-2 border-gray-300 bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
+						class:bg-white={$page.data.loginEnabled}
+						class:text-gray-800={$page.data.loginEnabled}
+						class:hover:bg-slate-100={$page.data.loginEnabled}
+					>
+						{#if $page.data.loginEnabled}
+							Try as guest
+						{:else}
+							Start chatting
+						{/if}
+					</button>
+				</form>
 			{/if}
 			{#if $page.data.loginEnabled}
 				<form action="{base}/login" target="_parent" method="POST" class="w-full">
@@ -57,7 +62,7 @@
 						class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
 					>
 						Sign in
-						{#if envPublic.PUBLIC_APP_NAME === "HuggingChat"}
+						{#if PUBLIC_APP_NAME === "HuggingChat"}
 							with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5 flex-none" /> Hugging Face
 						{/if}
 					</button>

src/lib/components/ExpandNavigation.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-	export let isCollapsed: boolean;
-	export let classNames: string;
-</script>
-
-<button
-	on:click
-	class="{classNames} group flex h-16 w-6 flex-col items-center justify-center -space-y-1 outline-none *:h-3 *:w-1 *:rounded-full *:hover:bg-gray-300 max-md:hidden dark:*:hover:bg-gray-600 {!isCollapsed
-		? '*:bg-gray-200/70 dark:*:bg-gray-800'
-		: '*:bg-gray-200 dark:*:bg-gray-700'}"
->
-	<div class={!isCollapsed ? "group-hover:rotate-[20deg]" : "group-hover:-rotate-[20deg]"} />
-	<div class={!isCollapsed ? "group-hover:-rotate-[20deg]" : "group-hover:rotate-[20deg]"} />
-</button>

src/lib/components/HoverTooltip.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	export let label = "";
-</script>
-
-<div class="group/tooltip md:relative">
-	<slot />
-	<div
-		class="invisible absolute z-10 w-64 whitespace-normal rounded-md bg-black p-2 text-center text-white group-hover/tooltip:visible group-active/tooltip:visible max-sm:left-1/2 max-sm:-translate-x-1/2"
-	>
-		{label}
-	</div>
-</div>

src/lib/components/LoginModal.svelte

@@ -1,31 +1,28 @@
 <script lang="ts">
 	import { base } from "$app/paths";
 	import { page } from "$app/stores";
-	import { env as envPublic } from "$env/dynamic/public";
+	import { PUBLIC_APP_DESCRIPTION, PUBLIC_APP_NAME } from "$env/static/public";
 	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
 	import Modal from "$lib/components/Modal.svelte";
-	import { useSettingsStore } from "$lib/stores/settings";
-	import { cookiesAreEnabled } from "$lib/utils/cookiesAreEnabled";
+	import type { LayoutData } from "../../routes/$types";
 	import Logo from "./icons/Logo.svelte";
-
-	const settings = useSettingsStore();
+	export let settings: LayoutData["settings"];
 </script>
 
 <Modal on:close>
 	<div
-		class="from-primary-500/40 via-primary-500/10 to-primary-500/0 flex w-full flex-col items-center gap-6 bg-gradient-to-b px-5 pb-8 pt-9 text-center"
+		class="flex w-full flex-col items-center gap-6 bg-gradient-to-b from-primary-500/40 via-primary-500/10 to-primary-500/0 px-5 pb-8 pt-9 text-center"
 	>
 		<h2 class="flex items-center text-2xl font-semibold text-gray-800">
 			<Logo classNames="mr-1" />
-			{envPublic.PUBLIC_APP_NAME}
+			{PUBLIC_APP_NAME}
 		</h2>
-		<p class="text-balance text-lg font-semibold leading-snug text-gray-800">
-			{envPublic.PUBLIC_APP_DESCRIPTION}
+		<p class="text-lg font-semibold leading-snug text-gray-800" style="text-wrap: balance;">
+			{PUBLIC_APP_DESCRIPTION}
 		</p>
-		<p class="text-balance rounded-xl border bg-white/80 p-2 text-base text-gray-800">
-			You have reached the guest message limit, <strong class="font-semibold"
-				>Sign In with a free Hugging Face account</strong
-			> to continue using HuggingChat.
+		<p class="rounded-xl border bg-white/80 p-2 text-base text-gray-800">
+			You have reached the guest message limit, please Sign In with your Hugging Face account to
+			continue.
 		</p>
 
 		<form
@@ -40,20 +37,18 @@
 					class="flex w-full items-center justify-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-center text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
 				>
 					Sign in
-					{#if envPublic.PUBLIC_APP_NAME === "HuggingChat"}
+					{#if PUBLIC_APP_NAME === "HuggingChat"}
 						with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5" /> Hugging Face
 					{/if}
 				</button>
 			{:else}
+				<input type="hidden" name="ethicsModalAccepted" value={true} />
+				{#each Object.entries(settings) as [key, val]}
+					<input type="hidden" name={key} value={val} />
+				{/each}
 				<button
+					type="submit"
 					class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
-					on:click={(e) => {
-						if (!cookiesAreEnabled()) {
-							e.preventDefault();
-							window.open(window.location.href, "_blank");
-						}
-						$settings.ethicsModalAccepted = true;
-					}}
 				>
 					Start chatting
 				</button>

src/lib/components/MobileNav.svelte

@@ -3,16 +3,15 @@
 	import { createEventDispatcher } from "svelte";
 	import { browser } from "$app/environment";
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
 
 	import CarbonClose from "~icons/carbon/close";
+	import CarbonAdd from "~icons/carbon/add";
 	import CarbonTextAlignJustify from "~icons/carbon/text-align-justify";
-	import IconNew from "$lib/components/icons/IconNew.svelte";
 
 	export let isOpen = false;
 	export let title: string | undefined;
 
-	$: title = title ?? "New Chat";
+	$: title = title || "New Chat";
 
 	let closeEl: HTMLButtonElement;
 	let openEl: HTMLButtonElement;
@@ -31,31 +30,29 @@
 </script>
 
 <nav
-	class="flex h-12 items-center justify-between border-b bg-gray-50 px-3 md:hidden dark:border-gray-800 dark:bg-gray-800/70"
+	class="flex h-12 items-center justify-between border-b bg-gray-50 px-4 dark:border-gray-800 dark:bg-gray-800/70 md:hidden"
 >
 	<button
 		type="button"
-		class="-ml-3 flex size-12 shrink-0 items-center justify-center text-lg"
+		class="-ml-3 flex h-9 w-9 shrink-0 items-center justify-center"
 		on:click={() => dispatch("toggle", true)}
 		aria-label="Open menu"
 		bind:this={openEl}><CarbonTextAlignJustify /></button
 	>
 	<span class="truncate px-4">{title}</span>
-	<a
-		class:invisible={!$page.params.id}
-		href="{base}/"
-		class="-mr-3 flex size-12 shrink-0 items-center justify-center text-lg"><IconNew /></a
+	<a href={`${base}/`} class="-mr-3 flex h-9 w-9 shrink-0 items-center justify-center"
+		><CarbonAdd /></a
 	>
 </nav>
 <nav
-	class="fixed inset-0 z-30 grid max-h-screen grid-cols-1 grid-rows-[auto,auto,1fr,auto] bg-white dark:bg-gray-900 {isOpen
+	class="fixed inset-0 z-30 grid max-h-screen grid-cols-1 grid-rows-[auto,auto,1fr,auto] bg-white bg-gradient-to-l from-gray-50 dark:bg-gray-900 dark:from-gray-800/30 max-sm:rounded-t-2xl {isOpen
 		? 'block'
 		: 'hidden'}"
 >
 	<div class="flex h-12 items-center px-4">
 		<button
 			type="button"
-			class="-mr-3 ml-auto flex size-12 items-center justify-center text-lg"
+			class="-mr-3 ml-auto flex h-9 w-9 items-center justify-center"
 			on:click={() => dispatch("toggle", false)}
 			aria-label="Close menu"
 			bind:this={closeEl}><CarbonClose /></button

src/lib/components/Modal.svelte

@@ -21,9 +21,6 @@
 	}
 
 	function handleBackdropClick(event: MouseEvent) {
-		if (window?.getSelection()?.toString()) {
-			return;
-		}
 		if (event.target === backdropEl) {
 			dispatch("close");
 		}
@@ -49,7 +46,7 @@
 		role="presentation"
 		tabindex="-1"
 		bind:this={backdropEl}
-		on:click|stopPropagation={handleBackdropClick}
+		on:click={handleBackdropClick}
 		transition:fade|global={{ easing: cubicOut, duration: 300 }}
 		class="fixed inset-0 z-40 flex items-center justify-center bg-black/80 p-8 backdrop-blur-sm dark:bg-black/50"
 	>

src/lib/components/ModelCardMetadata.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import CarbonEarth from "~icons/carbon/earth";
 	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
-	import BIMeta from "~icons/bi/meta";
 	import type { Model } from "$lib/types/Model";
 
 	export let model: Pick<Model, "name" | "datasetName" | "websiteUrl" | "modelUrl" | "datasetUrl">;
@@ -42,13 +41,8 @@
 			class="ml-auto flex items-center hover:underline"
 			rel="noreferrer"
 		>
-			{#if model.name === "meta-llama/Meta-Llama-3-70B-Instruct"}
-				<BIMeta class="mr-1.5 shrink-0 text-xs text-gray-400" />
-				Built with Meta Llama 3
-			{:else}
-				<CarbonEarth class="mr-1.5 shrink-0 text-xs text-gray-400" />
-				Website
-			{/if}
+			<CarbonEarth class="mr-1.5 shrink-0 text-xs text-gray-400" />
+			Website
 		</a>
 	{/if}
 </div>

src/lib/components/ModelsModal.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+
+	import Modal from "$lib/components/Modal.svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonCheckmark from "~icons/carbon/checkmark-filled";
+	import ModelCardMetadata from "./ModelCardMetadata.svelte";
+	import type { Model } from "$lib/types/Model";
+	import type { LayoutData } from "../../routes/$types";
+	import { enhance } from "$app/forms";
+	import { base } from "$app/paths";
+
+	import CarbonEdit from "~icons/carbon/edit";
+	import CarbonSave from "~icons/carbon/save";
+	import CarbonRestart from "~icons/carbon/restart";
+
+	export let settings: LayoutData["settings"];
+	export let models: Array<Model>;
+
+	let selectedModelId = settings.activeModel;
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+
+	let expanded = false;
+
+	function onToggle() {
+		if (expanded) {
+			settings.customPrompts[selectedModelId] = value;
+		}
+		expanded = !expanded;
+	}
+
+	let value = "";
+
+	function onModelChange() {
+		value =
+			settings.customPrompts[selectedModelId] ??
+			models.filter((el) => el.id === selectedModelId)[0].preprompt ??
+			"";
+	}
+
+	$: selectedModelId, onModelChange();
+</script>
+
+<Modal width="max-w-lg" on:close>
+	<form
+		action="{base}/settings"
+		method="post"
+		on:submit={() => {
+			if (expanded) {
+				onToggle();
+			}
+		}}
+		use:enhance={() => {
+			dispatch("close");
+		}}
+		class="flex w-full flex-col gap-5 p-6"
+	>
+		{#each Object.entries(settings).filter(([k]) => !(k == "activeModel" || k === "customPrompts")) as [key, val]}
+			<input type="hidden" name={key} value={val} />
+		{/each}
+		<input type="hidden" name="customPrompts" value={JSON.stringify(settings.customPrompts)} />
+		<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
+			<h2>Models</h2>
+			<button type="button" class="group" on:click={() => dispatch("close")}>
+				<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
+			</button>
+		</div>
+
+		<div class="space-y-4">
+			{#each models as model}
+				{@const active = model.id === selectedModelId}
+				<div
+					class="relative rounded-xl border border-gray-100 {active
+						? 'bg-gradient-to-r from-primary-200/40 via-primary-500/10'
+						: ''}"
+				>
+					<label
+						class="group flex cursor-pointer flex-col p-3"
+						on:change
+						aria-label={model.displayName}
+					>
+						<input
+							type="radio"
+							class="sr-only"
+							name="activeModel"
+							value={model.id}
+							bind:group={selectedModelId}
+						/>
+						<div
+							class="mb-1.5 block pr-8 text-sm font-semibold leading-tight text-gray-800 sm:text-base"
+						>
+							{model.displayName}
+						</div>
+						{#if model.description}
+							<div class="text-xs text-gray-500 sm:text-sm">{model.description}</div>
+						{/if}
+						<CarbonCheckmark
+							class="absolute right-2 top-2 text-xl {active
+								? 'text-primary-400'
+								: 'text-transparent group-hover:text-gray-200'}"
+						/>
+					</label>
+					{#if active}
+						<div class=" overflow-hidden rounded-xl px-3 pb-2">
+							<div class="flex flex-row flex-nowrap gap-2 pb-1">
+								<div class="text-xs font-semibold text-gray-500">System Prompt</div>
+								{#if expanded}
+									<button
+										class="text-gray-500 hover:text-gray-900"
+										on:click|preventDefault={onToggle}
+									>
+										<CarbonSave class="text-sm" />
+									</button>
+									<button
+										class="text-gray-500 hover:text-gray-900"
+										on:click|preventDefault={() => {
+											value = model.preprompt ?? "";
+										}}
+									>
+										<CarbonRestart class="text-sm" />
+									</button>
+								{:else}
+									<button
+										class=" text-gray-500 hover:text-gray-900"
+										on:click|preventDefault={onToggle}
+									>
+										<CarbonEdit class="text-sm" />
+									</button>
+								{/if}
+							</div>
+							<textarea
+								enterkeyhint="send"
+								tabindex="0"
+								rows="1"
+								class="h-20 w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll rounded-md border border-gray-300 bg-transparent p-1 text-xs outline-none focus:ring-0 focus-visible:ring-0"
+								bind:value
+								hidden={!expanded}
+							/>
+						</div>
+					{/if}
+					<ModelCardMetadata {model} />
+				</div>
+			{/each}
+		</div>
+		<button
+			type="submit"
+			class="sticky bottom-6 mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-colors hover:ring"
+		>
+			Apply
+		</button>
+	</form>
+</Modal>

src/lib/components/NavConversationItem.svelte

@@ -7,9 +7,8 @@
 	import CarbonTrashCan from "~icons/carbon/trash-can";
 	import CarbonClose from "~icons/carbon/close";
 	import CarbonEdit from "~icons/carbon/edit";
-	import type { ConvSidebar } from "$lib/types/ConvSidebar";
 
-	export let conv: ConvSidebar;
+	export let conv: { id: string; title: string };
 
 	let confirmDelete = false;
 
@@ -25,30 +24,16 @@
 		confirmDelete = false;
 	}}
 	href="{base}/conversation/{conv.id}"
-	class="group flex h-10 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 {conv.id ===
+	class="group flex h-11 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 {conv.id ===
 	$page.params.id
 		? 'bg-gray-100 dark:bg-gray-700'
 		: ''}"
 >
-	<div class="flex flex-1 items-center truncate">
+	<div class="flex-1 truncate">
 		{#if confirmDelete}
-			<span class="mr-1 font-semibold"> Delete </span>
-		{/if}
-		{#if conv.avatarHash}
-			<img
-				src="{base}/settings/assistants/{conv.assistantId}/avatar.jpg?hash={conv.avatarHash}"
-				alt="Assistant avatar"
-				class="mr-1.5 inline size-4 flex-none rounded-full object-cover"
-			/>
-			{conv.title.replace(/\p{Emoji}/gu, "")}
-		{:else if conv.assistantId}
-			<div
-				class="mr-1.5 flex size-4 flex-none items-center justify-center rounded-full bg-gray-300 text-xs font-bold uppercase text-gray-500"
-			/>
-			{conv.title.replace(/\p{Emoji}/gu, "")}
-		{:else}
-			{conv.title}
+			<span class="font-semibold"> Delete </span>
 		{/if}
+		{conv.title}
 	</div>
 
 	{#if confirmDelete}
@@ -56,10 +41,7 @@
 			type="button"
 			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
 			title="Confirm delete action"
-			on:click|preventDefault={() => {
-				confirmDelete = false;
-				dispatch("deleteConversation", conv.id);
-			}}
+			on:click|preventDefault={() => dispatch("deleteConversation", conv.id)}
 		>
 			<CarbonCheckmark class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
 		</button>
@@ -67,7 +49,9 @@
 			type="button"
 			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
 			title="Cancel delete action"
-			on:click|preventDefault={() => (confirmDelete = false)}
+			on:click|preventDefault={() => {
+				confirmDelete = false;
+			}}
 		>
 			<CarbonClose class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
 		</button>

src/lib/components/NavMenu.svelte

@@ -1,58 +1,37 @@
 <script lang="ts">
 	import { base } from "$app/paths";
+	import { createEventDispatcher } from "svelte";
 
 	import Logo from "$lib/components/icons/Logo.svelte";
 	import { switchTheme } from "$lib/switchTheme";
 	import { isAborted } from "$lib/stores/isAborted";
-	import { env as envPublic } from "$env/dynamic/public";
+	import { PUBLIC_APP_NAME, PUBLIC_ORIGIN } from "$env/static/public";
 	import NavConversationItem from "./NavConversationItem.svelte";
 	import type { LayoutData } from "../../routes/$types";
-	import type { ConvSidebar } from "$lib/types/ConvSidebar";
-	import type { Model } from "$lib/types/Model";
-	import { page } from "$app/stores";
 
-	export let conversations: ConvSidebar[] = [];
+	const dispatch = createEventDispatcher<{
+		shareConversation: { id: string; title: string };
+		clickSettings: void;
+		clickLogout: void;
+	}>();
+
+	export let conversations: Array<{
+		id: string;
+		title: string;
+	}> = [];
+
 	export let canLogin: boolean;
 	export let user: LayoutData["user"];
 
 	function handleNewChatClick() {
 		isAborted.set(true);
 	}
-
-	const dateRanges = [
-		new Date().setDate(new Date().getDate() - 1),
-		new Date().setDate(new Date().getDate() - 7),
-		new Date().setMonth(new Date().getMonth() - 1),
-	];
-
-	$: groupedConversations = {
-		today: conversations.filter(({ updatedAt }) => updatedAt.getTime() > dateRanges[0]),
-		week: conversations.filter(
-			({ updatedAt }) => updatedAt.getTime() > dateRanges[1] && updatedAt.getTime() < dateRanges[0]
-		),
-		month: conversations.filter(
-			({ updatedAt }) => updatedAt.getTime() > dateRanges[2] && updatedAt.getTime() < dateRanges[1]
-		),
-		older: conversations.filter(({ updatedAt }) => updatedAt.getTime() < dateRanges[2]),
-	};
-
-	const titles: { [key: string]: string } = {
-		today: "Today",
-		week: "This week",
-		month: "This month",
-		older: "Older",
-	} as const;
-
-	const nModels: number = $page.data.models.filter((el: Model) => !el.unlisted).length;
 </script>
 
 <div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
-	<a
-		class="flex items-center rounded-xl text-lg font-semibold"
-		href="{envPublic.PUBLIC_ORIGIN}{base}/"
-	>
+	<a class="flex items-center rounded-xl text-lg font-semibold" href="{PUBLIC_ORIGIN}{base}/">
 		<Logo classNames="mr-1" />
-		{envPublic.PUBLIC_APP_NAME}
+		{PUBLIC_APP_NAME}
 	</a>
 	<a
 		href={`${base}/`}
@@ -63,27 +42,20 @@
 	</a>
 </div>
 <div
-	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 max-sm:bg-gradient-to-t md:bg-gradient-to-l dark:from-gray-800/30"
+	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl bg-gradient-to-l from-gray-50 px-3 pb-3 pt-2 dark:from-gray-800/30"
 >
-	{#each Object.entries(groupedConversations) as [group, convs]}
-		{#if convs.length}
-			<h4 class="mb-1.5 mt-4 pl-0.5 text-sm text-gray-400 first:mt-0 dark:text-gray-500">
-				{titles[group]}
-			</h4>
-			{#each convs as conv}
-				<NavConversationItem on:editConversationTitle on:deleteConversation {conv} />
-			{/each}
-		{/if}
+	{#each conversations as conv (conv.id)}
+		<NavConversationItem on:editConversationTitle on:deleteConversation {conv} />
 	{/each}
 </div>
 <div
-	class="mt-0.5 flex flex-col gap-1 rounded-r-xl p-3 text-sm md:bg-gradient-to-l md:from-gray-50 md:dark:from-gray-800/30"
+	class="mt-0.5 flex flex-col gap-1 rounded-r-xl bg-gradient-to-l from-gray-50 p-3 text-sm dark:from-gray-800/30"
 >
 	{#if user?.username || user?.email}
 		<form
 			action="{base}/logout"
 			method="post"
-			class="group flex items-center gap-1.5 rounded-lg pl-2.5 pr-2 hover:bg-gray-100 dark:hover:bg-gray-700"
+			class="group flex items-center gap-1.5 rounded-lg pl-3 pr-2 hover:bg-gray-100 dark:hover:bg-gray-700"
 		>
 			<span
 				class="flex h-9 flex-none shrink items-center gap-1.5 truncate pr-2 text-gray-500 dark:text-gray-400"
@@ -91,7 +63,7 @@
 			>
 			<button
 				type="submit"
-				class="ml-auto h-6 flex-none items-center gap-1.5 rounded-md border bg-white px-2 text-gray-700 shadow-sm group-hover:flex hover:shadow-none md:hidden dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
+				class="ml-auto h-6 flex-none items-center gap-1.5 rounded-md border bg-white px-2 text-gray-700 shadow-sm group-hover:flex hover:shadow-none dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-300 md:hidden"
 			>
 				Sign Out
 			</button>
@@ -101,7 +73,7 @@
 		<form action="{base}/login" method="POST" target="_parent">
 			<button
 				type="submit"
-				class="flex h-9 w-full flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+				class="flex h-9 w-full flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 			>
 				Login
 			</button>
@@ -110,45 +82,29 @@
 	<button
 		on:click={switchTheme}
 		type="button"
-		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 	>
 		Theme
 	</button>
-	{#if nModels > 1}
-		<a
-			href="{base}/models"
-			class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
-		>
-			Models
-			<span
-				class="ml-auto rounded-full border border-gray-300 px-2 py-0.5 text-xs text-gray-500 dark:border-gray-500 dark:text-gray-400"
-				>{nModels}</span
-			>
-		</a>
-	{/if}
-	{#if $page.data.enableAssistants}
+	<button
+		on:click={() => dispatch("clickSettings")}
+		type="button"
+		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+	>
+		Settings
+	</button>
+	{#if PUBLIC_APP_NAME === "HuggingChat"}
 		<a
-			href="{base}/assistants"
-			class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+			href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
+			target="_blank"
+			rel="noreferrer"
+			class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 		>
-			Assistants
-			<span
-				class="ml-auto rounded-full border border-gray-300 px-2 py-0.5 text-xs text-gray-500 dark:border-gray-500 dark:text-gray-400"
-				>New</span
-			>
+			Feedback
 		</a>
-	{/if}
-
-	<a
-		href="{base}/settings"
-		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
-	>
-		Settings
-	</a>
-	{#if envPublic.PUBLIC_APP_NAME === "HuggingChat"}
 		<a
 			href="{base}/privacy"
-			class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+			class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 		>
 			About & Privacy
 		</a>

src/lib/components/OpenWebSearchResults.svelte

@@ -1,56 +1,41 @@
 <script lang="ts">
 	import type { WebSearchUpdate } from "$lib/types/MessageUpdate";
+	import CarbonCaretRight from "~icons/carbon/caret-right";
 
+	import CarbonCheckmark from "~icons/carbon/checkmark-filled";
 	import CarbonError from "~icons/carbon/error-filled";
+
 	import EosIconsLoading from "~icons/eos-icons/loading";
-	import IconInternet from "./icons/IconInternet.svelte";
 
+	export let loading = false;
 	export let classNames = "";
 	export let webSearchMessages: WebSearchUpdate[] = [];
 
-	$: sources = webSearchMessages.find((m) => m.sources)?.sources;
-	$: lastMessage = webSearchMessages.filter((m) => m.messageType !== "sources").slice(-1)[0];
-	$: loading = !sources && lastMessage.messageType !== "error";
+	let detailsOpen: boolean;
+	let error: boolean;
+	$: error = webSearchMessages[webSearchMessages.length - 1]?.messageType === "error";
 </script>
 
 <details
 	class="flex w-fit rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 {classNames} max-w-full"
+	bind:open={detailsOpen}
 >
-	<summary class="grid min-w-72 select-none grid-cols-[40px,1fr] items-center gap-2.5 p-2">
-		<div
-			class="relative grid aspect-square place-content-center overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
-		>
-			<svg
-				class="absolute inset-0 text-gray-300 transition-opacity dark:text-gray-700 {loading
-					? 'opacity-100'
-					: 'opacity-0'}"
-				width="40"
-				height="40"
-				viewBox="0 0 38 38"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					class="loading-path"
-					d="M8 2.5H30C30 2.5 35.5 2.5 35.5 8V30C35.5 30 35.5 35.5 30 35.5H8C8 35.5 2.5 35.5 2.5 30V8C2.5 8 2.5 2.5 8 2.5Z"
-					stroke="currentColor"
-					stroke-width="1"
-					stroke-linecap="round"
-					id="shape"
-				/>
-			</svg>
-			<IconInternet classNames="relative fill-current text-xl" />
+	<summary
+		class="align-center flex cursor-pointer select-none list-none py-1 pl-2.5 pr-2 align-text-top transition-all"
+	>
+		{#if error}
+			<CarbonError class="my-auto text-red-700 dark:text-red-500" />
+		{:else if loading}
+			<EosIconsLoading class="my-auto text-gray-500" />
+		{:else}
+			<CarbonCheckmark class="my-auto text-gray-500" />
+		{/if}
+		<span class="px-2 font-medium" class:text-red-700={error} class:dark:text-red-500={error}
+			>Web search
+		</span>
+		<div class="my-auto transition-all" class:rotate-90={detailsOpen}>
+			<CarbonCaretRight />
 		</div>
-		<dl class="leading-4">
-			<dd class="text-sm">Web Search</dd>
-			<dt class="flex items-center gap-1 truncate whitespace-nowrap text-[.82rem] text-gray-400">
-				{#if sources}
-					Completed
-				{:else}
-					{lastMessage.message}
-				{/if}
-			</dt>
-		</dl>
 	</summary>
 
 	<div class="content px-5 pb-5 pt-4">
@@ -103,18 +88,27 @@
 </details>
 
 <style>
-	details summary::-webkit-details-marker {
-		display: none;
+	@keyframes grow {
+		0% {
+			font-size: 0;
+			opacity: 0;
+		}
+		30% {
+			font-size: 1em;
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
 	}
 
-	.loading-path {
-		stroke-dasharray: 61.45;
-		animation: loading 2s linear infinite;
+	details[open] .content {
+		animation-name: grow;
+		animation-duration: 300ms;
+		animation-delay: 0ms;
 	}
 
-	@keyframes loading {
-		to {
-			stroke-dashoffset: 122.9;
-		}
+	details summary::-webkit-details-marker {
+		display: none;
 	}
 </style>

src/lib/components/Pagination.svelte

@@ -1,94 +0,0 @@
-<script lang="ts">
-	import { page } from "$app/stores";
-	import { getHref } from "$lib/utils/getHref";
-	import PaginationArrow from "./PaginationArrow.svelte";
-
-	export let classNames = "";
-	export let numItemsPerPage: number;
-	export let numTotalItems: number;
-
-	const ELLIPSIS_IDX = -1 as const;
-
-	$: numTotalPages = Math.ceil(numTotalItems / numItemsPerPage);
-	$: pageIndex = parseInt($page.url.searchParams.get("p") ?? "0");
-	$: pageIndexes = getPageIndexes(pageIndex, numTotalPages);
-
-	function getPageIndexes(pageIdx: number, nTotalPages: number) {
-		let pageIdxs: number[] = [];
-
-		const NUM_EXTRA_BUTTONS = 2; // The number of page links to show on either side of the current page link.
-
-		const minIdx = 0;
-		const maxIdx = nTotalPages - 1;
-
-		pageIdxs = [pageIdx];
-
-		// forward
-		for (let i = 1; i < NUM_EXTRA_BUTTONS + 1; i++) {
-			const newPageIdx = pageIdx + i;
-			if (newPageIdx > maxIdx) {
-				continue;
-			}
-			pageIdxs.push(newPageIdx);
-		}
-		if (maxIdx - pageIdxs[pageIdxs.length - 1] > 1) {
-			pageIdxs.push(...[ELLIPSIS_IDX, maxIdx]);
-		} else if (maxIdx - pageIdxs[pageIdxs.length - 1] === 1) {
-			pageIdxs.push(maxIdx);
-		}
-
-		// backward
-		for (let i = 1; i < NUM_EXTRA_BUTTONS + 1; i++) {
-			const newPageIdx = pageIdx - i;
-			if (newPageIdx < minIdx) {
-				continue;
-			}
-			pageIdxs.unshift(newPageIdx);
-		}
-		if (pageIdxs[0] - minIdx > 1) {
-			pageIdxs.unshift(...[minIdx, ELLIPSIS_IDX]);
-		} else if (pageIdxs[0] - minIdx === 1) {
-			pageIdxs.unshift(minIdx);
-		}
-		return pageIdxs;
-	}
-</script>
-
-{#if numTotalPages > 1}
-	<nav>
-		<ul
-			class="flex select-none items-center justify-between space-x-2 text-gray-700 sm:justify-center dark:text-gray-300 {classNames}"
-		>
-			<li>
-				<PaginationArrow
-					href={getHref($page.url, { newKeys: { p: (pageIndex - 1).toString() } })}
-					direction="previous"
-					isDisabled={pageIndex - 1 < 0}
-				/>
-			</li>
-			{#each pageIndexes as pageIdx}
-				<li class="hidden sm:block">
-					<a
-						class="
-							rounded-lg px-2.5 py-1
-							{pageIndex === pageIdx
-							? 'bg-gray-50 font-semibold ring-1 ring-inset ring-gray-200 dark:bg-gray-800 dark:text-yellow-500 dark:ring-gray-700'
-							: ''}
-						"
-						class:pointer-events-none={pageIdx === ELLIPSIS_IDX || pageIndex === pageIdx}
-						href={getHref($page.url, { newKeys: { p: pageIdx.toString() } })}
-					>
-						{pageIdx === ELLIPSIS_IDX ? "..." : pageIdx + 1}
-					</a>
-				</li>
-			{/each}
-			<li>
-				<PaginationArrow
-					href={getHref($page.url, { newKeys: { p: (pageIndex + 1).toString() } })}
-					direction="next"
-					isDisabled={pageIndex + 1 >= numTotalPages}
-				/>
-			</li>
-		</ul>
-	</nav>
-{/if}

src/lib/components/PaginationArrow.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import CarbonCaretLeft from "~icons/carbon/caret-left";
-	import CarbonCaretRight from "~icons/carbon/caret-right";
-
-	export let href: string;
-	export let direction: "next" | "previous";
-	export let isDisabled = false;
-</script>
-
-<a
-	class="flex items-center rounded-lg px-2.5 py-1 hover:bg-gray-50 dark:hover:bg-gray-800 {isDisabled
-		? 'pointer-events-none opacity-50'
-		: ''}"
-	{href}
->
-	{#if direction === "previous"}
-		<CarbonCaretLeft classNames="mr-1.5" />
-		Previous
-	{:else}
-		Next
-		<CarbonCaretRight classNames="ml-1.5" />
-	{/if}
-</a>

src/lib/components/SettingsModal.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+
+	import Modal from "$lib/components/Modal.svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import Switch from "$lib/components/Switch.svelte";
+	import { enhance } from "$app/forms";
+	import { base } from "$app/paths";
+	import { PUBLIC_APP_DATA_SHARING } from "$env/static/public";
+	import type { Model } from "$lib/types/Model";
+	import type { LayoutData } from "../../routes/$types";
+
+	export let settings: LayoutData["settings"];
+	export let models: Array<Model>;
+
+	let shareConversationsWithModelAuthors = settings.shareConversationsWithModelAuthors;
+	let isConfirmingDeletion = false;
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+</script>
+
+<Modal on:close>
+	<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>Settings</h2>
+			<button type="button" class="group" on:click={() => dispatch("close")}>
+				<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
+			</button>
+		</div>
+		<form
+			class="flex flex-col gap-5"
+			use:enhance={() => {
+				dispatch("close");
+			}}
+			method="post"
+			action="{base}/settings"
+		>
+			{#if PUBLIC_APP_DATA_SHARING}
+				<label class="flex cursor-pointer select-none items-center gap-2 text-gray-500">
+					{#each Object.entries(settings).filter(([k]) => !(k === "shareConversationsWithModelAuthors" || k === "customPrompts")) as [key, val]}
+						<input type="hidden" name={key} value={val} />
+					{/each}
+					<input
+						type="hidden"
+						name="customPrompts"
+						value={JSON.stringify(settings.customPrompts)}
+					/>
+					<Switch
+						name="shareConversationsWithModelAuthors"
+						bind:checked={shareConversationsWithModelAuthors}
+					/>
+					Share conversations with model authors
+				</label>
+
+				<p class="text-gray-800">
+					Sharing your data will help improve the training data and make open models better over
+					time.
+				</p>
+				<p class="text-gray-800">
+					You can change this setting at any time, it applies to all your conversations.
+				</p>
+				<div>
+					<p class="text-gray-800">Read more about model authors:</p>
+					<ul class="list-inside list-disc">
+						{#each models as model}
+							<li class="list-item">
+								<a
+									href={model["websiteUrl"]}
+									target="_blank"
+									rel="noreferrer"
+									class="underline decoration-gray-300 hover:decoration-gray-700">{model["name"]}</a
+								>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			{/if}
+			<label class="flex cursor-pointer select-none items-center gap-2 text-sm text-gray-500">
+				<input
+					type="checkbox"
+					name="hideEmojiOnSidebar"
+					bind:checked={settings.hideEmojiOnSidebar}
+				/>
+				Hide emoticons in conversation topics
+			</label>
+			<form
+				method="post"
+				action="{base}/conversations?/delete"
+				on:submit|preventDefault={() => (isConfirmingDeletion = true)}
+			>
+				<button type="submit" class="underline decoration-gray-300 hover:decoration-gray-700">
+					Delete all conversations
+				</button>
+			</form>
+			<button
+				type="submit"
+				class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring"
+			>
+				Apply
+			</button>
+		</form>
+
+		{#if isConfirmingDeletion}
+			<Modal on:close={() => (isConfirmingDeletion = false)}>
+				<form
+					use:enhance={() => {
+						dispatch("close");
+					}}
+					method="post"
+					action="{base}/conversations?/delete"
+					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>Are you sure?</h2>
+						<button type="button" class="group" on:click={() => (isConfirmingDeletion = false)}>
+							<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
+						</button>
+					</div>
+					<p class="text-gray-800">
+						This action will delete all your conversations. This cannot be undone.
+					</p>
+					<button
+						type="submit"
+						class="mt-2 rounded-full bg-red-700 px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring"
+					>
+						Confirm deletion
+					</button>
+				</form>
+			</Modal>
+		{/if}
+	</div>
+</Modal>

src/lib/components/Switch.svelte

@@ -10,7 +10,9 @@
 	aria-label="switch"
 	role="switch"
 	tabindex="0"
-	class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-gray-300 p-1 shadow-inner ring-gray-400 transition-all peer-checked:bg-blue-600 peer-focus-visible:ring peer-focus-visible:ring-offset-1 hover:bg-gray-400 dark:bg-gray-600 peer-checked:[&>div]:translate-x-3.5"
+	on:click
+	on:keypress
+	class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full bg-gray-300 p-1 shadow-inner ring-gray-400 transition-all peer-checked:bg-blue-600 peer-focus-visible:ring peer-focus-visible:ring-offset-1 hover:bg-gray-400 dark:bg-gray-600 peer-checked:[&>div]:translate-x-3.5"
 >
 	<div class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-all" />
 </div>

src/lib/components/SystemPromptModal.svelte

@@ -12,7 +12,7 @@
 	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:keydown={(e) => e.key === "Enter" && (isOpen = !isOpen)}
+	on:keypress={(e) => e.key === "Enter" && (isOpen = !isOpen)}
 >
 	<CarbonBlockchain class="text-xxs" /> Using Custom System Prompt
 </button>

src/lib/components/TokensCounter.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	import type { Model } from "$lib/types/Model";
-	import { getTokenizer } from "$lib/utils/getTokenizer";
-	import type { PreTrainedTokenizer } from "@xenova/transformers";
-
-	export let classNames = "";
-	export let prompt = "";
-	export let modelTokenizer: Exclude<Model["tokenizer"], undefined>;
-	export let truncate: number | undefined = undefined;
-
-	let tokenizer: PreTrainedTokenizer | undefined = undefined;
-
-	async function tokenizeText(_prompt: string) {
-		if (!tokenizer) {
-			return;
-		}
-		const { input_ids } = await tokenizer(_prompt);
-		return input_ids.size;
-	}
-
-	$: (async () => {
-		tokenizer = await getTokenizer(modelTokenizer);
-	})();
-</script>
-
-{#if tokenizer}
-	{#await tokenizeText(prompt) then nTokens}
-		{@const exceedLimit = nTokens > (truncate || Infinity)}
-		<div class={classNames}>
-			<p
-				class="peer text-sm {exceedLimit
-					? 'text-red-500 opacity-100'
-					: 'opacity-60 hover:opacity-90'}"
-			>
-				{nTokens}{truncate ? `/${truncate}` : ""}
-			</p>
-			<div
-				class="invisible absolute -top-6 right-0 whitespace-nowrap rounded bg-black px-1 text-sm text-white peer-hover:visible"
-			>
-				Tokens usage
-			</div>
-		</div>
-	{/await}
-{/if}

src/lib/components/WebSearchToggle.svelte

@@ -9,13 +9,13 @@
 <div
 	class="flex h-8 cursor-pointer select-none items-center gap-2 rounded-lg border bg-white p-1.5 shadow-sm hover:shadow-none dark:border-gray-800 dark:bg-gray-900"
 	on:click={toggle}
-	on:keydown={toggle}
+	on:keypress={toggle}
 	aria-checked={$webSearchParameters.useSearch}
 	aria-label="web search toggle"
 	role="switch"
 	tabindex="0"
 >
-	<Switch name="useSearch" bind:checked={$webSearchParameters.useSearch} on:click on:keydown />
+	<Switch name="useSearch" bind:checked={$webSearchParameters.useSearch} on:click on:keypress />
 	<div class="whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">Search web</div>
 	<div class="group relative w-max">
 		<CarbonInformation class="text-xs text-gray-500" />

src/lib/components/chat/AssistantIntroduction.svelte

@@ -1,160 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from "svelte";
-	import IconGear from "~icons/bi/gear-fill";
-	import { base } from "$app/paths";
-	import type { Assistant } from "$lib/types/Assistant";
-	import { formatUserCount } from "$lib/utils/formatUserCount";
-	import IconInternet from "../icons/IconInternet.svelte";
-	import CarbonExport from "~icons/carbon/export";
-	import CarbonCheckmark from "~icons/carbon/checkmark";
-	import CarbonUserMultiple from "~icons/carbon/user-multiple";
-
-	import { share } from "$lib/utils/share";
-	import { env as envPublic } from "$env/dynamic/public";
-	import { page } from "$app/stores";
-
-	export let assistant: Pick<
-		Assistant,
-		| "avatar"
-		| "name"
-		| "rag"
-		| "dynamicPrompt"
-		| "modelId"
-		| "createdByName"
-		| "exampleInputs"
-		| "_id"
-		| "description"
-		| "userCount"
-	>;
-
-	const dispatch = createEventDispatcher<{ message: string }>();
-
-	$: hasRag =
-		assistant?.rag?.allowAllDomains ||
-		(assistant?.rag?.allowedDomains?.length ?? 0) > 0 ||
-		(assistant?.rag?.allowedLinks?.length ?? 0) > 0 ||
-		assistant?.dynamicPrompt;
-
-	const prefix =
-		envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || $page.url.origin}${base}`;
-
-	$: shareUrl = `${prefix}/assistant/${assistant?._id}`;
-
-	let isCopied = false;
-</script>
-
-<div class="flex h-full w-full flex-col content-center items-center justify-center pb-52">
-	<div
-		class="relative mt-auto rounded-2xl bg-gray-100 text-gray-600 dark:border-gray-800 dark:bg-gray-800/60 dark:text-gray-300"
-	>
-		<div
-			class="mt-3 flex min-w-[80dvw] items-center gap-4 p-4 pr-1 sm:min-w-[440px] md:p-8 xl:gap-8"
-		>
-			{#if assistant.avatar}
-				<img
-					src={`${base}/settings/assistants/${assistant._id.toString()}/avatar.jpg?hash=${
-						assistant.avatar
-					}`}
-					alt="avatar"
-					class="size-16 flex-none rounded-full object-cover max-sm:self-start md:size-32"
-				/>
-			{:else}
-				<div
-					class="flex size-12 flex-none items-center justify-center rounded-full bg-gray-300 object-cover text-xl font-bold uppercase text-gray-500 max-sm:self-start sm:text-4xl md:size-32 dark:bg-gray-600"
-				>
-					{assistant?.name[0]}
-				</div>
-			{/if}
-
-			<div class="flex h-full flex-col gap-2 text-balance">
-				<p class="-mb-1">Assistant</p>
-
-				<p class="text-xl font-bold sm:text-2xl">{assistant.name}</p>
-				{#if assistant.description}
-					<p class="line-clamp-6 text-sm text-gray-500 dark:text-gray-400">
-						{assistant.description}
-					</p>
-				{/if}
-
-				{#if hasRag}
-					<div
-						class="flex h-5 w-fit items-center gap-1 rounded-full bg-blue-500/10 pl-1 pr-2 text-xs"
-						title="This assistant uses the websearch."
-					>
-						<IconInternet classNames="text-sm text-blue-600" />
-						Has internet access
-					</div>
-				{/if}
-
-				{#if assistant.createdByName}
-					<p class="pt-1 text-sm text-gray-400 dark:text-gray-500">
-						Created by
-						<a class="hover:underline" href="{base}/assistants?user={assistant.createdByName}">
-							{assistant.createdByName}
-						</a>
-						{#if assistant.userCount && assistant.userCount > 1}
-							<span class="mx-1">·</span>
-							<div
-								class="inline-flex items-baseline gap-1 text-sm text-gray-400 dark:text-gray-500"
-								title="Number of users"
-							>
-								<CarbonUserMultiple class="text-xxs" />{formatUserCount(assistant.userCount)} users
-							</div>
-						{/if}
-					</p>
-				{/if}
-			</div>
-		</div>
-
-		<div class="absolute right-3 top-3 md:right-4 md:top-4">
-			<div class="flex flex-row items-center gap-1">
-				<button
-					class="flex h-7 items-center gap-1.5 rounded-full border bg-white px-2.5 py-1 text-gray-800 shadow-sm hover:shadow-inner max-sm:px-1.5 md:text-sm dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800"
-					on:click={() => {
-						if (!isCopied) {
-							share(shareUrl, assistant.name);
-							isCopied = true;
-							setTimeout(() => {
-								isCopied = false;
-							}, 2000);
-						}
-					}}
-				>
-					{#if isCopied}
-						<CarbonCheckmark class="text-xxs text-green-600 max-sm:text-xs" />
-						<span class="text-green-600 max-sm:hidden"> Link copied </span>
-					{:else}
-						<CarbonExport class="text-xxs max-sm:text-xs" />
-						<span class="max-sm:hidden"> Share </span>
-					{/if}
-				</button>
-				<a
-					href="{base}/settings/assistants/{assistant._id.toString()}"
-					class="flex h-7 items-center gap-1.5 rounded-full border bg-white px-2.5 py-1 text-gray-800 shadow-sm hover:shadow-inner md:text-sm dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800"
-					><IconGear class="text-xxs" />Settings</a
-				>
-			</div>
-		</div>
-	</div>
-	{#if assistant.exampleInputs}
-		<div class="mx-auto mt-auto w-full gap-8 sm:-mb-8">
-			<div class="md:col-span-2 md:mt-6">
-				<div
-					class="grid grid-cols-1 gap-3 {assistant.exampleInputs.length > 1
-						? 'md:grid-cols-2'
-						: ''}"
-				>
-					{#each assistant.exampleInputs as example}
-						<button
-							type="button"
-							class="truncate whitespace-nowrap rounded-xl border bg-gray-50 px-3 py-2 text-left text-smd text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-							on:click={() => dispatch("message", example)}
-						>
-							{example}
-						</button>
-					{/each}
-				</div>
-			</div>
-		</div>
-	{/if}
-</div>