Duplicate from huggingchat/chat-ui

Co-authored-by: Eliott Coyac <coyotte508@users.noreply.huggingface.co>

.dockerignore

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

.env

@@ -0,0 +1,83 @@
+# Use .env.local to change these variables
+# DO NOT EDIT THIS FILE WITH SENSITIVE DATA
+
+MONGODB_URL=#your mongodb URL here
+MONGODB_DB_NAME=chat-ui
+MONGODB_DIRECT_CONNECTION=false
+
+COOKIE_NAME=hf-chat
+HF_ACCESS_TOKEN=#hf_<token> from from https://huggingface.co/settings/token
+
+# used to activate search with web functionality. disabled if not defined
+SERPAPI_KEY=#your serpapi key here
+
+# Parameters to enable "Sign in with HF"
+OPENID_CLIENT_ID=
+OPENID_CLIENT_SECRET=
+OPENID_SCOPES="openid profile" # Add "email" for some providers like Google that do not provide preferred_username
+OPENID_PROVIDER_URL=https://huggingface.co # for Google, use https://accounts.google.com
+
+
+# 'name', 'userMessageToken', 'assistantMessageToken' are required
+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|>",
+    "assistantMessageToken": "<|assistant|>",
+    "messageEndToken": "</s>",
+    "preprompt": "Below are a series of dialogues between various people and an AI assistant. The AI tries to be helpful, polite, honest, sophisticated, emotionally aware, and humble-but-knowledgeable. The assistant is happy to help with almost anything, and will do its best to understand exactly what is needed. It also tries to avoid giving false or misleading information, and it caveats when it isn't entirely sure about the right answer. That said, the assistant is practical and really does its best, and doesn't let caution get too much in the way of being useful.\n-----\n",
+    "promptExamples": [
+      {
+        "title": "Write an email from bullet list",
+        "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
+      }, {
+        "title": "Code a snake game",
+        "prompt": "Code a basic snake game in python, give explanations for each step."
+      }, {
+        "title": "Assist in a task",
+        "prompt": "How do I make a delicious lemon cheesecake?"
+      }
+    ],
+    "parameters": {
+      "temperature": 0.9,
+      "top_p": 0.95,
+      "repetition_penalty": 1.2,
+      "top_k": 50,
+      "truncate": 1000,
+      "max_new_tokens": 1024
+    }
+  }
+]`
+OLD_MODELS=`[]`# any removed models, `{ name: string, displayName?: string, id?: string }`
+
+PUBLIC_ORIGIN=#https://huggingface.co
+PUBLIC_SHARE_PREFIX=#https://hf.co/chat
+PUBLIC_GOOGLE_ANALYTICS_ID=#G-XXXXXXXX / Leave empty to disable
+PUBLIC_DEPRECATED_GOOGLE_ANALYTICS_ID=#UA-XXXXXXXX-X / Leave empty to disable
+PUBLIC_ANNOUNCEMENT_BANNERS=`[
+  {
+    "title": "Chat UI is now open sourced on GitHub",
+    "linkTitle": "GitHub repo",
+    "linkHref": "https://github.com/huggingface/chat-ui"
+  }
+]`
+
+PARQUET_EXPORT_DATASET=
+PARQUET_EXPORT_HF_TOKEN=
+PARQUET_EXPORT_SECRET=
+
+
+PUBLIC_APP_NAME=ChatUI # name used as title throughout the app
+PUBLIC_APP_ASSETS=chatui # used to find logos & favicons in static/$PUBLIC_APP_ASSETS
+PUBLIC_APP_COLOR=blue # can be any of tailwind colors: https://tailwindcss.com/docs/customizing-colors#default-color-palette
+PUBLIC_APP_DATA_SHARING=#set to 1 to enable options & text regarding data sharing
+PUBLIC_APP_DISCLAIMER=#set to 1 to show a disclaimer on login page
+
+# PUBLIC_APP_NAME=HuggingChat
+# PUBLIC_APP_ASSETS=huggingchat
+# PUBLIC_APP_COLOR=yellow
+# PUBLIC_APP_DATA_SHARING=1
+# PUBLIC_APP_DISCLAIMER=1

.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

.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,
+	},
+};

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

@@ -0,0 +1,49 @@
+name: Lint and test
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: "npm"
+      - run: |
+          npm install ci
+      - name: "Checking lint/format errors"
+        run: |
+          npm run lint
+      - name: "Checking type errors"
+        run: |
+          npm run check
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    services:
+      mongodb:
+        image: mongo:6.0.5
+        ports:
+          - 27017:27017
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: "npm"
+      - run: |
+          npm ci
+      - name: "Tests"
+        run: |
+          npm run test

.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-*

.npmrc

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

.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

.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" } }]
+}

.vscode/settings.json

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

Dockerfile

@@ -0,0 +1,31 @@
+# read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+FROM node:19 as builder-production
+
+WORKDIR /app
+
+COPY --link --chown=1000 package-lock.json package.json ./
+RUN --mount=type=cache,target=/app/.npm \
+        npm set cache /app/.npm && \
+        npm ci --omit=dev
+
+FROM builder-production as builder
+
+RUN --mount=type=cache,target=/app/.npm \
+        npm set cache /app/.npm && \
+        npm ci
+
+COPY --link --chown=1000 . .
+
+RUN --mount=type=secret,id=DOTENV_LOCAL,dst=.env.local \
+    npm run build
+
+FROM node:19-slim
+
+RUN npm install -g pm2
+
+COPY --from=builder-production /app/node_modules /app/node_modules
+COPY --link --chown=1000 package.json /app/package.json
+COPY --from=builder /app/build /app/build
+
+CMD pm2 start /app/build/index.js -i $CPU_CORES --no-daemon

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.

PRIVACY.md

@@ -0,0 +1,38 @@
+## Privacy
+
+> Last updated: May 15, 2023
+
+Starting with `v0.2` of HuggingChat, users are authenticated through their HF user account.
+
+By default, your conversations are shared with the model's authors (for the `v0.2` 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 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), 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, 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/ ❤️
+
+## 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)
+
+We welcome any feedback on this app: please participate to the public discussion at https://huggingface.co/spaces/huggingchat/chat-ui/discussions
+
+<a target="_blank" href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"><img src="https://huggingface.co/datasets/huggingface/badges/raw/main/open-a-discussion-xl.svg" title="open a discussion"></a>
+
+## Coming soon
+
+- User setting to share conversations with model authors (done ✅)
+- LLM watermarking

README.md

@@ -0,0 +1,137 @@
+---
+title: chat-ui
+emoji: 🔥
+colorFrom: purple
+colorTo: purple
+sdk: docker
+pinned: false
+license: apache-2.0
+base_path: /chat
+app_port: 3000
+duplicated_from: huggingchat/chat-ui
+---
+
+# Chat UI
+
+![Chat UI repository thumbnail](https://huggingface.co/datasets/huggingface/documentation-images/raw/f038917dd40d711a72d654ab1abfc03ae9f177e6/chat-ui-repo-thumbnail.svg)
+
+A chat interface using open source models, eg OpenAssistant. It is a SvelteKit app and it powers the [HuggingChat app on hf.co/chat](https://huggingface.co/chat).
+
+1. [Setup](#setup)
+2. [Launch](#launch)
+3. [Extra parameters](#extra-parameters)
+4. [Deploying to a HF Space](#deploying-to-a-hf-space)
+5. [Building](#building)
+
+## 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 the 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, using the remote inference endpoints. 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
+```
+
+## 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.
+
+### 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 :
+
+```json
+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|>",
+    "assistantMessageToken": "<|assistant|>",
+    "messageEndToken": "</s>",
+    "preprompt": "Below are a series of dialogues between various people and an AI assistant. The AI tries to be helpful, polite, honest, sophisticated, emotionally aware, and humble-but-knowledgeable. The assistant is happy to help with almost anything, and will do its best to understand exactly what is needed. It also tries to avoid giving false or misleading information, and it caveats when it isn't entirely sure about the right answer. That said, the assistant is practical and really does its best, and doesn't let caution get too much in the way of being useful.\n-----\n",
+    "promptExamples": [
+      {
+        "title": "Write an email from bullet list",
+        "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
+      }, {
+        "title": "Code a snake game",
+        "prompt": "Code a basic snake game in python, give explanations for each step."
+      }, {
+        "title": "Assist in a task",
+        "prompt": "How do I make a delicious lemon cheesecake?"
+      }
+    ],
+    "parameters": {
+      "temperature": 0.9,
+      "top_p": 0.95,
+      "repetition_penalty": 1.2,
+      "top_k": 50,
+      "truncate": 1000,
+      "max_new_tokens": 1024
+    }
+  }
+]`
+```
+
+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.
+
+### Running your own models
+
+If you want to, you can even run your own models, by having a look at our endpoint project, [text-generation-inference](https://github.com/huggingface/text-generation-inference). You can then add your own endpoint to the `MODELS` variable in `.env.local` and it will be picked up as well.
+
+## Deploying to a HF Space
+
+Create a `DOTENV_LOCAL` secret to your HF space with the content of your .env.local, and they will be picked up automatically when you run.
+
+## 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.

package.json

@@ -0,0 +1,61 @@
+{
+	"name": "chat-ui",
+	"version": "0.3.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",
+		"@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",
+		"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.0.0",
+		"vitest": "^0.31.0"
+	},
+	"type": "module",
+	"dependencies": {
+		"@huggingface/hub": "^0.5.1",
+		"@huggingface/inference": "^2.2.0",
+		"autoprefixer": "^10.4.14",
+		"date-fns": "^2.29.3",
+		"dotenv": "^16.0.3",
+		"highlight.js": "^11.7.0",
+		"jsdom": "^22.0.0",
+		"marked": "^4.3.0",
+		"mongodb": "^5.3.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",
+		"zod": "^3.21.4"
+	}
+}

postcss.config.js

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

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 {};

src/app.html

@@ -0,0 +1,71 @@
+<!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>
+
+		<!-- Google Tag Manager -->
+		<script>
+			if (window.gaId) {
+				const script = document.createElement("script");
+				script.src = "https://www.googletagmanager.com/gtag/js?id=" + window.gaId;
+				script.async = true;
+				document.head.appendChild(script);
+
+				window.dataLayer = window.dataLayer || [];
+				function gtag() {
+					dataLayer.push(arguments);
+				}
+				gtag("js", new Date());
+				/// ^ See https://developers.google.com/tag-platform/gtagjs/install
+				gtag("config", window.gaId);
+				gtag("consent", "default", { ad_storage: "denied", analytics_storage: "denied" });
+				/// ^ See https://developers.google.com/tag-platform/gtagjs/reference#consent
+				/// TODO: ask the user for their consent and update this with gtag('consent', 'update')
+			}
+		</script>
+
+		<!-- Google Analytics v3 (deprecated on 1 July 2023) -->
+		<script>
+			if (window.gaIdDeprecated) {
+				(function (i, s, o, g, r, a, m) {
+					i["GoogleAnalyticsObject"] = r;
+					(i[r] =
+						i[r] ||
+						function () {
+							(i[r].q = i[r].q || []).push(arguments);
+						}),
+						(i[r].l = 1 * new Date());
+					(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+					a.async = 1;
+					a.src = g;
+					m.parentNode.insertBefore(a, m);
+				})(
+					window,
+					document,
+					"script",
+					"https://www.google-analytics.com/analytics.js",
+					"ganalytics"
+				);
+				ganalytics("create", window.gaIdDeprecated, "auto");
+				ganalytics("send", "pageview");
+			}
+		</script>
+	</body>
+</html>

src/hooks.server.ts

@@ -0,0 +1,109 @@
+import { COOKIE_NAME } 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) {
+			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;
+};

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);
+		},
+	};
+};

src/lib/buildPrompt.ts

@@ -0,0 +1,57 @@
+import type { BackendModel } from "./server/models";
+import type { Message } from "./types/Message";
+import { collections } from "$lib/server/database";
+import { ObjectId } from "mongodb";
+/**
+ * Convert [{user: "assistant", content: "hi"}, {user: "user", content: "hello"}] to:
+ *
+ * <|assistant|>hi<|endoftext|><|prompter|>hello<|endoftext|><|assistant|>
+ */
+
+export async function buildPrompt(
+	messages: Pick<Message, "from" | "content">[],
+	model: BackendModel,
+	webSearchId?: string
+): Promise<string> {
+	const prompt =
+		messages
+			.map(
+				(m) =>
+					(m.from === "user"
+						? model.userMessageToken + m.content
+						: model.assistantMessageToken + m.content) +
+					(model.messageEndToken
+						? m.content.endsWith(model.messageEndToken)
+							? ""
+							: model.messageEndToken
+						: "")
+			)
+			.join("") + model.assistantMessageToken;
+
+	let webPrompt = "";
+
+	if (webSearchId) {
+		const webSearch = await collections.webSearches.findOne({
+			_id: new ObjectId(webSearchId),
+		});
+
+		if (!webSearch) throw new Error("Web search not found");
+
+		if (webSearch.summary) {
+			webPrompt =
+				model.assistantMessageToken +
+				`The following context was found while searching the internet: ${webSearch.summary}` +
+				model.messageEndToken;
+		}
+	}
+	const finalPrompt =
+		model.preprompt +
+		webPrompt +
+		prompt
+			.split(" ")
+			.slice(-(model.parameters?.truncate ?? 0))
+			.join(" ");
+
+	// Not super precise, but it's truncated in the model's backend anyway
+	return finalPrompt;
+}

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>

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>

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>

src/lib/components/LoginModal.svelte

@@ -0,0 +1,72 @@
+<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>
+		<p class="px-4 text-lg font-semibold leading-snug text-gray-800 sm:px-12">
+			This application is for demonstration purposes only.
+		</p>
+		<p class="text-base text-gray-800">
+			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>
+				<p class="mt-2 px-2 text-sm text-gray-500">to start chatting right away</p>
+			{: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>

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>

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="-mt-10 overflow-hidden rounded-2xl bg-white shadow-2xl outline-none md:-mt-20 {width}"
+		>
+			<slot />
+		</div>
+	</div>
+</Portal>

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">;
+
+	export let variant: "light" | "dark" = "light";
+</script>
+
+<div
+	class="flex items-center gap-5 rounded-xl bg-gray-100 px-3 py-2 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="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}
+		<a
+			href="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>

src/lib/components/ModelsModal.svelte

@@ -0,0 +1,80 @@
+<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";
+
+	export let settings: LayoutData["settings"];
+	export let models: Array<Model>;
+
+	let selectedModelId = settings.activeModel;
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+</script>
+
+<Modal width="max-w-lg" on:close>
+	<form
+		action="{base}/settings"
+		method="post"
+		use:enhance={() => {
+			dispatch("close");
+		}}
+		class="flex w-full flex-col gap-5 p-6"
+	>
+		{#each Object.entries(settings).filter(([k]) => k !== "activeModel") as [key, val]}
+			<input type="hidden" name={key} value={val} />
+		{/each}
+		<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}
+				<div
+					class="rounded-xl border border-gray-100 {model.id === selectedModelId
+						? 'bg-gradient-to-r from-primary-200/40 via-primary-500/10'
+						: ''}"
+				>
+					<label class="group flex cursor-pointer p-3" on:change aria-label={model.displayName}>
+						<input
+							type="radio"
+							class="sr-only"
+							name="activeModel"
+							value={model.id}
+							bind:group={selectedModelId}
+						/>
+						<span>
+							<span class="text-md block font-semibold leading-tight text-gray-800"
+								>{model.displayName}</span
+							>
+							{#if model.description}
+								<span class="text-xs text-[#9FA8B5]">{model.description}</span>
+							{/if}
+						</span>
+						<CarbonCheckmark
+							class="-mr-1 -mt-1 ml-auto shrink-0 text-xl {model.id === selectedModelId
+								? 'text-primary-400'
+								: 'text-transparent group-hover:text-gray-200'}"
+						/>
+					</label>
+					<ModelCardMetadata {model} />
+				</div>
+			{/each}
+		</div>
+		<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-colors hover:ring"
+		>
+			Apply
+		</button>
+	</form>
+</Modal>

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"> Delete </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="Confirm delete action"
+			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="Cancel delete action"
+			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="Edit conversation title"
+			on:click|preventDefault={() => {
+				const newTitle = prompt("Edit this conversation title:", 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="Delete conversation"
+			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>

src/lib/components/NavMenu.svelte

@@ -0,0 +1,94 @@
+<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 user: LayoutData["user"];
+</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"
+	>
+		New Chat
+	</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}
+	<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"
+	>
+		Theme
+	</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"
+	>
+		Settings
+	</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>

src/lib/components/OpenWebSearchResults.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import type { WebSearchMessage } from "$lib/types/WebSearch";
+	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: WebSearchMessage[] = [];
+
+	let detailsOpen: boolean;
+	let error: boolean;
+	$: error = webSearchMessages.some((message) => message.type === "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}
+			>Web search
+		</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.type === "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.type === "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>

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>

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}

src/lib/components/SettingsModal.svelte

@@ -0,0 +1,111 @@
+<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 type { Settings } from "$lib/types/Settings";
+	import { enhance } from "$app/forms";
+	import { base } from "$app/paths";
+	import { PUBLIC_APP_DATA_SHARING } from "$env/static/public";
+
+	export let settings: Pick<Settings, "shareConversationsWithModelAuthors">;
+
+	let shareConversationsWithModelAuthors = settings.shareConversationsWithModelAuthors;
+	let isConfirmingDeletion = false;
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+</script>
+
+<Modal on:close>
+	<div class="flex w-full flex-col gap-5 p-6">
+		<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
+			<h2>Settings</h2>
+			<button type="button" class="group" on:click={() => dispatch("close")}>
+				<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
+			</button>
+		</div>
+		<form
+			class="flex flex-col gap-5"
+			use:enhance={() => {
+				dispatch("close");
+			}}
+			method="post"
+			action="{base}/settings"
+		>
+			{#if PUBLIC_APP_DATA_SHARING}
+				<label class="flex cursor-pointer select-none items-center gap-2 text-gray-500">
+					{#each Object.entries(settings).filter(([k]) => k !== "shareConversationsWithModelAuthors") as [key, val]}
+						<input type="hidden" name={key} value={val} />
+					{/each}
+					<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>
+				<p class="text-gray-800">
+					Read more about this model's authors,
+					<a
+						href="https://open-assistant.io/"
+						target="_blank"
+						rel="noreferrer"
+						class="underline decoration-gray-300 hover:decoration-gray-700">Open Assistant</a
+					>.
+				</p>
+			{/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">
+					Delete all conversations
+				</button>
+			</form>
+			<button
+				type="submit"
+				class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring"
+			>
+				Apply
+			</button>
+		</form>
+
+		{#if isConfirmingDeletion}
+			<Modal on:close={() => (isConfirmingDeletion = false)}>
+				<form
+					use:enhance={() => {
+						dispatch("close");
+					}}
+					method="post"
+					action="{base}/conversations?/delete"
+					class="flex w-full flex-col gap-5 p-6"
+				>
+					<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
+						<h2>Are you sure?</h2>
+						<button type="button" class="group" on:click={() => (isConfirmingDeletion = false)}>
+							<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
+						</button>
+					</div>
+					<p class="text-gray-800">
+						This action will delete all your conversations. This cannot be undone.
+					</p>
+					<button
+						type="submit"
+						class="mt-2 rounded-full bg-red-700 px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring"
+					>
+						Confirm deletion
+					</button>
+				</form>
+			</Modal>
+		{/if}
+	</div>
+</Modal>

src/lib/components/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" /> Stop generating
+</button>

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>

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>

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>

src/lib/components/WebSearchToggle.svelte

@@ -0,0 +1,27 @@
+<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">Search web</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">
+				When enabled, the model will try to complement its answer with information queried from the
+				web.
+			</p>
+		</div>
+	</div>
+</div>

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>

src/lib/components/chat/ChatIntroduction.svelte

@@ -0,0 +1,95 @@
+<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">
+	<div class="lg:col-span-1">
+		<div>
+			<div class="mb-3 flex items-center text-2xl font-semibold">
+				<Logo classNames="mr-1 flex-none" />
+				{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 dark:border-gray-700/60 dark:bg-gray-800"
+				>
+					v{PUBLIC_VERSION}
+				</div>
+			</div>
+			<p class="text-base text-gray-600 dark:text-gray-400">
+				Making the community's best AI chat models available to everyone.
+			</p>
+		</div>
+	</div>
+	<div class="lg:col-span-2 lg:pl-24">
+		{#each announcementBanners as banner}
+			<AnnouncementBanner classNames="mb-4" title={banner.title}>
+				<a
+					target="_blank"
+					href={banner.linkHref}
+					class="mr-2 flex items-center underline hover:no-underline"
+					><CarbonArrowUpRight class="mr-1.5 text-xs" /> {banner.linkTitle}</a
+				>
+			</AnnouncementBanner>
+		{/each}
+
+		{#if isModelsModalOpen}
+			<ModelsModal {settings} {models} on:close={() => (isModelsModalOpen = false)} />
+		{/if}
+		<div class="overflow-hidden rounded-xl border dark:border-gray-800">
+			<div class="flex p-3">
+				<div>
+					<div class="text-sm text-gray-600 dark:text-gray-400">Current Model</div>
+					<div class="font-semibold">{currentModel.displayName}</div>
+				</div>
+				{#if models.length > 1}
+					<button
+						type="button"
+						on:click={() => (isModelsModalOpen = true)}
+						class="btn ml-auto flex h-7 w-7 self-start rounded-full bg-gray-100 p-1 text-xs hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-600"
+						><IconChevron /></button
+					>
+				{/if}
+			</div>
+			<ModelCardMetadata variant="dark" model={currentModel} />
+		</div>
+	</div>
+	{#if currentModelMetadata.promptExamples}
+		<div class="lg:col-span-3 lg:mt-12">
+			<p class="mb-3 text-gray-600 dark:text-gray-300">Examples</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>

src/lib/components/chat/ChatMessage.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+	import { marked } from "marked";
+	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 type { WebSearchMessage } from "$lib/types/WebSearch";
+
+	import OpenWebSearchResults from "../OpenWebSearchResults.svelte";
+
+	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: WebSearchMessage[] = [];
+
+	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>`;
+	};
+
+	const options: marked.MarkedOptions = {
+		...marked.getDefaults(),
+		gfm: true,
+		breaks: true,
+		renderer,
+	};
+
+	$: 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);
+		}
+	});
+
+	$: downloadLink =
+		message.from === "user" ? `${$page.url.pathname}/message/${message.id}/prompt` : undefined;
+
+	let webSearchIsDone = true;
+
+	$: webSearchIsDone =
+		webSearchMessages.length > 0 &&
+		webSearchMessages[webSearchMessages.length - 1].type === "result";
+</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 webSearchMessages && webSearchMessages.length > 0}
+				<OpenWebSearchResults
+					classNames={tokens.length ? "mb-3.5" : ""}
+					{webSearchMessages}
+					loading={!webSearchIsDone}
+				/>
+			{/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(token.raw, options)}
+					{/if}
+				{/each}
+			</div>
+		</div>
+		{#if isAuthor && !loading && message.content}
+			<div
+				class="absolute bottom-1 right-0 flex max-md:transition-all md:bottom-0 md:group-hover:visible md:group-hover:opacity-100
+					{message.score ? 'visible opacity-100' : 'invisible max-md:-translate-y-4 max-md:opacity-0'}
+					{isTapped ? 'max-md:visible max-md:translate-y-0 max-md:opacity-100' : ''}
+				"
+			>
+				<button
+					class="btn rounded-sm p-1 text-sm text-gray-400 focus:ring-0 hover:text-gray-500 dark:text-gray-400 dark:hover:text-gray-300
+					{message.score && message.score > 0
+						? 'text-green-500 hover:text-green-500 dark:text-green-400 hover:dark:text-green-400'
+						: ''}"
+					title={message.score === 1 ? "Remove +1" : "+1"}
+					type="button"
+					on:click={() => dispatch("vote", { score: message.score === 1 ? 0 : 1, id: message.id })}
+				>
+					<CarbonThumbsUp class="h-[1.14em] w-[1.14em]" />
+				</button>
+				<button
+					class="btn rounded-sm p-1 text-sm text-gray-400 focus:ring-0 hover:text-gray-500 dark:text-gray-400 dark:hover:text-gray-300
+					{message.score && message.score < 0
+						? 'text-red-500 hover:text-red-500 dark:text-red-400 hover:dark:text-red-400'
+						: ''}"
+					title={message.score === -1 ? "Remove -1" : "-1"}
+					type="button"
+					on:click={() =>
+						dispatch("vote", { score: message.score === -1 ? 0 : -1, id: message.id })}
+				>
+					<CarbonThumbsDown class="h-[1.14em] w-[1.14em]" />
+				</button>
+			</div>
+		{/if}
+	</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>
+		{#if !loading}
+			<div class="absolute right-0 top-3.5 flex gap-2 lg:-right-2">
+				{#if downloadLink}
+					<a
+						class="rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden"
+						title="Download prompt and parameters"
+						type="button"
+						target="_blank"
+						href={downloadLink}
+					>
+						<CarbonDownload />
+					</a>
+				{/if}
+				{#if !readOnly}
+					<button
+						class="cursor-pointer rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden lg:-right-2"
+						title="Retry"
+						type="button"
+						on:click={() => dispatch("retry", { content: message.content, id: message.id })}
+					>
+						<CarbonRotate360 />
+					</button>
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/if}

src/lib/components/chat/ChatMessages.svelte

@@ -0,0 +1,83 @@
+<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 { WebSearchMessage } from "$lib/types/WebSearch";
+
+	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;
+	export let searches: Record<string, WebSearchMessage[]>;
+
+	let webSearchArray: Array<WebSearchMessage[] | undefined> = [];
+	let chatContainer: HTMLElement;
+
+	export let webSearchMessages: WebSearchMessage[] = [];
+
+	async function scrollToBottom() {
+		await tick();
+		chatContainer.scrollTop = chatContainer.scrollHeight;
+	}
+
+	// If last message is from user, scroll to bottom
+	$: if (messages[messages.length - 1]?.from === "user") {
+		scrollToBottom();
+	}
+
+	$: messages,
+		(webSearchArray = messages.map((message, idx) => {
+			if (message.webSearchId) {
+				return searches[message.webSearchId] ?? [];
+			} else if (idx === messages.length - 1) {
+				return webSearchMessages;
+			} else {
+				return [];
+			}
+		}));
+</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={webSearchArray[i]}
+				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>

src/lib/components/chat/ChatWindow.svelte

@@ -0,0 +1,146 @@
+<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 type { WebSearchMessage } from "$lib/types/WebSearch";
+	import LoginModal from "../LoginModal.svelte";
+
+	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: WebSearchMessage[] = [];
+	export let searches: Record<string, WebSearchMessage[]> = {};
+
+	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}
+		{searches}
+		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="Ask anything"
+					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 class="mt-2 flex justify-between self-stretch px-1 text-xs text-gray-400/90 max-sm:gap-2">
+			<p>
+				Model: <a
+					href="https://huggingface.co/{currentModel.name}"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:underline">{currentModel.displayName}</a
+				> <span class="max-sm:hidden">·</span><br class="sm:hidden" /> Generated content may be inaccurate
+				or false.
+			</p>
+			{#if messages.length}
+				<button
+					class="flex flex-none items-center hover:text-gray-400 hover:underline max-sm:rounded-lg max-sm:bg-gray-50 max-sm:px-2.5 dark:max-sm:bg-gray-800"
+					type="button"
+					on:click={() => dispatch("share")}
+				>
+					<CarbonExport class="text-[.6rem] sm:mr-1.5 sm:text-primary-500" />
+					<div class="max-sm:hidden">Share this conversation</div>
+				</button>
+			{/if}
+		</div>
+	</div>
+</div>

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>

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>

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>

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 animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.25s;"
+	/>
+	<div
+		class="h-1 w-1 animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.5s;"
+	/>
+	<div
+		class="h-1 w-1 animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.75s;"
+	/>
+</div>