Chat moved from github

.env.local.template

@@ -9,9 +9,23 @@ MONGODB_DIRECT_CONNECTION=false
 COOKIE_NAME=chat-ui
 HF_ACCESS_TOKEN=#hf_<token> from from https://huggingface.co/settings/token
 
+# custom parameters
+SIMILARITY_API_URL=${SIMILARITY_API_URL}
+SIMILARITY_THRESHOLD=${SIMILARITY_THRESHOLD}
+
+SAIGA_PROMPT_WEB_SEARCH_GENERATE_QUERY=`Представим, что ты специалист по налогам. Перефразируй запрос пользователя({{query}}) так, чтобы это можно было найти в поисковой системе.`
+SAIGA_PROMPT_WEB_SEARCH_ANALYZE=Ответь на запрос "{{query}}". Не повторяй текст запроса. Отвечай подробно. Предположим, что следующий текст содержит правдивую информацию: {{context}}
+SAIGA_TRUNCATE_WEB_CONTEXT=4000
+
 # used to activate search with web functionality. disabled if not defined
 SERPAPI_KEY=#your serpapi key here
 SERPER_API_KEY=${SERPER_API_KEY}
+USE_YANDEX_SEARCH=${USE_YANDEX_SEARCH}
+YANDEX_API_KEY=${YANDEX_API_KEY}
+YANDEX_FOLDER_ID=${YANDEX_FOLDER_ID}
+WEB_SEARCH_TEMPLATE=${WEB_SEARCH_TEMPLATE}
+USE_CUSTOM_PARSER=true
+MAX_N_PAGES_SCRAPE=10
 
 # Parameters to enable "Sign in with HF"
 OPENID_CLIENT_ID=

Dockerfile

@@ -12,12 +12,12 @@ ARG APP_NAME
 WORKDIR /app
 
 RUN apt-get update && DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends \
-    git gettext && \
+    gettext && \
     rm -rf /var/lib/apt/lists/*
 
 
-RUN git clone https://github.com/amatenkov/chat-ui.git
-
+#RUN git clone https://github.com/amatenkov/chat-ui.git
+COPY ./chat-ui ./
 WORKDIR /app/chat-ui
 
 

chat-ui/.dockerignore

@@ -0,0 +1,8 @@
+Dockerfile
+.vscode/
+.idea
+.gitignore
+LICENSE
+README.md
+node_modules/
+.svelte-kit/

chat-ui/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

chat-ui/.eslintrc.cjs

@@ -0,0 +1,43 @@
+module.exports = {
+	root: true,
+	parser: "@typescript-eslint/parser",
+	extends: [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:svelte/recommended",
+		"prettier",
+	],
+	plugins: ["@typescript-eslint"],
+	ignorePatterns: ["*.cjs"],
+	overrides: [
+		{
+			files: ["*.svelte"],
+			parser: "svelte-eslint-parser",
+			parserOptions: {
+				parser: "@typescript-eslint/parser",
+			},
+		},
+	],
+	parserOptions: {
+		sourceType: "module",
+		ecmaVersion: 2020,
+		extraFileExtensions: [".svelte"],
+	},
+	rules: {
+		"no-shadow": ["error"],
+		"@typescript-eslint/no-explicit-any": "error",
+		"@typescript-eslint/no-non-null-assertion": "error",
+		"@typescript-eslint/no-unused-vars": [
+			// prevent variables with a _ prefix from being marked as unused
+			"error",
+			{
+				argsIgnorePattern: "^_",
+			},
+		],
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true,
+	},
+};

chat-ui/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

chat-ui/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

chat-ui/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

chat-ui/.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"trailingComma": "es5",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

chat-ui/.vscode/settings.json

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

chat-ui/LICENSE

@@ -0,0 +1,203 @@
+Copyright 2018- The Hugging Face team. All rights reserved.
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

chat-ui/PRIVACY.md

@@ -0,0 +1,38 @@
+## Privacy
+
+> Last updated: July 23, 2023
+
+Users of HuggingChat are authenticated through their HF user account.
+
+By default, your conversations may be shared with the respective models' authors (e.g. if you're chatting with the Open Assistant model, to <a target="_blank" href="https://open-assistant.io/dashboard">Open Assistant</a>) to improve their training data and model over time. Model authors are the custodians of the data collected by their model, even if it's hosted on our platform.
+
+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.
+
+## About available LLMs
+
+The goal of this app is to showcase that it is now (May 2023) possible to build an open source alternative to ChatGPT. 💪
+
+For now, it's running both OpenAssistant's [latest LLaMA based model](https://huggingface.co/OpenAssistant/oasst-sft-6-llama-30b-xor) (which is one of the current best open source chat models) as well as [Meta's newer Llama 2](https://huggingface.co/meta-llama/Llama-2-70b-chat-hf), but the plan in the longer-term is to expose all good-quality chat models from the Hub.
+
+We are not affiliated with Open Assistant nor Meta AI, but if you want to contribute to the training data for the next generation of open models, please consider contributing to https://open-assistant.io/ or https://ai.meta.com/llama/ ❤️
+
+## Technical details
+
+This app is running in a [Space](https://huggingface.co/docs/hub/spaces-overview), which entails that the code for this UI is publicly visible [inside the Space repo](https://huggingface.co/spaces/huggingchat/chat-ui/tree/main).
+
+**Further development takes place on the [huggingface/chat-ui GitHub repo](https://github.com/huggingface/chat-ui).**
+
+The inference backend is running the optimized [text-generation-inference](https://github.com/huggingface/text-generation-inference) on HuggingFace's Inference API infrastructure.
+
+It is therefore possible to deploy a copy of this app to a Space and customize it (swap model, add some UI elements, or store user messages according to your own Terms and conditions). You can also 1-click deploy your own instance using the [Chat UI Spaces Docker template](https://huggingface.co/new-space?template=huggingchat/chat-ui-template).
+
+We welcome any feedback on this app: please participate to the public discussion at https://huggingface.co/spaces/huggingchat/chat-ui/discussions
+
+<a target="_blank" href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"><img src="https://huggingface.co/datasets/huggingface/badges/raw/main/open-a-discussion-xl.svg" title="open a discussion"></a>
+
+## Coming soon
+
+- User setting to share conversations with model authors (done ✅)
+- LLM watermarking

chat-ui/README.md

@@ -0,0 +1,317 @@
+---
+title: chat-ui
+emoji: 🔥
+colorFrom: purple
+colorTo: purple
+sdk: docker
+pinned: false
+license: apache-2.0
+base_path: /chat
+app_port: 3000
+---
+
+# Chat UI
+
+![Chat UI repository thumbnail](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/chatui-websearch.png)
+
+A chat interface using open source models, eg OpenAssistant or Llama. It is a SvelteKit app and it powers the [HuggingChat app on hf.co/chat](https://huggingface.co/chat).
+
+0. [No Setup Deploy](#no-setup-deploy)
+1. [Setup](#setup)
+2. [Launch](#launch)
+3. [Web Search](#web-search)
+4. [Extra parameters](#extra-parameters)
+5. [Deploying to a HF Space](#deploying-to-a-hf-space)
+6. [Building](#building)
+
+##  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 of your choice with only a few clicks to Hugging Face Spaces thanks to the Chat UI Spaces Docker template. Get started [here](https://huggingface.co/new-space?template=huggingchat/chat-ui-template).
+If you'd like to deploy a model with gated access or a model in a private repository, you can simply provide `HUGGING_FACE_HUB_TOKEN` in [Space secrets](https://huggingface.co/docs/hub/spaces-overview#managing-secrets-and-environment-variables). You need to set its value to an access token you can get from [here](https://huggingface.co/settings/tokens).
+
+Read the full tutorial [here](https://huggingface.co/docs/hub/spaces-sdks-docker-chatui#chatui-on-spaces).
+
+## Setup
+
+The default config for Chat UI is stored in the `.env` file. You will need to override some values to get Chat UI to run locally. This is done in `.env.local`.
+
+Start by creating a `.env.local` file in the root of the repository. The bare minimum config you need to get Chat UI to run locally is the following:
+
+```bash
+MONGODB_URL=<the URL to your mongoDB instance>
+HF_ACCESS_TOKEN=<your access token>
+```
+
+### Database
+
+The chat history is stored in a MongoDB instance, and having a DB instance available is needed for Chat UI to work.
+
+You can use a local MongoDB instance. The easiest way is to spin one up using docker:
+
+```bash
+docker run -d -p 27017:27017 --name mongo-chatui mongo:latest
+```
+
+In which case the url of your DB will be `MONGODB_URL=mongodb://localhost:27017`.
+
+Alternatively, you can use a [free MongoDB Atlas](https://www.mongodb.com/pricing) instance for this, Chat UI should fit comfortably within their free tier. After which you can set the `MONGODB_URL` variable in `.env.local` to match your instance.
+
+### Hugging Face Access Token
+
+You will need a Hugging Face access token to run Chat UI locally, if you use a remote inference endpoint. You can get one from [your Hugging Face profile](https://huggingface.co/settings/tokens).
+
+## Launch
+
+After you're done with the `.env.local` file you can run Chat UI locally with:
+
+```bash
+npm install
+npm run dev
+```
+
+## Web Search
+
+Chat UI features a powerful Web Search feature. It works by:
+
+1. Generating an appropriate Google query from the user prompt.
+2. Performing Google search and extracting content from webpages.
+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 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 a LLM can use this information).
+
+## Extra parameters
+
+### OpenID connect
+
+The login feature is disabled by default and users are attributed a unique ID based on their browser. But if you want to use OpenID to authenticate your users, you can add the following to your `.env.local` file:
+
+```bash
+OPENID_PROVIDER_URL=<your OIDC issuer>
+OPENID_CLIENT_ID=<your OIDC client ID>
+OPENID_CLIENT_SECRET=<your OIDC client secret>
+```
+
+These variables will enable the openID sign-in modal for users.
+
+### Theming
+
+You can use a few environment variables to customize the look and feel of chat-ui. These are by default:
+
+```
+PUBLIC_APP_NAME=ChatUI
+PUBLIC_APP_ASSETS=chatui
+PUBLIC_APP_COLOR=blue
+PUBLIC_APP_DATA_SHARING=
+PUBLIC_APP_DISCLAIMER=
+```
+
+- `PUBLIC_APP_NAME` The name used as a title throughout the app.
+- `PUBLIC_APP_ASSETS` Is used to find logos & favicons in `static/$PUBLIC_APP_ASSETS`, current options are `chatui` and `huggingchat`.
+- `PUBLIC_APP_COLOR` Can be any of the [tailwind colors](https://tailwindcss.com/docs/customizing-colors#default-color-palette).
+- `PUBLIC_APP_DATA_SHARING` Can be set to 1 to add a toggle in the user settings that lets your users opt-in to data sharing with models creator.
+- `PUBLIC_APP_DISCLAIMER` If set to 1, we show a disclaimer about generated outputs on login.
+
+### Web Search
+
+You can enable the web search by adding either `SERPER_API_KEY` ([serper.dev](https://serper.dev/)) or `SERPAPI_KEY` ([serpapi.com](https://serpapi.com/)) to your `.env.local`.
+
+### Custom models
+
+You can customize the parameters passed to the model or even use a new model by updating the `MODELS` variable in your `.env.local`. The default one can be found in `.env` and looks like this :
+
+```
+
+MODELS=`[
+  {
+    "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."
+      }, {
+        "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
+    }
+  }
+]`
+
+```
+
+You can change things like the parameters, or customize the preprompt to better suit your needs. You can also add more models by adding more objects to the array, with different preprompts for example.
+
+#### Custom prompt templates:
+
+By default the prompt is constructed using `userMessageToken`, `assistantMessageToken`, `userMessageEndToken`, `assistantMessageEndToken`, `preprompt` parameters and a series of default templates.
+
+However, these templates can be modified by setting the `chatPromptTemplate` and `webSearchQueryPromptTemplate` parameters. Note that if WebSearch is not enabled, only `chatPromptTemplate` needs to be set. The template language is https://handlebarsjs.com. The templates have access to the model's prompt parameters (`preprompt`, etc.). However, if the templates are specified it is recommended to inline the prompt parameters, as using the references (`{{preprompt}}`) is deprecated.
+
+For example:
+
+```
+<System>You are an AI, called ChatAI.</System>
+{{#each messages}}
+  {{#ifUser}}<User>{{content}}</User>{{/ifUser}}
+  {{#ifAssistant}}<Assistant>{{content}}</Assistant>{{/ifAssistant}}
+{{/each}}
+<Assistant>
+```
+
+**chatPromptTemplate**
+
+When quering the model for a chat response, the `chatPromptTemplate` template is used. `messages` is an array of chat messages, it has the format `[{ content: string }, ...]`. To idenify if a message is a user message or an assistant message the `ifUser` and `ifAssistant` block helpers can be used.
+
+The following is the default `chatPromptTemplate`, although newlines and indentiation have been added for readability.
+
+```
+{{preprompt}}
+{{#each messages}}
+  {{#ifUser}}{{@root.userMessageToken}}{{content}}{{@root.userMessageEndToken}}{{/ifUser}}
+  {{#ifAssistant}}{{@root.assistantMessageToken}}{{content}}{{@root.assistantMessageEndToken}}{{/ifAssistant}}
+{{/each}}
+{{assistantMessageToken}}
+```
+
+**webSearchQueryPromptTemplate**
+
+When performing a websearch, the search query is constructed using the `webSearchQueryPromptTemplate` template. It is recommended that that the prompt instructs the chat model to only return a few keywords.
+
+The following is the default `webSearchQueryPromptTemplate`.
+
+```
+{{userMessageToken}}
+  My question is: {{message.content}}.
+  Based on the conversation history (my previous questions are: {{previousMessages}}), give me an appropriate query to answer my question for google search. You should not say more than query. You should not say any words except the query. For the context, today is {{currentDate}}
+{{userMessageEndToken}}
+{{assistantMessageToken}}
+```
+
+#### Running your own models using a custom endpoint
+
+If you want to, instead of hitting models on the Hugging Face Inference API, you can run your own models locally.
+
+A good option is to hit a [text-generation-inference](https://github.com/huggingface/text-generation-inference) endpoint. This is what is done in the official [Chat UI Spaces Docker template](https://huggingface.co/new-space?template=huggingchat/chat-ui-template) for instance: both this app and a text-generation-inference server run inside the same container.
+
+To do this, you can add your own endpoints to the `MODELS` variable in `.env.local`, by adding an `"endpoints"` key for each model in `MODELS`.
+
+```
+
+{
+// rest of the model config here
+"endpoints": [{"url": "https://HOST:PORT"}]
+}
+
+```
+
+If `endpoints` is left unspecified, ChatUI will look for the model on the hosted Hugging Face inference API using the model name.
+
+### Custom endpoint authorization
+
+#### Basic and Bearer
+
+Custom endpoints may require authorization, depending on how you configure them. Authentication will usually be set either with `Basic` or `Bearer`.
+
+For `Basic` we will need to generate a base64 encoding of the username and password.
+
+`echo -n "USER:PASS" | base64`
+
+> VVNFUjpQQVNT
+
+For `Bearer` you can use a token, which can be grabbed from [here](https://huggingface.co/settings/tokens).
+
+You can then add the generated information and the `authorization` parameter to your `.env.local`.
+
+```
+
+"endpoints": [
+{
+"url": "https://HOST:PORT",
+"authorization": "Basic VVNFUjpQQVNT",
+}
+]
+
+```
+
+### Amazon SageMaker
+
+You can also specify your Amazon SageMaker instance as an endpoint for chat-ui. The config goes like this:
+
+```
+"endpoints": [
+    {
+      "host" : "sagemaker",
+      "url": "", // your aws sagemaker url here
+      "accessKey": "",
+      "secretKey" : "",
+      "sessionToken": "", // optional
+      "weight": 1
+    }
+```
+
+You can get the `accessKey` and `secretKey` from your AWS user, under programmatic access.
+
+#### Client Certificate Authentication (mTLS)
+
+Custom endpoints may require client certificate authentication, depending on how you configure them. To enable mTLS between Chat UI and your custom endpoint, you will need to set the `USE_CLIENT_CERTIFICATE` to `true`, and add the `CERT_PATH` and `KEY_PATH` parameters to your `.env.local`. These parameters should point to the location of the certificate and key files on your local machine. The certificate and key files should be in PEM format. The key file can be encrypted with a passphrase, in which case you will also need to add the `CLIENT_KEY_PASSWORD` parameter to your `.env.local`.
+
+If you're using a certificate signed by a private CA, you will also need to add the `CA_PATH` parameter to your `.env.local`. This parameter should point to the location of the CA certificate file on your local machine.
+
+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.
+
+#### 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.
+
+```
+
+"endpoints": [
+{
+"url": "https://HOST:PORT",
+"weight": 1
+}
+{
+"url": "https://HOST:PORT",
+"weight": 2
+}
+...
+]
+
+```
+
+## 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.
+
+## Building
+
+To create a production version of your app:
+
+```bash
+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.

chat-ui/package.json

@@ -0,0 +1,68 @@
+{
+	"name": "chat-ui",
+	"version": "0.6.0",
+	"private": true,
+	"packageManager": "npm@9.5.0",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"test": "MONGODB_URL=mongodb://127.0.0.1:27017/ vitest"
+	},
+	"devDependencies": {
+		"@iconify-json/carbon": "^1.1.16",
+		"@iconify-json/eos-icons": "^1.1.6",
+		"@sveltejs/adapter-node": "^1.2.4",
+		"@sveltejs/kit": "^1.15.10",
+		"@tailwindcss/typography": "^0.5.9",
+		"@types/jsdom": "^21.1.1",
+		"@types/marked": "^4.0.8",
+		"@types/parquetjs": "^0.10.3",
+		"@types/xml2js": "^0.4.12",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.27.3",
+		"marked-katex-extension": "^3.0.6",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.8.1",
+		"prettier-plugin-tailwindcss": "^0.2.7",
+		"svelte": "^3.58.0",
+		"svelte-check": "^3.2.0",
+		"tslib": "^2.4.1",
+		"typescript": "^4.9.3",
+		"unplugin-icons": "^0.16.1",
+		"vite": "^4.3.9",
+		"vitest": "^0.31.0"
+	},
+	"type": "module",
+	"dependencies": {
+		"@huggingface/hub": "^0.5.1",
+		"@huggingface/inference": "^2.2.0",
+		"@xenova/transformers": "^2.6.0",
+		"autoprefixer": "^10.4.14",
+		"aws4fetch": "^1.0.17",
+		"date-fns": "^2.29.3",
+		"dotenv": "^16.0.3",
+		"handlebars": "^4.7.8",
+		"highlight.js": "^11.7.0",
+		"jsdom": "^22.0.0",
+		"marked": "^4.3.0",
+		"mongodb": "^5.8.0",
+		"nanoid": "^4.0.2",
+		"openid-client": "^5.4.2",
+		"parquetjs": "^0.11.2",
+		"postcss": "^8.4.21",
+		"serpapi": "^1.1.1",
+		"tailwind-scrollbar": "^3.0.0",
+		"tailwindcss": "^3.3.1",
+		"transformers": "^3.1.0",
+		"xml2js": "^0.6.2",
+		"zod": "^3.21.4"
+	}
+}

chat-ui/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

chat-ui/src/app.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference types="unplugin-icons/types/svelte" />
+
+import type { User } from "$lib/types/User";
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		interface Locals {
+			sessionId: string;
+			user?: User;
+		}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

chat-ui/src/app.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+		<script>
+			if (
+				localStorage.theme === "dark" ||
+				(!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+			) {
+				document.documentElement.classList.add("dark");
+			}
+
+			// For some reason, Sveltekit doesn't let us load env variables from .env here, so we load it from hooks.server.ts
+			window.gaId = "%gaId%";
+			window.gaIdDeprecated = "%gaIdDeprecated%";
+		</script>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class="h-full dark:bg-gray-900">
+		<div id="app" class="contents h-full">%sveltekit.body%</div>
+	</body>
+</html>

chat-ui/src/hooks.server.ts

@@ -0,0 +1,113 @@
+import { COOKIE_NAME, MESSAGES_BEFORE_LOGIN } from "$env/static/private";
+import type { Handle } from "@sveltejs/kit";
+import {
+	PUBLIC_GOOGLE_ANALYTICS_ID,
+	PUBLIC_DEPRECATED_GOOGLE_ANALYTICS_ID,
+	PUBLIC_ORIGIN,
+	PUBLIC_APP_DISCLAIMER,
+} from "$env/static/public";
+import { collections } from "$lib/server/database";
+import { base } from "$app/paths";
+import { refreshSessionCookie, requiresUser } from "$lib/server/auth";
+import { ERROR_MESSAGES } from "$lib/stores/errors";
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const token = event.cookies.get(COOKIE_NAME);
+
+	event.locals.sessionId = token || crypto.randomUUID();
+
+	const user = await collections.users.findOne({ sessionId: event.locals.sessionId });
+
+	if (user) {
+		event.locals.user = user;
+	}
+
+	function errorResponse(status: number, message: string) {
+		const sendJson =
+			event.request.headers.get("accept")?.includes("application/json") ||
+			event.request.headers.get("content-type")?.includes("application/json");
+		return new Response(sendJson ? JSON.stringify({ error: message }) : message, {
+			status,
+			headers: {
+				"content-type": sendJson ? "application/json" : "text/plain",
+			},
+		});
+	}
+
+	// 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 */
+	const nativeFormContentTypes = [
+		"multipart/form-data",
+		"application/x-www-form-urlencoded",
+		"text/plain",
+	];
+	if (event.request.method === "POST" && nativeFormContentTypes.includes(requestContentType)) {
+		const referer = event.request.headers.get("referer");
+
+		if (!referer) {
+			return errorResponse(403, "Non-JSON form requests need to have a referer");
+		}
+
+		const validOrigins = [
+			new URL(event.request.url).origin,
+			...(PUBLIC_ORIGIN ? [new URL(PUBLIC_ORIGIN).origin] : []),
+		];
+
+		if (!validOrigins.includes(new URL(referer).origin)) {
+			return errorResponse(403, "Invalid referer for POST request");
+		}
+	}
+
+	if (
+		!event.url.pathname.startsWith(`${base}/login`) &&
+		!event.url.pathname.startsWith(`${base}/admin`) &&
+		!["GET", "OPTIONS", "HEAD"].includes(event.request.method)
+	) {
+		if (
+			!user &&
+			requiresUser &&
+			!((MESSAGES_BEFORE_LOGIN ? parseInt(MESSAGES_BEFORE_LOGIN) : 0) > 0)
+		) {
+			return errorResponse(401, ERROR_MESSAGES.authOnly);
+		}
+
+		// if login is not required and the call is not from /settings and we display the ethics modal with PUBLIC_APP_DISCLAIMER
+		//  we check if the user has accepted the ethics modal first.
+		// If login is required, `ethicsModalAcceptedAt` is already true at this point, so do not pass this condition. This saves a DB call.
+		if (
+			!requiresUser &&
+			!event.url.pathname.startsWith(`${base}/settings`) &&
+			!!PUBLIC_APP_DISCLAIMER
+		) {
+			const hasAcceptedEthicsModal = await collections.settings.countDocuments({
+				sessionId: event.locals.sessionId,
+				ethicsModalAcceptedAt: { $exists: true },
+			});
+
+			if (!hasAcceptedEthicsModal) {
+				return errorResponse(405, "You need to accept the welcome modal first");
+			}
+		}
+	}
+
+	refreshSessionCookie(event.cookies, event.locals.sessionId);
+
+	let replaced = false;
+
+	const response = await resolve(event, {
+		transformPageChunk: (chunk) => {
+			// For some reason, Sveltekit doesn't let us load env variables from .env in the app.html template
+			if (replaced || !chunk.html.includes("%gaId%") || !chunk.html.includes("%gaIdDeprecated%")) {
+				return chunk.html;
+			}
+			replaced = true;
+
+			return chunk.html
+				.replace("%gaId%", PUBLIC_GOOGLE_ANALYTICS_ID)
+				.replace("%gaIdDeprecated%", PUBLIC_DEPRECATED_GOOGLE_ANALYTICS_ID);
+		},
+	});
+
+	return response;
+};

chat-ui/src/lib/actions/snapScrollToBottom.ts

@@ -0,0 +1,54 @@
+import { navigating } from "$app/stores";
+import { tick } from "svelte";
+import { get } from "svelte/store";
+
+const detachedOffset = 10;
+
+/**
+ * @param node element to snap scroll to bottom
+ * @param dependency pass in a dependency to update scroll on changes.
+ */
+export const snapScrollToBottom = (node: HTMLElement, dependency: unknown) => {
+	let prevScrollValue = node.scrollTop;
+	let isDetached = false;
+
+	const handleScroll = () => {
+		// if user scrolled up, we detach
+		if (node.scrollTop < prevScrollValue) {
+			isDetached = true;
+		}
+
+		// if user scrolled back to within 10px of bottom, we reattach
+		if (node.scrollTop - (node.scrollHeight - node.clientHeight) >= -detachedOffset) {
+			isDetached = false;
+		}
+
+		prevScrollValue = node.scrollTop;
+	};
+
+	const updateScroll = async (_options: { force?: boolean } = {}) => {
+		const defaultOptions = { force: false };
+		const options = { ...defaultOptions, ..._options };
+		const { force } = options;
+
+		if (!force && isDetached && !get(navigating)) return;
+
+		// wait for next tick to ensure that the DOM is updated
+		await tick();
+
+		node.scrollTo({ top: node.scrollHeight });
+	};
+
+	node.addEventListener("scroll", handleScroll);
+
+	if (dependency) {
+		updateScroll({ force: true });
+	}
+
+	return {
+		update: updateScroll,
+		destroy: () => {
+			node.removeEventListener("scroll", handleScroll);
+		},
+	};
+};

chat-ui/src/lib/buildPrompt.ts

@@ -0,0 +1,49 @@
+import { SAIGA_PROMPT_WEB_SEARCH_ANALYZE } from "$env/static/private";
+import type { BackendModel } from "./server/models";
+import type { Message } from "./types/Message";
+import { format } from "date-fns";
+import type { WebSearch } from "./types/WebSearch";
+/**
+ * Convert [{user: "assistant", content: "hi"}, {user: "user", content: "hello"}] to:
+ *
+ * <|assistant|>hi<|endoftext|><|prompter|>hello<|endoftext|><|assistant|>
+ */
+
+interface buildPromptOptions {
+	messages: Pick<Message, "from" | "content">[];
+	model: BackendModel;
+	locals?: App.Locals;
+	webSearch?: WebSearch;
+	preprompt?: string;
+}
+
+export async function buildPrompt({
+	messages,
+	model,
+	webSearch,
+	preprompt,
+}: buildPromptOptions): Promise<Pick<Message, "from" | "content">[]> {
+	if (webSearch && webSearch.context) {
+		const messagesWithoutLastUsrMsg = messages.slice(0, -1);
+		const lastUserMsg = messages.slice(-1)[0];
+		const currentDate = format(new Date(), "yyyy.MM.dd");
+		messages = [
+			//...messagesWithoutLastUsrMsg,
+			{
+				from: "user",
+				content: SAIGA_PROMPT_WEB_SEARCH_ANALYZE.replace('{{query}}', lastUserMsg.content).replace('{{context}}', webSearch.context),
+			},
+		];
+	}
+
+	return messages;
+	// console.log('messages', messages)
+	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(" ")
+	);
+}

chat-ui/src/lib/buildSearchPrompt.ts

@@ -0,0 +1,25 @@
+import { SAIGA_PROMPT_WEB_SEARCH_ANALYZE } from "$env/static/private";
+import type { BackendModel } from "./server/models";
+import type { Message } from "./types/Message";
+import type { WebSearch } from "./types/WebSearch";
+
+interface buildSearchPromptOptions {
+	messages: Message[];
+	webSearch?: WebSearch;
+}
+
+export async function buildSearchPrompt({
+	messages,
+	webSearch
+}: buildSearchPromptOptions): Promise<Message[]> {
+	const lastUserMsg = messages.filter(m => m.from == 'user').slice(-1)[0];
+	let content = lastUserMsg.content;
+	if (webSearch && webSearch.context){
+		content = SAIGA_PROMPT_WEB_SEARCH_ANALYZE.replace('{{query}}', lastUserMsg.content).replace('{{context}}', webSearch.context)
+	}
+
+	return [{
+		...lastUserMsg,
+		content: content,
+	}];
+}

chat-ui/src/lib/components/AnnouncementBanner.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let title = "";
+	export let classNames = "";
+</script>
+
+<div class="flex items-center rounded-xl bg-gray-100 p-1 text-sm dark:bg-gray-800 {classNames}">
+	<span
+		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}
+	<div class="ml-auto shrink-0">
+		<slot />
+	</div>
+</div>

chat-ui/src/lib/components/CodeBlock.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { afterUpdate } from "svelte";
+	import CopyToClipBoardBtn from "./CopyToClipBoardBtn.svelte";
+
+	export let code = "";
+	export let lang = "";
+
+	$: highlightedCode = "";
+
+	afterUpdate(async () => {
+		const { default: hljs } = await import("highlight.js");
+		const language = hljs.getLanguage(lang);
+
+		highlightedCode = hljs.highlightAuto(code, language?.aliases).value;
+	});
+</script>
+
+<div class="group relative my-4 rounded-lg">
+	<!-- eslint-disable svelte/no-at-html-tags -->
+	<pre
+		class="scrollbar-custom overflow-auto px-5 scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20"><code
+			class="language-{lang}">{@html highlightedCode || code.replaceAll("<", "&lt;")}</code
+		></pre>
+	<CopyToClipBoardBtn
+		classNames="absolute top-2 right-2 invisible opacity-0 group-hover:visible group-hover:opacity-100"
+		value={code}
+	/>
+</div>

chat-ui/src/lib/components/CopyToClipBoardBtn.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { onDestroy } from "svelte";
+
+	import IconCopy from "./icons/IconCopy.svelte";
+	import Tooltip from "./Tooltip.svelte";
+
+	export let classNames = "";
+	export let value: string;
+
+	let isSuccess = false;
+	let timeout: ReturnType<typeof setTimeout>;
+
+	const handleClick = async () => {
+		// writeText() can be unavailable or fail in some cases (iframe, etc) so we try/catch
+		try {
+			await navigator.clipboard.writeText(value);
+
+			isSuccess = true;
+			if (timeout) {
+				clearTimeout(timeout);
+			}
+			timeout = setTimeout(() => {
+				isSuccess = false;
+			}, 1000);
+		} catch (err) {
+			console.error(err);
+		}
+	};
+
+	onDestroy(() => {
+		if (timeout) {
+			clearTimeout(timeout);
+		}
+	});
+</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-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={handleClick}
+>
+	<span class="relative">
+		<IconCopy />
+		<Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />
+	</span>
+</button>

chat-ui/src/lib/components/LoginModal.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import { base } from "$app/paths";
+	import { page } from "$app/stores";
+	import { PUBLIC_APP_DATA_SHARING, PUBLIC_APP_NAME, PUBLIC_VERSION } from "$env/static/public";
+	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
+	import Modal from "$lib/components/Modal.svelte";
+	import type { LayoutData } from "../../routes/$types";
+	import Logo from "./icons/Logo.svelte";
+	export let settings: LayoutData["settings"];
+
+	const isIframe = browser && window.self !== window.parent;
+</script>
+
+<Modal>
+	<div
+		class="flex w-full flex-col items-center gap-6 bg-gradient-to-t from-primary-500/40 via-primary-500/10 to-primary-500/0 px-4 pb-10 pt-9 text-center "
+	>
+		<h2 class="flex items-center text-2xl font-semibold text-gray-800">
+			<Logo classNames="mr-1" />
+			{PUBLIC_APP_NAME}
+			<div
+				class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400"
+			>
+				v{PUBLIC_VERSION}
+			</div>
+		</h2>
+		{#if $page.data.requiresLogin}
+			<p
+				class="px-4 text-lg font-semibold leading-snug text-gray-800 sm:px-12"
+				style="text-wrap: balance;"
+			>
+				Please Sign in with Hugging Face to continue
+			</p>
+		{/if}
+		<p class="text-base text-gray-800">
+			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>
+		{#if PUBLIC_APP_DATA_SHARING}
+			<p class="px-2 text-sm text-gray-500">
+				Your conversations will be shared with model authors unless you disable it from your
+				settings.
+			</p>
+		{/if}
+		<form
+			action="{base}/{$page.data.requiresLogin ? 'login' : 'settings'}"
+			target={isIframe ? "_blank" : ""}
+			method="POST"
+			class="flex w-full flex-col items-center gap-2"
+		>
+			{#if $page.data.requiresLogin}
+				<button
+					type="submit"
+					class="mt-2 flex items-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-primary-500"
+				>
+					Sign in
+					{#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="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-primary-500"
+				>
+					Start chatting
+				</button>
+			{/if}
+		</form>
+	</div>
+</Modal>

chat-ui/src/lib/components/MobileNav.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { navigating } from "$app/stores";
+	import { createEventDispatcher } from "svelte";
+	import { browser } from "$app/environment";
+	import { base } from "$app/paths";
+
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonAdd from "~icons/carbon/add";
+	import CarbonTextAlignJustify from "~icons/carbon/text-align-justify";
+
+	export let isOpen = false;
+	export let title: string | undefined;
+
+	$: title = title || "New Chat";
+
+	let closeEl: HTMLButtonElement;
+	let openEl: HTMLButtonElement;
+
+	const dispatch = createEventDispatcher();
+
+	$: if ($navigating) {
+		dispatch("toggle", false);
+	}
+
+	$: if (isOpen && closeEl) {
+		closeEl.focus();
+	} else if (!isOpen && browser && document.activeElement === closeEl) {
+		openEl.focus();
+	}
+</script>
+
+<nav
+	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 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 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 bg-gradient-to-l from-gray-50 dark:bg-gray-900 dark:from-gray-800/30 {isOpen
+		? 'block'
+		: 'hidden'}"
+>
+	<div class="flex h-12 items-center px-4">
+		<button
+			type="button"
+			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
+		>
+	</div>
+	<slot />
+</nav>

chat-ui/src/lib/components/Modal.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { createEventDispatcher, onDestroy, onMount } from "svelte";
+	import { cubicOut } from "svelte/easing";
+	import { fade } from "svelte/transition";
+	import Portal from "./Portal.svelte";
+	import { browser } from "$app/environment";
+
+	export let width = "max-w-sm";
+
+	let backdropEl: HTMLDivElement;
+	let modalEl: HTMLDivElement;
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+
+	function handleKeydown(event: KeyboardEvent) {
+		// close on ESC
+		if (event.key === "Escape") {
+			event.preventDefault();
+			dispatch("close");
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target === backdropEl) {
+			dispatch("close");
+		}
+	}
+
+	onMount(() => {
+		document.getElementById("app")?.setAttribute("inert", "true");
+		modalEl.focus();
+	});
+
+	onDestroy(() => {
+		if (!browser) return;
+		// remove inert attribute if this is the last modal
+		if (document.querySelectorAll('[role="dialog"]:not(#app *)').length === 1) {
+			document.getElementById("app")?.removeAttribute("inert");
+		}
+	});
+</script>
+
+<Portal>
+	<div
+		role="presentation"
+		tabindex="-1"
+		bind:this={backdropEl}
+		on:click={handleBackdropClick}
+		transition:fade={{ 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"
+	>
+		<div
+			role="dialog"
+			tabindex="-1"
+			bind:this={modalEl}
+			on:keydown={handleKeydown}
+			class="max-h-[90dvh] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none sm:-mt-10 sm:max-h-screen {width}"
+		>
+			<slot />
+		</div>
+	</div>
+</Portal>

chat-ui/src/lib/components/ModelCardMetadata.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import CarbonEarth from "~icons/carbon/earth";
+	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
+	import type { Model } from "$lib/types/Model";
+
+	export let model: Pick<Model, "name" | "datasetName" | "websiteUrl" | "modelUrl" | "datasetUrl">;
+
+	export let variant: "light" | "dark" = "light";
+</script>
+
+<div
+	class="flex items-center gap-5 rounded-xl bg-gray-100 px-3 py-2 text-xs sm:text-sm 
+	{variant === 'dark'
+		? 'text-gray-600 dark:bg-gray-800 dark:text-gray-300'
+		: 'text-gray-800 dark:bg-gray-100 dark:text-gray-600'}"
+>
+	<a
+		href={model.modelUrl || "https://huggingface.co/" + model.name}
+		target="_blank"
+		rel="noreferrer"
+		class="flex items-center hover:underline"
+		><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
+		Model
+		<div class="max-sm:hidden">&nbsp;page</div></a
+	>
+	{#if model.datasetName || model.datasetUrl}
+		<a
+			href={model.datasetUrl || "https://huggingface.co/datasets/" + model.datasetName}
+			target="_blank"
+			rel="noreferrer"
+			class="flex items-center hover:underline"
+			><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
+			Dataset
+			<div class="max-sm:hidden">&nbsp;page</div></a
+		>
+	{/if}
+	{#if model.websiteUrl}
+		<a
+			href={model.websiteUrl}
+			target="_blank"
+			class="ml-auto flex items-center hover:underline"
+			rel="noreferrer"
+		>
+			<CarbonEarth class="mr-1.5 shrink-0 text-xs text-gray-400" />
+			Website
+		</a>
+	{/if}
+</div>

chat-ui/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>

chat-ui/src/lib/components/NavConversationItem.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { base } from "$app/paths";
+	import { page } from "$app/stores";
+	import { createEventDispatcher } from "svelte";
+
+	import CarbonCheckmark from "~icons/carbon/checkmark";
+	import CarbonTrashCan from "~icons/carbon/trash-can";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonEdit from "~icons/carbon/edit";
+
+	export let conv: { id: string; title: string };
+
+	let confirmDelete = false;
+
+	const dispatch = createEventDispatcher<{
+		deleteConversation: string;
+		editConversationTitle: { id: string; title: string };
+	}>();
+</script>
+
+<a
+	data-sveltekit-noscroll
+	on:mouseleave={() => {
+		confirmDelete = false;
+	}}
+	href="{base}/conversation/{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-1 truncate">
+		{#if confirmDelete}
+			<span class="font-semibold"> Удалить </span>
+		{/if}
+		{conv.title}
+	</div>
+
+	{#if confirmDelete}
+		<button
+			type="button"
+			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+			title="Удалить"
+			on:click|preventDefault={() => dispatch("deleteConversation", conv.id)}
+		>
+			<CarbonCheckmark class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
+		</button>
+		<button
+			type="button"
+			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+			title="Отмена"
+			on:click|preventDefault={() => {
+				confirmDelete = false;
+			}}
+		>
+			<CarbonClose class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
+		</button>
+	{:else}
+		<button
+			type="button"
+			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+			title="Редактировать заголовок"
+			on:click|preventDefault={() => {
+				const newTitle = prompt("Введите заголовок для диалога:", conv.title);
+				if (!newTitle) return;
+				dispatch("editConversationTitle", { id: conv.id, title: newTitle });
+			}}
+		>
+			<CarbonEdit class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
+		</button>
+
+		<button
+			type="button"
+			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+			title="Удалить заголовок"
+			on:click|preventDefault={(event) => {
+				if (event.shiftKey) {
+					dispatch("deleteConversation", conv.id);
+				} else {
+					confirmDelete = true;
+				}
+			}}
+		>
+			<CarbonTrashCan class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300" />
+		</button>
+	{/if}
+</a>

chat-ui/src/lib/components/NavMenu.svelte

@@ -0,0 +1,107 @@
+<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 { PUBLIC_APP_NAME, PUBLIC_ORIGIN } from "$env/static/public";
+	import NavConversationItem from "./NavConversationItem.svelte";
+	import type { LayoutData } from "../../routes/$types";
+
+	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"];
+
+	export let loginModalVisible;
+</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="{PUBLIC_ORIGIN}{base}/">
+		<Logo classNames="mr-1" />
+		{PUBLIC_APP_NAME}
+	</a>
+	<a
+		href={`${base}/`}
+		class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none dark:border-gray-600 dark:bg-gray-700"
+	>
+		Новый диалог
+	</a>
+</div>
+<div
+	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 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 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-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"
+				>{user?.username || user?.email}</span
+			>
+			<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 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-300 md:hidden"
+			>
+				Sign Out
+			</button>
+		</form>
+	{/if}
+	{#if canLogin}
+		<button
+			on:click={() => (loginModalVisible = true)}
+			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"
+		>
+			Login
+		</button>
+	{/if}
+	<button
+		on:click={switchTheme}
+		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"
+	>
+		Переключить тему
+	</button>
+	<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"
+	>
+		Настройки
+	</button>
+	{#if PUBLIC_APP_NAME === "HuggingChat"}
+		<a
+			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"
+		>
+			Feedback
+		</a>
+		<a
+			href="{base}/privacy"
+			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>
+	{/if}
+</div>

chat-ui/src/lib/components/OpenWebSearchResults.svelte

@@ -0,0 +1,114 @@
+<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";
+
+	export let loading = false;
+	export let classNames = "";
+	export let webSearchMessages: WebSearchUpdate[] = [];
+
+	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="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}
+			>Поиск в интернете
+		</span>
+		<div class="my-auto transition-all" class:rotate-90={detailsOpen}>
+			<CarbonCaretRight />
+		</div>
+	</summary>
+
+	<div class="content px-5 pb-5 pt-4">
+		{#if webSearchMessages.length === 0}
+			<div class="mx-auto w-fit">
+				<EosIconsLoading class="mb-3 h-4 w-4" />
+			</div>
+		{:else}
+			<ol>
+				{#each webSearchMessages as message}
+					{#if message.messageType === "update"}
+						<li class="group border-l pb-6 last:!border-transparent last:pb-0 dark:border-gray-800">
+							<div class="flex items-start">
+								<div
+									class="-ml-1.5 h-3 w-3 flex-none rounded-full bg-gray-200 dark:bg-gray-600 {loading
+										? 'group-last:animate-pulse group-last:bg-gray-300 group-last:dark:bg-gray-500'
+										: ''}"
+								/>
+								<h3 class="text-md -mt-1.5 pl-2.5 text-gray-800 dark:text-gray-100">
+									{message.message}
+								</h3>
+							</div>
+							{#if message.args}
+								<p class="mt-1.5 pl-4 text-gray-500 dark:text-gray-400">
+									{message.args}
+								</p>
+							{/if}
+						</li>
+					{:else if message.messageType === "error"}
+						<li class="group border-l pb-6 last:!border-transparent last:pb-0 dark:border-gray-800">
+							<div class="flex items-start">
+								<CarbonError
+									class="-ml-1.5 h-3 w-3 flex-none scale-110 text-red-700 dark:text-red-500"
+								/>
+								<h3 class="text-md -mt-1.5 pl-2.5 text-red-700 dark:text-red-500">
+									{message.message}
+								</h3>
+							</div>
+							{#if message.args}
+								<p class="mt-1.5 pl-4 text-gray-500 dark:text-gray-400">
+									{message.args}
+								</p>
+							{/if}
+						</li>
+					{/if}
+				{/each}
+			</ol>
+		{/if}
+	</div>
+</details>
+
+<style>
+	@keyframes grow {
+		0% {
+			font-size: 0;
+			opacity: 0;
+		}
+		30% {
+			font-size: 1em;
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	details[open] .content {
+		animation-name: grow;
+		animation-duration: 300ms;
+		animation-delay: 0ms;
+	}
+
+	details summary::-webkit-details-marker {
+		display: none;
+	}
+</style>

chat-ui/src/lib/components/Portal.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+
+	let el: HTMLElement;
+
+	onMount(() => {
+		el.ownerDocument.body.appendChild(el);
+	});
+
+	onDestroy(() => {
+		if (el?.parentNode) {
+			el.parentNode.removeChild(el);
+		}
+	});
+</script>
+
+<div bind:this={el} class="contents" hidden>
+	<slot />
+</div>

chat-ui/src/lib/components/ScrollToBottomBtn.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import { onDestroy } from "svelte";
+	import IconChevron from "./icons/IconChevron.svelte";
+
+	export let scrollNode: HTMLElement;
+	export { className as class };
+
+	let visible = false;
+	let className = "";
+	let observer: ResizeObserver | null = null;
+
+	$: if (scrollNode) {
+		destroy();
+
+		if (window.ResizeObserver) {
+			observer = new ResizeObserver(() => {
+				updateVisibility();
+			});
+			observer.observe(scrollNode);
+		}
+		scrollNode.addEventListener("scroll", updateVisibility);
+	}
+
+	function updateVisibility() {
+		if (!scrollNode) return;
+		visible =
+			Math.ceil(scrollNode.scrollTop) + 200 < scrollNode.scrollHeight - scrollNode.clientHeight;
+	}
+
+	function destroy() {
+		observer?.disconnect();
+		scrollNode?.removeEventListener("scroll", updateVisibility);
+	}
+
+	onDestroy(destroy);
+</script>
+
+{#if visible}
+	<button
+		transition:fade|local={{ duration: 150 }}
+		on:click={() => scrollNode.scrollTo({ top: scrollNode.scrollHeight, behavior: "smooth" })}
+		class="btn absolute flex h-[41px] w-[41px] rounded-full border bg-white shadow-md transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:shadow-gray-950 dark:hover:bg-gray-600 {className}"
+		><IconChevron classNames="mt-[2px]" /></button
+	>
+{/if}

chat-ui/src/lib/components/SettingsModal.svelte

@@ -0,0 +1,124 @@
+<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>Настройки</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}
+			<form
+				method="post"
+				action="{base}/conversations?/delete"
+				on:submit|preventDefault={() => (isConfirmingDeletion = true)}
+			>
+				<button type="submit" class="underline decoration-gray-300 hover:decoration-gray-700">
+					Удалить все диалоги
+				</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"
+			>
+				Применить
+			</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>Вы уверены?</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">
+						Вы собираетесь удалить все диалоги без возможности восстановления.
+					</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"
+					>
+						Подтвердить
+					</button>
+				</form>
+			</Modal>
+		{/if}
+	</div>
+</Modal>

chat-ui/src/lib/components/StopGeneratingBtn.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
+
+	export let classNames = "";
+</script>
+
+<!-- <button
+	type="button"
+	on:click
+	class="btn flex h-9 rounded-lg border bg-white px-3 py-1 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 {classNames}"
+>
+	<CarbonStopFilledAlt class="-ml-1 mr-1 h-[1.25rem] w-[1.1875rem] text-gray-400" /> Остановить
+</button> -->

chat-ui/src/lib/components/Switch.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let checked: boolean;
+	export let name: string;
+</script>
+
+<input bind:checked type="checkbox" {name} class="peer pointer-events-none absolute opacity-0" />
+<div
+	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>

chat-ui/src/lib/components/Toast.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+
+	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
+
+	export let message = "";
+</script>
+
+<div
+	transition:fade={{ duration: 300 }}
+	class="pointer-events-none fixed right-0 top-12 z-20 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 md:top-0 md:pr-8 md:pt-5"
+>
+	<div
+		class="pointer-events-auto flex items-center rounded-full bg-white/90 px-3 py-1 shadow-sm dark:bg-gray-900/80"
+	>
+		<IconDazzled classNames="text-2xl mr-2" />
+		<h2 class="font-semibold">{message}</h2>
+	</div>
+</div>

chat-ui/src/lib/components/Tooltip.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let classNames = "";
+	export let label = "Copied";
+	export let position = "left-1/2 top-full transform -translate-x-1/2 translate-y-2";
+</script>
+
+<div
+	class="
+		pointer-events-none absolute rounded bg-black px-2 py-1 font-normal leading-tight text-white shadow transition-opacity 
+		{position}
+		{classNames}
+	"
+>
+	<div
+		class="absolute bottom-full left-1/2 h-0 w-0 -translate-x-1/2 transform border-4 border-t-0 border-black"
+		style="
+				border-left-color: transparent;
+				border-right-color: transparent;
+			"
+	/>
+	{label}
+</div>

chat-ui/src/lib/components/WebSearchToggle.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { webSearchParameters } from "$lib/stores/webSearchParameters";
+	import CarbonInformation from "~icons/carbon/information";
+	import Switch from "./Switch.svelte";
+
+	const toggle = () => ($webSearchParameters.useSearch = !$webSearchParameters.useSearch);
+</script>
+
+<div
+	class="flex h-9 cursor-pointer select-none items-center gap-2 rounded-xl border bg-white p-1.5 shadow-sm hover:shadow-none dark:border-gray-800 dark:bg-gray-900"
+	on:click={toggle}
+	on:keypress={toggle}
+>
+	<Switch name="useSearch" bind:checked={$webSearchParameters.useSearch} on:click on:keypress />
+	<div class="whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">Искать в интернете</div>
+	<div class="group relative w-max">
+		<CarbonInformation class="text-xs text-gray-500" />
+		<div
+			class="pointer-events-none absolute -top-20 left-1/2 w-max -translate-x-1/2 rounded-md bg-gray-100 p-2 opacity-0 transition-opacity group-hover:opacity-100 dark:bg-gray-800"
+		>
+			<p class="max-w-sm text-sm text-gray-800 dark:text-gray-200">
+				Если включено, то нейросеть дополнит свой ответ информацией, полученной из интернета.
+			</p>
+		</div>
+	</div>
+</div>

chat-ui/src/lib/components/chat/ChatInput.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from "svelte";
+
+	export let value = "";
+	export let minRows = 1;
+	export let maxRows: null | number = null;
+	export let placeholder = "";
+	export let disabled = false;
+
+	// Approximate width from which we disable autofocus
+	const TABLET_VIEWPORT_WIDTH = 768;
+
+	let innerWidth = 0;
+	let textareaElement: HTMLTextAreaElement;
+
+	const dispatch = createEventDispatcher<{ submit: void }>();
+
+	$: minHeight = `${1 + minRows * 1.5}em`;
+	$: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
+
+	function handleKeydown(event: KeyboardEvent) {
+		// submit on enter
+		if (event.key === "Enter" && !event.shiftKey) {
+			event.preventDefault();
+			dispatch("submit"); // use a custom event instead of `event.target.form.requestSubmit()` as it does not work on Safari 14
+		}
+	}
+
+	onMount(() => {
+		if (innerWidth > TABLET_VIEWPORT_WIDTH) {
+			textareaElement.focus();
+		}
+	});
+</script>
+
+<svelte:window bind:innerWidth />
+
+<div class="relative min-w-0 flex-1">
+	<pre
+		class="scrollbar-custom invisible overflow-x-hidden overflow-y-scroll whitespace-pre-wrap break-words p-3"
+		aria-hidden="true"
+		style="min-height: {minHeight}; max-height: {maxHeight}">{(value || " ") + "\n"}</pre>
+
+	<textarea
+		enterkeyhint="send"
+		tabindex="0"
+		rows="1"
+		class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
+		bind:value
+		bind:this={textareaElement}
+		{disabled}
+		on:keydown={handleKeydown}
+		on:keypress
+		{placeholder}
+	/>
+</div>
+
+<style>
+	pre,
+	textarea {
+		font-family: inherit;
+		box-sizing: border-box;
+		line-height: 1.5;
+	}
+</style>

chat-ui/src/lib/components/chat/ChatIntroduction.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { PUBLIC_APP_NAME, PUBLIC_VERSION } from "$env/static/public";
+	import { PUBLIC_ANNOUNCEMENT_BANNERS } from "$env/static/public";
+	import Logo from "$lib/components/icons/Logo.svelte";
+	import { createEventDispatcher } from "svelte";
+	import IconChevron from "$lib/components/icons/IconChevron.svelte";
+	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
+	import AnnouncementBanner from "../AnnouncementBanner.svelte";
+	import ModelsModal from "../ModelsModal.svelte";
+	import type { Model } from "$lib/types/Model";
+	import ModelCardMetadata from "../ModelCardMetadata.svelte";
+	import type { LayoutData } from "../../../routes/$types";
+	import { findCurrentModel } from "$lib/utils/models";
+
+	export let currentModel: Model;
+	export let settings: LayoutData["settings"];
+	export let models: Model[];
+
+	let isModelsModalOpen = false;
+
+	$: currentModelMetadata = findCurrentModel(models, settings.activeModel);
+
+	const announcementBanners = PUBLIC_ANNOUNCEMENT_BANNERS
+		? JSON.parse(PUBLIC_ANNOUNCEMENT_BANNERS)
+		: [];
+
+	const dispatch = createEventDispatcher<{ message: string }>();
+</script>
+
+<div class="my-auto grid gap-8 lg:grid-cols-3">
+	
+	
+	{#if currentModelMetadata.promptExamples && currentModelMetadata.promptExamples.length > 0}
+		<div class="lg:col-span-3 lg:mt-6">
+			<p class="mb-3 text-gray-600 dark:text-gray-300">Примеры запросов</p>
+			<div class="grid gap-3 lg:grid-cols-3 lg:gap-5">
+				{#each currentModelMetadata.promptExamples as example}
+					<button
+						type="button"
+						class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
+						on:click={() => dispatch("message", example.prompt)}
+					>
+						{example.title}
+					</button>
+				{/each}
+			</div>
+		</div>{/if}
+</div>

chat-ui/src/lib/components/chat/ChatMessage.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import { marked } from "marked";
+	import markedKatex from "marked-katex-extension";
+	import type { Message } from "$lib/types/Message";
+	import { afterUpdate, createEventDispatcher } from "svelte";
+	import { deepestChild } from "$lib/utils/deepestChild";
+	import { page } from "$app/stores";
+
+	import CodeBlock from "../CodeBlock.svelte";
+	import IconLoading from "../icons/IconLoading.svelte";
+	import CarbonRotate360 from "~icons/carbon/rotate-360";
+	import CarbonDownload from "~icons/carbon/download";
+	import CarbonThumbsUp from "~icons/carbon/thumbs-up";
+	import CarbonThumbsDown from "~icons/carbon/thumbs-down";
+	import { PUBLIC_SEP_TOKEN } from "$lib/constants/publicSepToken";
+	import type { Model } from "$lib/types/Model";
+
+	import OpenWebSearchResults from "../OpenWebSearchResults.svelte";
+	import type { WebSearchUpdate } from "$lib/types/MessageUpdate";
+
+	function sanitizeMd(md: string) {
+		let ret = md
+			.replace(/<\|[a-z]*$/, "")
+			.replace(/<\|[a-z]+\|$/, "")
+			.replace(/<$/, "")
+			.replaceAll(PUBLIC_SEP_TOKEN, " ")
+			.replaceAll(/<\|[a-z]+\|>/g, " ")
+			.replaceAll(/<br\s?\/?>/gi, "\n")
+			.replaceAll("<", "&lt;")
+			.trim();
+
+		for (const stop of [...(model.parameters?.stop ?? []), "<|endoftext|>"]) {
+			if (ret.endsWith(stop)) {
+				ret = ret.slice(0, -stop.length).trim();
+			}
+		}
+
+		return ret;
+	}
+	function unsanitizeMd(md: string) {
+		return md.replaceAll("&lt;", "<");
+	}
+
+	export let model: Model;
+	export let message: Message;
+	export let loading = false;
+	export let isAuthor = true;
+	export let readOnly = false;
+	export let isTapped = false;
+
+	export let webSearchMessages: WebSearchUpdate[];
+
+	const dispatch = createEventDispatcher<{
+		retry: { content: string; id: Message["id"] };
+		vote: { score: Message["score"]; id: Message["id"] };
+	}>();
+
+	let contentEl: HTMLElement;
+	let loadingEl: IconLoading;
+	let pendingTimeout: ReturnType<typeof setTimeout>;
+
+	const renderer = new marked.Renderer();
+	// For code blocks with simple backticks
+	renderer.codespan = (code) => {
+		// Unsanitize double-sanitized code
+		return `<code>${code.replaceAll("&amp;", "&")}</code>`;
+	};
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const { extensions, ...defaults } = marked.getDefaults() as marked.MarkedOptions & {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		extensions: any;
+	};
+	const options: marked.MarkedOptions = {
+		...defaults,
+		gfm: true,
+		breaks: true,
+		renderer,
+	};
+
+	marked.use(
+		markedKatex({
+			throwOnError: false,
+			// output: "html",
+		})
+	);
+
+	$: tokens = marked.lexer(sanitizeMd(message.content));
+
+	afterUpdate(() => {
+		loadingEl?.$destroy();
+		clearTimeout(pendingTimeout);
+
+		// Add loading animation to the last message if update takes more than 600ms
+		if (loading) {
+			pendingTimeout = setTimeout(() => {
+				if (contentEl) {
+					loadingEl = new IconLoading({
+						target: deepestChild(contentEl),
+						props: { classNames: "loading inline ml-2" },
+					});
+				}
+			}, 600);
+		}
+	});
+
+	let searchUpdates: WebSearchUpdate[] = [];
+
+	$: searchUpdates = ((webSearchMessages.length > 0
+		? webSearchMessages
+		: message.updates?.filter(({ type }) => type === "webSearch")) ?? []) as WebSearchUpdate[];
+
+	$: downloadLink =
+		message.from === "user" ? `${$page.url.pathname}/message/${message.id}/prompt` : undefined;
+
+	let webSearchIsDone = true;
+
+	$: webSearchIsDone =
+		searchUpdates.length > 0 && searchUpdates[searchUpdates.length - 1].messageType === "sources";
+
+	$: webSearchSources =
+		searchUpdates &&
+		searchUpdates?.filter(({ messageType }) => messageType === "sources")?.[0]?.sources;
+</script>
+
+{#if message.from === "assistant"}
+	<div
+		class="group relative -mb-8 flex items-start justify-start gap-4 pb-8 leading-relaxed"
+		on:click={() => (isTapped = !isTapped)}
+		on:keypress={() => (isTapped = !isTapped)}
+	>
+		<img
+			alt=""
+			src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
+			class="mt-5 h-3 w-3 flex-none select-none rounded-full shadow-lg"
+		/>
+		<div
+			class="relative min-h-[calc(2rem+theme(spacing[3.5])*2)] min-w-[60px] break-words rounded-2xl border border-gray-100 bg-gradient-to-br from-gray-50 px-5 py-3.5 text-gray-600 prose-pre:my-2 dark:border-gray-800 dark:from-gray-800/40 dark:text-gray-300"
+		>
+			{#if searchUpdates && searchUpdates.length > 0}
+				<OpenWebSearchResults
+					classNames={tokens.length ? "mb-3.5" : ""}
+					webSearchMessages={searchUpdates}
+					loading={!(searchUpdates[searchUpdates.length - 1]?.messageType === "sources")}
+				/>
+			{/if}
+			{#if !message.content && (webSearchIsDone || (webSearchMessages && webSearchMessages.length === 0))}
+				<IconLoading />
+			{/if}
+
+			<div
+				class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
+				bind:this={contentEl}
+			>
+				{#each tokens as token}
+					{#if token.type === "code"}
+						<CodeBlock lang={token.lang} code={unsanitizeMd(token.text)} />
+					{:else}
+						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+						{@html marked.parse(token.raw, options)}
+					{/if}
+				{/each}
+			</div>
+			<!-- Web Search sources -->
+			{#if webSearchSources?.length}
+				<div class="mt-4 flex flex-wrap items-center gap-x-2 gap-y-1.5 text-sm">
+					<div class="text-gray-400">Источники:</div>
+					{#each webSearchSources as { link, title, hostname }}
+						<a
+							class="flex items-center gap-2 whitespace-nowrap rounded-lg border bg-white px-2 py-1.5 leading-none hover:border-gray-300 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700"
+							href={link}
+							target="_blank"
+						>
+							<img
+								class="h-3.5 w-3.5 rounded"
+								src="https://www.google.com/s2/favicons?sz=64&domain_url={hostname}"
+								alt="{title} favicon"
+							/>
+							<div>{hostname.replace(/^www\./, "")}</div>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+{#if message.from === "user"}
+	<div class="group relative flex items-start justify-start gap-4 max-sm:text-sm">
+		<div class="mt-5 h-3 w-3 flex-none rounded-full" />
+		<div
+			class="max-w-full whitespace-break-spaces break-words rounded-2xl px-5 py-3.5 text-gray-500 dark:text-gray-400"
+		>
+			{message.content.trim()}
+		</div>
+	</div>
+{/if}

chat-ui/src/lib/components/chat/ChatMessages.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Message } from "$lib/types/Message";
+	import { snapScrollToBottom } from "$lib/actions/snapScrollToBottom";
+	import ScrollToBottomBtn from "$lib/components/ScrollToBottomBtn.svelte";
+	import { tick } from "svelte";
+	import { randomUUID } from "$lib/utils/randomUuid";
+	import type { Model } from "$lib/types/Model";
+	import type { LayoutData } from "../../../routes/$types";
+	import ChatIntroduction from "./ChatIntroduction.svelte";
+	import ChatMessage from "./ChatMessage.svelte";
+	import type { WebSearchUpdate } from "$lib/types/MessageUpdate";
+	import { browser } from "$app/environment";
+
+	export let messages: Message[];
+	export let loading: boolean;
+	export let pending: boolean;
+	export let isAuthor: boolean;
+	export let currentModel: Model;
+	export let settings: LayoutData["settings"];
+	export let models: Model[];
+	export let readOnly: boolean;
+
+	let chatContainer: HTMLElement;
+
+	export let webSearchMessages: WebSearchUpdate[] = [];
+
+	async function scrollToBottom() {
+		await tick();
+		chatContainer.scrollTop = chatContainer.scrollHeight;
+	}
+
+	// If last message is from user, scroll to bottom
+	$: if (browser && messages[messages.length - 1]?.from === "user") {
+		scrollToBottom();
+	}
+</script>
+
+<div
+	class="scrollbar-custom mr-1 h-full overflow-y-auto"
+	use:snapScrollToBottom={messages.length ? [...messages, ...webSearchMessages] : false}
+	bind:this={chatContainer}
+>
+	<div class="mx-auto flex h-full max-w-3xl flex-col gap-6 px-5 pt-6 sm:gap-8 xl:max-w-4xl">
+		{#each messages as message, i}
+			<ChatMessage
+				loading={loading && i === messages.length - 1}
+				{message}
+				{isAuthor}
+				{readOnly}
+				model={currentModel}
+				webSearchMessages={i === messages.length - 1 ? webSearchMessages : []}
+				on:retry
+				on:vote
+			/>
+		{:else}
+			<ChatIntroduction {settings} {models} {currentModel} on:message />
+		{/each}
+		{#if pending}
+			<ChatMessage
+				message={{ from: "assistant", content: "", id: randomUUID() }}
+				model={currentModel}
+				{webSearchMessages}
+			/>
+		{/if}
+		<div class="h-44 flex-none" />
+	</div>
+	<ScrollToBottomBtn
+		class="bottom-36 right-4 max-md:hidden lg:right-10"
+		scrollNode={chatContainer}
+	/>
+</div>

chat-ui/src/lib/components/chat/ChatWindow.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import type { Message } from "$lib/types/Message";
+	import { createEventDispatcher } from "svelte";
+
+	import CarbonSendAltFilled from "~icons/carbon/send-alt-filled";
+	import CarbonExport from "~icons/carbon/export";
+	import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
+	import EosIconsLoading from "~icons/eos-icons/loading";
+
+	import ChatMessages from "./ChatMessages.svelte";
+	import ChatInput from "./ChatInput.svelte";
+	import StopGeneratingBtn from "../StopGeneratingBtn.svelte";
+	import type { Model } from "$lib/types/Model";
+	import type { LayoutData } from "../../../routes/$types";
+	import WebSearchToggle from "../WebSearchToggle.svelte";
+	import LoginModal from "../LoginModal.svelte";
+	import type { WebSearchUpdate } from "$lib/types/MessageUpdate";
+
+	export let messages: Message[] = [];
+	export let loading = false;
+	export let pending = false;
+	export let shared = false;
+	export let currentModel: Model;
+	export let models: Model[];
+	export let settings: LayoutData["settings"];
+	export let webSearchMessages: WebSearchUpdate[] = [];
+
+	export let loginRequired = false;
+	$: isReadOnly = !models.some((model) => model.id === currentModel.id);
+
+	let loginModalOpen = false;
+	let message: string;
+
+	const dispatch = createEventDispatcher<{
+		message: string;
+		share: void;
+		stop: void;
+		retry: { id: Message["id"]; content: string };
+	}>();
+
+	const handleSubmit = () => {
+		if (loading) return;
+		dispatch("message", message);
+		message = "";
+	};
+</script>
+
+<div class="relative min-h-0 min-w-0">
+	{#if loginModalOpen}
+		<LoginModal {settings} on:close={() => (loginModalOpen = false)} />
+	{/if}
+	<ChatMessages
+		{loading}
+		{pending}
+		{settings}
+		{currentModel}
+		{models}
+		{messages}
+		readOnly={isReadOnly}
+		isAuthor={!shared}
+		{webSearchMessages}
+		on:message
+		on:vote
+		on:retry={(ev) => {
+			if (!loading) dispatch("retry", ev.detail);
+		}}
+	/>
+	<div
+		class="dark:via-gray-80 pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white via-white/80 to-white/0 px-3.5 py-4 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:dark:bg-gray-900 sm:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
+	>
+		<div class="flex w-full pb-3 max-md:justify-between">
+			{#if settings?.searchEnabled}
+				<WebSearchToggle />
+			{/if}
+			{#if loading}
+				<StopGeneratingBtn
+					classNames={settings?.searchEnabled ? "md:-translate-x-1/2 md:mx-auto" : "mx-auto"}
+					on:click={() => dispatch("stop")}
+				/>
+			{/if}
+		</div>
+		<form
+			on:submit|preventDefault={handleSubmit}
+			class="relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 focus-within:border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:focus-within:border-gray-500 
+			{isReadOnly ? 'opacity-30' : ''}"
+		>
+			<div class="flex w-full flex-1 border-none bg-transparent">
+				<ChatInput
+					placeholder="Введите запрос"
+					bind:value={message}
+					on:submit={handleSubmit}
+					on:keypress={() => {
+						if (loginRequired) loginModalOpen = true;
+					}}
+					maxRows={4}
+					disabled={isReadOnly}
+				/>
+
+				{#if loading}
+					<button
+						class="btn mx-1 my-1 inline-block h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100 md:hidden"
+						on:click={() => dispatch("stop")}
+					>
+						<CarbonStopFilledAlt />
+					</button>
+					<div
+						class="mx-1 my-1 hidden h-[2.4rem] items-center p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100 md:flex"
+					>
+						<EosIconsLoading />
+					</div>
+				{:else}
+					<button
+						class="btn mx-1 my-1 h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100"
+						disabled={!message || isReadOnly}
+						type="submit"
+					>
+						<CarbonSendAltFilled />
+					</button>
+				{/if}
+			</div>
+		</form>
+		
+	</div>
+</div>

chat-ui/src/lib/components/icons/IconChevron.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	width="1em"
+	height="1em"
+	viewBox="0 0 15 6"
+	class={classNames}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M1.67236 1L7.67236 7L13.6724 1"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

chat-ui/src/lib/components/icons/IconCopy.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	fill="currentColor"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<path
+		d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"
+		transform="translate(0)"
+	/>
+	<path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)" /><rect
+		fill="none"
+		width="32"
+		height="32"
+	/>
+</svg>

chat-ui/src/lib/components/icons/IconDazzled.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	class={classNames}
+	fill="none"
+	viewBox="0 0 26 23"
+>
+	<path
+		fill="url(#a)"
+		d="M.93 10.65A10.17 10.17 0 0 1 11.11.48h4.67a9.45 9.45 0 0 1 0 18.89H4.53L1.62 22.2a.38.38 0 0 1-.69-.28V10.65Z"
+	/>
+	<path
+		fill="#000"
+		fill-rule="evenodd"
+		d="M11.52 7.4a1.86 1.86 0 1 1-3.72 0 1.86 1.86 0 0 1 3.72 0Zm7.57 0a1.86 1.86 0 1 1-3.73 0 1.86 1.86 0 0 1 3.73 0ZM8.9 12.9a.55.55 0 0 0-.11.35.76.76 0 0 1-1.51 0c0-.95.67-1.94 1.76-1.94 1.09 0 1.76 1 1.76 1.94H9.3a.55.55 0 0 0-.12-.35c-.06-.07-.1-.08-.13-.08s-.08 0-.14.08Zm4.04 0a.55.55 0 0 0-.12.35h-1.51c0-.95.68-1.94 1.76-1.94 1.1 0 1.77 1 1.77 1.94h-1.51a.55.55 0 0 0-.12-.35c-.06-.07-.11-.08-.14-.08-.02 0-.07 0-.13.08Zm-1.89.79c-.02 0-.07-.01-.13-.08a.55.55 0 0 1-.12-.36h-1.5c0 .95.67 1.95 1.75 1.95 1.1 0 1.77-1 1.77-1.95h-1.51c0 .16-.06.28-.12.36-.06.07-.11.08-.14.08Zm4.04 0c-.03 0-.08-.01-.14-.08a.55.55 0 0 1-.12-.36h-1.5c0 .95.67 1.95 1.76 1.95 1.08 0 1.76-1 1.76-1.95h-1.51c0 .16-.06.28-.12.36-.06.07-.11.08-.13.08Zm1.76-.44c0-.16.05-.28.12-.35.06-.07.1-.08.13-.08s.08 0 .14.08c.06.07.11.2.11.35a.76.76 0 0 0 1.51 0c0-.95-.67-1.94-1.76-1.94-1.09 0-1.76 1-1.76 1.94h1.5Z"
+		clip-rule="evenodd"
+	/>
+	<defs>
+		<radialGradient
+			id="a"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientTransform="matrix(0 31.37 -34.85 0 13.08 -9.02)"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD21E" />
+			<stop offset="1" stop-color="red" />
+		</radialGradient>
+	</defs>
+</svg>

chat-ui/src/lib/components/icons/IconLoading.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<div class={"inline-flex h-8 flex-none items-center gap-1 " + classNames}>
+	<div
+		class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.25s;"
+	/>
+	<div
+		class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.5s;"
+	/>
+	<div
+		class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.75s;"
+	/>
+</div>