test

Dockerfile

@@ -0,0 +1,32 @@
+# syntax=docker/dockerfile:1
+# read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+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,201 @@
+                                 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 2023, Mithril Security SAS
+
+   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,18 @@
+# About & Privacy - BlindChat
+
+## Privacy
+
+<em>Last updated: September 15, 2023</em>
+
+No conversations are recorded. All computation happens on your device, and conversations are stored locally in the browser’s cache.
+
+We don’t and never will see your data, so we cannot train on your data. Your data remains yours.
+
+## About
+
+BlindChat is an open-source project to provide fully in-browser and private Conversational AI.
+
+It is currently developed and maintained by [Mithril Security](https://www.mithrilsecurity.io/), a startup aiming to make AI more private.
+
+You can find more information on our [Github](https://github.com/mithril-security/blind_chat/), join us on our [Discord](https://discord.com/invite/TxEHagpWd4), or directly [contact us](mailto:[email protected]).
+    

README.md

@@ -1,10 +1,233 @@
----
-title: Blind Chat
-emoji: 📚
-colorFrom: gray
-colorTo: pink
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<a name="readme-top"></a>
+<br />
+
+<div align="center">
+  <a href="https://github.com/mithril-security/blind_chat">
+    <img src="https://github.com/mithril-security/blindai/raw/main/docs/assets/logo.png" alt="Logo" width="80" height="80">
+  </a>
+
+<h1 align="center">BlindChat</h1>
+
+[![Website][website-shield]][website-url]
+[![Blog][blog-shield]][blog-url]
+
+</div>
+
+ <p align="center">
+    <b>Open-source and privacy-by-design alternative to ChatGPT</b><br /><br />
+   <!-- 
+    <a href="https://blindllama.mithrilsecurity.io/en/latest"><strong>Explore the docs »</strong></a>
+    <br />
+    <br />
+    <a href="https://aicert.mithrilsecurity.io/en/latest/docs/getting-started/quick-tour/">Get started</a>
+    ·
+    <a href="https://github.com/mithril-security/aicert/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/mithril-security/aicert/issues">Request Feature</a>
+  </p>
+</div>
+
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li><a href="#-about-the-project">About the project</a></li>
+    <li><a href="#-roadmap">Roadmap</a></li>
+    <li><a href="#-design">Design</a></li>
+    <li><a href="#-comparisons">Comparisons</a></li>
+    <li><a href="#-get-in-touch">Contact</a></li>
+  </ol>
+</details>
+
+## 📜 About the project
+
+### What is BlindChat?
+
+🐱 **BlindChat** is an open-source project to develop **the first fully in-browser and private Conversational AI**.
+
+Most conversational AI solutions today require users to send their data to AI providers who serve AI models as a Service. This poses privacy issues for users who **lose control over their data**.
+
+⚠️ Because data is a key asset to improve LLMs, **many solutions more or less implicitly fine-tune users’ data to improve their model**.
+
+This creates privacy risks for users as LLMs might learn their data by heart. Carlini et al. [1] showed that LLMs such as GPT-J could learn at least 1% of their training set by heart.
+
+🔐 BlindChat solves this issue as users have guarantees that their data remains private at all times and have full control over it, either by doing local inference or using secure isolated environments called secure enclaves.
+
+### Local conversations
+
+### Demo
+
+👩‍💻 You can try out BlindChat [here](https://chat.mithrilsecurity.io)! We enable users to interact with a [Flan-T5 model](https://huggingface.co/docs/transformers/model_doc/flan-t5) locally through their browser: the model is pulled and used for local inference using [transformers.js](https://huggingface.co/docs/transformers.js/index).
+
+### Who is BlindChat for?
+
+BlindChat aims to serve two users:
+
+- **End users:** We want to provide privacy-by-design alternatives to change the current status quo. Most users today are forced to give up their data to leverage AI services, and opaque or inexistent privacy controls are the norm.
+
+- **Developers:** We want to help developers easily serve privacy-by-design Conversational AI, which is why we are focused on making BlindChat easy to customize and deploy.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## Roadmap
+
+You can check out our progress in more detail on our [official roadmap](https://github.com/orgs/mithril-security/projects/2/views/4). We highlight feature on which we would love help from contributors in our [help wanted section](https://github.com/orgs/mithril-security/projects/2/views/3).
+
+Roadmap quick summary:
+
+- [x] Revamping of Hugging Face Chat UI to make it entirely client-side (removal of telemetry, data sharing, server-side history of conversations, server-side inference, etc.)
+- [x] Integration of privacy-by-design inference with local model
+- [x] Local caching of conversations
+- [ ] Integration of more advanced local models (e.g. [phi-1.5](https://huggingface.co/microsoft/phi-1_5)) and more advanced inference (e.g. [Web LLM](https://github.com/mlc-ai/web-llm))
+- [ ] Integration of privacy-by-design inference with remote enclaves using BlindLlama for powerful models such as [Llama 2 70b](https://huggingface.co/meta-llama/Llama-2-70b-chat-hf) & [Falcon 180b](https://huggingface.co/tiiuae/falcon-180B) ⌛
+- [ ] Integration with [LlamaIndex TS](https://github.com/run-llama/LlamaIndexTS) for local Retrieval Augmented Generation (RAG) ⌛
+- [ ] Internet search ⌛
+- [ ] Connectors to pull data from different sources ⌛
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🔧 Setup
+
+Before going any further, please make sure you have [Node JS 18.0](https://nodejs.org/en) installed on your system.
+
+To run the chat user interface in dev/debug mode for testing purposes, execute the following commands in the root folder of your BlindChat code repo.
+
+```bash
+npm install
+npm run dev
+```
+
+This will install the dependencies of the project and launch the dev environment.
+
+The chat can be deployed in production mode with the following commands:
+
+```bash
+npm run build
+node build
+```
+
+The chat-ui uses server-side rendering, so building the pages before deploying them is mandatory.
+
+> ⚠️ Note that the command `node build` will run the server in `HTTP mode`.
+> If you wish to add TLS, please use a proxy server, such as NGINX.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🧑‍🎨 Design
+
+### Principles
+
+🤗 **BlindChat** is a fork from [**Hugging Face Chat UI project**](https://huggingface.co/spaces/huggingchat/chat-ui).
+
+We modified the code so that various tasks usually handled by the server are done by the browser. This is to **ensure privacy** as we do not want to send user data to the server/AI provider as our solution **places the AI provider outside of our trust model**.
+
+### Philosophy
+
+To make AI transparent and confidential, (almost) all of the logic is transported from the server-side to the client-side browser.
+
+This ensures end-users’ privacy and gives them control over what happens to their data. For instance, the inference can be done locally using transformers.js, and conversations can be stored in the user's browser chat. This means the operators of the AI service are blind to the user's data, hence the name BlindChat!
+
+Data is only sent server-side where our remote enclave mode is selected. With this mode, the server is deployed within a hardened and verifiable environment called an enclave which provides end-to-end protection and prevents external access. Not even the AI provider admins operating the enclave can read users’ data.
+
+Note that while our hardened environments don’t fit in with all definitions of an “enclave”, we will use it for convenience’s sake here to describe an environment that allows a server to process data without exposing its contents to service providers.
+
+### Private inference
+
+We offer two modes to ensure users’ data remains private:
+
+#### On-device inference
+
+![on-device-mode-dark](./assets/on-device-dark.png#gh-dark-mode-only)
+![on-device-mode-light](./assets/on-device-light.png#gh-light-mode-only)
+
+With the on-device mode, the model is sent locally to the users’ browser, and **inference is performed on-device**.
+
+This mode is **generally suitable for smaller models** as large models may require too much bandwidth and computational resources.
+
+#### Confidential and transparent AI APis with enclaves
+
+![zero-trust-mode-dark](./assets/zero-trust-dark.png#gh-dark-mode-only)
+![zero-trust-mode-light](./assets/zero-trust-light.png#gh-light-mode-only)
+
+With the Zero-trust AI APIs mode, data is sent to a **secure environment** called an **enclave** containing the model for remote inference.
+
+These environments provide **end-to-end protection** through robust **isolation and verification**. User data is **never accessible in clear** to the AI provider admins.
+
+> You can find out more about Confidential and transparent AI APIs with enclaves in the [guide](https://blindllama.mithrilsecurity.io/en/latest/docs/concepts/hardened-systems/) we provide with our [BlindLlama project](https://blindllama.mithrilsecurity.io/en/latest/), which is the underlying technology for this mode of BlindChat.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+### Architecture
+
+The project currently has three major components:
+
+- **UI:** This is the Chat interface that the end user interacts with. It contains the Chat box, and will contain plugins and other widgets for more complex interaction, such as loading documents or enabling voice commands.
+- **Private LLM:** Developers can customize which LLM they choose to answer users’ queries. Current options are either local models or remote enclaves to ensure transparent and private inference.
+- **Storage:** Developers can customize what kind of storage is used to save information such as conversation history and, in the future, embeddings for RAG.
+
+**\*Coming soon:**
+
+- **Connectors:** Connectors will allows users to pull documents from various sources, e.g. PDF upload, and share outputs
+- **Integration with Llama Index TS:** This will allow users to index documents with local models, store them in local storage and use them for RAG (query the LLMs based on the information contained in their documents).
+
+## 📊 Comparisons
+
+|                      | Client-side bandwidth requirements | Client-side computing requirements | Model capabilities | Privacy |
+| -------------------- | ---------------------------------- | ---------------------------------- | ------------------ | ------- |
+| On-device prediction | High                               | High                               | Low                | High    |
+| Regular AI APIs      | Low                                | Low                                | High               | Low     |
+| Zero-trust AI APIs   | Low                                | Low                                | High               | High    |
+
+**On-device predictions and Confidential AI APIs both provide privacy** contrary to most existing Conversational AI solutions that expose data to privacy risks.
+
+**On-device prediction** has the advantage of providing the highest level of privacy as data does not leave the device but requires downloading models that are several hundreds of MBs to several GBs and require heavy memory and computing resources. For many users, this option will not be possible with larger, higher-performing models due to these device requirements.
+
+**Confidential AI APIs** are deployed remotely, meaning the size of models is not restricted by the specifications of user devices. Users are able to query large models while still having robust privacy guarantees.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 📇 Get in touch
+
+We would love to hear your feedback or suggestions, here are the ways you can reach us:
+
+- Found a bug? [Open an issue!](https://github.com/mithril-security/blind_chat/issues)
+- Got a suggestion? [Join our Discord community and let us know!](https://discord.com/invite/TxEHagpWd4)
+- Set up [a one-on-one meeting](https://www.mithrilsecurity.io/contact) with a member of our team
+
+Want to hear more about our work on privacy in the field AI?
+
+- Check out our [blog](https://blog.mithrilsecurity.io/)
+- Subscribe to our newsletter [here](https://blog.mithrilsecurity.io/)
+
+Thank you for your support!
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## References
+
+[1] Carlini, N., Ippolito, D., Jagielski, M., Lee, K., Tramer, F., & Zhang, C. (2022). Quantifying Memorization Across Neural Language Models. ArXiv. /abs/2202.07646
+
+<!-- MARKDOWN LINKS & IMAGES -->
+
+[project-url]: https://github.com/mithril-security/blind_chat
+[twitter-url]: https://twitter.com/MithrilSecurity
+[contact-url]: https://www.mithrilsecurity.io/contact
+[docs-shield]: https://img.shields.io/badge/Docs-000000?style=for-the-badge&colorB=555
+[docs-url]: https://blindllama.mithrilsecurity.io/en/latest/
+[license-shield]: https://img.shields.io/github/license/mithril-security/aicert.svg?style=for-the-badge
+[contact]: https://img.shields.io/badge/Contact_us-000000?style=for-the-badge&colorB=555
+[project]: https://img.shields.io/badge/Project-000000?style=for-the-badge&colorB=555
+[linkedin-shield]: https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white&colorB=555
+[reddit-shield]: https://img.shields.io/badge/reddit-0077B5?style=for-the-badge&logo=reddit&logoColor=white&colorB=FF4500
+[twitter]: https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white
+[fb-shield]: https://img.shields.io/badge/Facebook-0077B5?style=for-the-badge&logo=facebook&logoColor=white&colorB=3b5998
+[linkedin-url]: https://www.linkedin.com/company/mithril-security-company/
+[website-url]: https://www.mithrilsecurity.io
+[docs-url]: https://blindllama.mithrilsecurity.io/en/latest/
+[website-shield]: https://img.shields.io/badge/website-000000?style=for-the-badge&colorB=555
+[blog-url]: https://blog.mithrilsecurity.io/
+[blog-shield]: https://img.shields.io/badge/Blog-000?style=for-the-badge&logo=ghost&logoColor=yellow&colorB=555
+[facebook-share]: https://www.facebook.com/sharer/sharer.php?u=https%3A//github.com/mithril-security/blind_chat
+[twitter-share]: https://twitter.com/intent/tweet?url=https://github.com/mithril-security/blind_chat&text=Check%20out%20the%20open-source%20project%20to%20build%20a%20private%20Conversational%20AI%20app%20running%20fully%20in-browser
+[linkedin-share]: https://www.linkedin.com/sharing/share-offsite/?url=https://github.com/mithril-security/blind_chat
+[reddit-share]: https://www.reddit.com/submit?url=github.com%2Fmithril-security%2Fblind_chat&title=Private%20in-browser%20Conversational%20AI%20with%20BlindChat

package.json

@@ -0,0 +1,67 @@
+{
+	"name": "chat-ui",
+	"version": "0.0.1",
+	"private": true,
+	"packageManager": "[email protected]",
+	"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.3.9",
+		"vitest": "^0.31.0"
+	},
+	"type": "module",
+	"dependencies": {
+		"@huggingface/hub": "^0.5.1",
+		"@huggingface/inference": "^2.2.0",
+		"@xenova/transformers": "^2.0.0",
+		"autoprefixer": "^10.4.14",
+		"aws4fetch": "^1.0.17",
+		"date-fns": "^2.29.3",
+		"dexie": "^3.2.4",
+		"dotenv": "^16.0.3",
+		"handlebars": "^4.7.8",
+		"highlight.js": "^11.7.0",
+		"jsdom": "^22.0.0",
+		"marked": "^4.3.0",
+		"nanoid": "^4.0.2",
+		"openid-client": "^5.4.2",
+		"parquetjs": "^0.11.2",
+		"postcss": "^8.4.21",
+		"save": "^2.9.0",
+		"serpapi": "^1.1.1",
+		"svelte-device-info": "^1.0.0",
+		"tailwind-scrollbar": "^3.0.0",
+		"tailwindcss": "^3.3.1",
+		"uuid": "^9.0.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,72 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
+	<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,107 @@
+import { COOKIE_NAME, MESSAGES_BEFORE_LOGIN } from "$env/static/private";
+import type { Handle } from "@sveltejs/kit";
+import {
+	PUBLIC_GOOGLE_ANALYTICS_ID,
+	PUBLIC_DEPRECATED_GOOGLE_ANALYTICS_ID,
+	PUBLIC_ORIGIN,
+	PUBLIC_APP_DISCLAIMER,
+} from "$env/static/public";
+import { collections } from "$lib/server/database";
+import { base } from "$app/paths";
+import { refreshSessionCookie, requiresUser } from "$lib/server/auth";
+import { ERROR_MESSAGES } from "$lib/stores/errors";
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const token = event.cookies.get(COOKIE_NAME);
+
+	event.locals.sessionId = token || crypto.randomUUID();
+
+	function errorResponse(status: number, message: string) {
+		const sendJson =
+			event.request.headers.get("accept")?.includes("application/json") ||
+			event.request.headers.get("content-type")?.includes("application/json");
+		return new Response(sendJson ? JSON.stringify({ error: message }) : message, {
+			status,
+			headers: {
+				"content-type": sendJson ? "application/json" : "text/plain",
+			},
+		});
+	}
+
+	// CSRF protection
+	const requestContentType = event.request.headers.get("content-type")?.split(";")[0] ?? "";
+	/** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype */
+	const nativeFormContentTypes = [
+		"multipart/form-data",
+		"application/x-www-form-urlencoded",
+		"text/plain",
+	];
+	if (event.request.method === "POST" && nativeFormContentTypes.includes(requestContentType)) {
+		const referer = event.request.headers.get("referer");
+
+		if (!referer) {
+			return errorResponse(403, "Non-JSON form requests need to have a referer");
+		}
+
+		const validOrigins = [
+			new URL(event.request.url).origin,
+			...(PUBLIC_ORIGIN ? [new URL(PUBLIC_ORIGIN).origin] : []),
+		];
+
+		if (!validOrigins.includes(new URL(referer).origin)) {
+			return errorResponse(403, "Invalid referer for POST request");
+		}
+	}
+
+	if (
+		!event.url.pathname.startsWith(`${base}/login`) &&
+		!event.url.pathname.startsWith(`${base}/admin`) &&
+		!["GET", "OPTIONS", "HEAD"].includes(event.request.method)
+	) {
+		if (
+			!user &&
+			requiresUser &&
+			!((MESSAGES_BEFORE_LOGIN ? parseInt(MESSAGES_BEFORE_LOGIN) : 0) > 0)
+		) {
+			return errorResponse(401, ERROR_MESSAGES.authOnly);
+		}
+
+		// if login is not required and the call is not from /settings and we display the ethics modal with PUBLIC_APP_DISCLAIMER
+		//  we check if the user has accepted the ethics modal first.
+		// If login is required, `ethicsModalAcceptedAt` is already true at this point, so do not pass this condition. This saves a DB call.
+		if (
+			!requiresUser &&
+			!event.url.pathname.startsWith(`${base}/settings`) &&
+			!!PUBLIC_APP_DISCLAIMER
+		) {
+			const hasAcceptedEthicsModal = await collections.settings.countDocuments({
+				sessionId: event.locals.sessionId,
+				ethicsModalAcceptedAt: { $exists: true },
+			});
+
+			if (!hasAcceptedEthicsModal) {
+				return errorResponse(405, "You need to accept the welcome modal first");
+			}
+		}
+	}
+
+	refreshSessionCookie(event.cookies, event.locals.sessionId);
+
+	let replaced = false;
+
+	const response = await resolve(event, {
+		transformPageChunk: (chunk) => {
+			// For some reason, Sveltekit doesn't let us load env variables from .env in the app.html template
+			if (replaced || !chunk.html.includes("%gaId%") || !chunk.html.includes("%gaIdDeprecated%")) {
+				return chunk.html;
+			}
+			replaced = true;
+
+			return chunk.html
+				.replace("%gaId%", PUBLIC_GOOGLE_ANALYTICS_ID)
+				.replace("%gaIdDeprecated%", PUBLIC_DEPRECATED_GOOGLE_ANALYTICS_ID);
+		},
+	});
+
+	return response;
+};

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,34 @@
+import type { BackendModel } from "./server/models";
+import type { Message } from "./types/Message";
+import { collections } from "$lib/server/database";
+import { authCondition } from "./server/auth";
+/**
+ * Convert [{user: "assistant", content: "hi"}, {user: "user", content: "hello"}] to:
+ *
+ * <|assistant|>hi<|endoftext|><|prompter|>hello<|endoftext|><|assistant|>
+ */
+
+interface buildPromptOptions {
+	messages: Pick<Message, "from" | "content">[];
+	model: BackendModel;
+	locals?: App.Locals;
+	webSearchId?: string;
+	preprompt?: string;
+}
+
+export async function buildPrompt({
+	messages,
+	model,
+	locals,
+	webSearchId,
+	preprompt,
+}: buildPromptOptions): Promise<string> {
+	return (
+		model
+			.chatPromptRender({ messages, preprompt })
+			// Not super precise, but it's truncated in the model's backend anyway
+			.split(" ")
+			.slice(-(model.parameters?.truncate ?? 0))
+			.join(" ")
+	);
+}

src/lib/components/AnnouncementBanner.svelte

@@ -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/LoadingModal.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import { progress_writable, curr_model_writable, map_writable } from "./LoadingModalWritable.js";
+
+	const forceUpdate = async (_) => {};
+
+	let loadingMap = new Map<string, number>();
+	let pr = 1;
+
+	map_writable.subscribe((value) => {
+		const [model, percent] = value;
+		pr = Number(percent);
+		if (model.startsWith("onnx")) {
+			loadingMap.set(model, Math.floor(Number(percent)));
+			//console.log(loadingMap);
+		}
+	});
+</script>
+
+<Modal>
+	<div class="flex w-full flex-col gap-0 p-2">
+		<div class="flex items-start text-xl font-bold text-gray-800">
+			<h2>Loading the model...</h2>
+			<br />
+		</div>
+		<div class="flex items-start text-s text-gray-800">
+			<br>Please wait while we download the model. This has to be done only once.
+		</div>
+		<br />
+		{#await forceUpdate(pr) then _}
+			{#each [...loadingMap] as [key, value]}
+				<p class="text-s text-gray-800">{key}</p>
+				<div class="w3-light-grey">
+					<div class="w3-blue" style="width:{value}%">{value}%</div>
+				</div>
+				<br />
+			{/each}
+		{/await}
+	</div>
+</Modal>

src/lib/components/LoadingModalWritable.js

@@ -0,0 +1,5 @@
+import { writable } from "svelte/store";
+
+export const progress_writable = writable(0);
+export const curr_model_writable = writable("");
+export const map_writable = writable(["", ""]);

src/lib/components/LoginModal.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import { base } from "$app/paths";
+	import { page } from "$app/stores";
+	import { PUBLIC_APP_DATA_SHARING, PUBLIC_APP_NAME, PUBLIC_VERSION } from "$env/static/public";
+	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
+	import Modal from "$lib/components/Modal.svelte";
+	import type { LayoutData } from "../../routes/$types";
+	import Logo from "./icons/Logo.svelte";
+	export let settings: LayoutData["settings"];
+
+	const isIframe = browser && window.self !== window.parent;
+</script>
+
+<Modal>
+	<div
+		class="flex w-full flex-col items-center gap-6 bg-gradient-to-t from-primary-500/40 via-primary-500/10 to-primary-500/0 px-4 pb-10 pt-9 text-center "
+	>
+		<h2 class="flex items-center text-2xl font-semibold text-gray-800">
+			<Logo classNames="mr-1" />
+			{PUBLIC_APP_NAME}
+			<div
+				class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400"
+			>
+				v{PUBLIC_VERSION}
+			</div>
+		</h2>
+		{#if $page.data.requiresLogin}
+			<p
+				class="px-4 text-lg font-semibold leading-snug text-gray-800 sm:px-12"
+				style="text-wrap: balance;"
+			>
+				Please Sign in with Hugging Face to continue
+			</p>
+		{/if}
+		<p class="text-base text-gray-800">
+			Disclaimer: AI is an area of active research with known problems such as biased generation and
+			misinformation. Do not use this application for high-stakes decisions or advice.
+		</p>
+		{#if PUBLIC_APP_DATA_SHARING}
+			<p class="px-2 text-sm text-gray-500">
+				Your conversations will be shared with model authors unless you disable it from your
+				settings.
+			</p>
+		{/if}
+		<form
+			action="{base}/{$page.data.requiresLogin ? 'login' : 'settings'}"
+			target={isIframe ? "_blank" : ""}
+			method="POST"
+			class="flex w-full flex-col items-center gap-2"
+		>
+			{#if $page.data.requiresLogin}
+				<button
+					type="submit"
+					class="mt-2 flex items-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-primary-500"
+				>
+					Sign in
+					{#if PUBLIC_APP_NAME === "HuggingChat"}
+						with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5" /> Hugging Face
+					{/if}
+				</button>
+			{:else}
+				<input type="hidden" name="ethicsModalAccepted" value={true} />
+				{#each Object.entries(settings) as [key, val]}
+					<input type="hidden" name={key} value={val} />
+				{/each}
+				<button
+					type="submit"
+					class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-primary-500"
+				>
+					Start chatting
+				</button>
+			{/if}
+		</form>
+	</div>
+</Modal>

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/MobileWarningModal.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import Modal from "$lib/components/Modal.svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import Switch from "$lib/components/Switch.svelte";
+	import { enhance } from "$app/forms";
+	import { base } from "$app/paths";
+	import { PUBLIC_APP_DATA_SHARING } from "$env/static/public";
+	import type { Model } from "$lib/types/Model";
+	import type { LayoutData } from "../../routes/$types";
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+</script>
+
+<Modal>
+	<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>Warning</h2>
+		</div>
+		<p class="text-gray-800">
+			This chat is still a beta. Therefore, it might have some issues on your phone. Use at your own
+			risk.
+		</p>
+	</div>
+</Modal>

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" | "modelUrl" | "datasetUrl">;
+
+	export let variant: "light" | "dark" = "light";
+</script>
+
+<div
+	class="flex items-center gap-5 rounded-xl bg-gray-100 px-3 py-2 text-sm 
+	{variant === 'dark'
+		? 'text-gray-600 dark:bg-gray-800 dark:text-gray-300'
+		: 'text-gray-800 dark:bg-gray-100 dark:text-gray-600'}"
+>
+	<a
+		href={model.modelUrl || "https://huggingface.co/" + model.name}
+		target="_blank"
+		rel="noreferrer"
+		class="flex items-center hover:underline"
+		><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
+		Model
+		<div class="max-sm:hidden">&nbsp;page</div></a
+	>
+	{#if model.datasetName || model.datasetUrl}
+		<a
+			href={model.datasetUrl || "https://huggingface.co/datasets/" + model.datasetName}
+			target="_blank"
+			rel="noreferrer"
+			class="flex items-center hover:underline"
+			><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
+			Dataset
+			<div class="max-sm:hidden">&nbsp;page</div></a
+		>
+	{/if}
+	{#if model.websiteUrl}
+		<a
+			href={model.websiteUrl}
+			target="_blank"
+			class="ml-auto flex items-center hover:underline"
+			rel="noreferrer"
+		>
+			<CarbonEarth class="mr-1.5 shrink-0 text-xs text-gray-400" />
+			Website
+		</a>
+	{/if}
+</div>

src/lib/components/ModelsModal.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+
+	import Modal from "$lib/components/Modal.svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonCheckmark from "~icons/carbon/checkmark-filled";
+	import ModelCardMetadata from "./ModelCardMetadata.svelte";
+	import type { Model } from "$lib/types/Model";
+	import type { LayoutData } from "../../routes/$types";
+	import { enhance } from "$app/forms";
+	import { base } from "$app/paths";
+
+	import CarbonEdit from "~icons/carbon/edit";
+	import CarbonSave from "~icons/carbon/save";
+	import CarbonRestart from "~icons/carbon/restart";
+
+	export let settings: LayoutData["settings"];
+	export let models: Array<Model>;
+
+	let selectedModelId = settings.activeModel;
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+
+	let expanded = false;
+
+	function onToggle() {
+		if (expanded) {
+			settings.customPrompts[selectedModelId] = value;
+		}
+		expanded = !expanded;
+	}
+
+	let value = "";
+
+	function onModelChange() {
+		value =
+			settings.customPrompts[selectedModelId] ??
+			models.filter((el) => el.id === selectedModelId)[0].preprompt ??
+			"";
+	}
+
+	$: selectedModelId, onModelChange();
+</script>
+
+<Modal width="max-w-lg" on:close>
+	<form
+		action="{base}/settings"
+		method="post"
+		on:submit={() => {
+			if (expanded) {
+				onToggle();
+			}
+		}}
+		use:enhance={() => {
+			dispatch("close");
+		}}
+		class="flex w-full flex-col gap-5 p-6"
+	>
+		{#each Object.entries(settings).filter(([k]) => !(k == "activeModel" || k === "customPrompts")) as [key, val]}
+			<input type="hidden" name={key} value={val} />
+		{/each}
+		<input type="hidden" name="customPrompts" value={JSON.stringify(settings.customPrompts)} />
+		<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
+			<h2>Models</h2>
+			<button type="button" class="group" on:click={() => dispatch("close")}>
+				<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
+			</button>
+		</div>
+
+		<div class="space-y-4">
+			{#each models as model}
+				{@const active = model.id === selectedModelId}
+				<div
+					class="rounded-xl border border-gray-100 {active
+						? 'bg-gradient-to-r from-primary-200/40 via-primary-500/10'
+						: ''}"
+				>
+					<label class="group flex cursor-pointer 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 {active
+								? 'text-primary-400'
+								: 'text-transparent group-hover:text-gray-200'}"
+						/>
+					</label>
+					{#if active}
+						<div class=" overflow-hidden rounded-xl px-3 pb-2">
+							<div class="flex flex-row flex-nowrap gap-2 pb-1">
+								<div class="text-xs font-semibold text-gray-500">System Prompt</div>
+								{#if expanded}
+									<button
+										class="text-gray-500 hover:text-gray-900"
+										on:click|preventDefault={onToggle}
+									>
+										<CarbonSave class="text-sm " />
+									</button>
+									<button
+										class="text-gray-500 hover:text-gray-900"
+										on:click|preventDefault={() => {
+											value = model.preprompt ?? "";
+										}}
+									>
+										<CarbonRestart class="text-sm " />
+									</button>
+								{:else}
+									<button
+										class=" text-gray-500 hover:text-gray-900"
+										on:click|preventDefault={onToggle}
+									>
+										<CarbonEdit class="text-sm " />
+									</button>
+								{/if}
+							</div>
+							<textarea
+								enterkeyhint="send"
+								tabindex="0"
+								rows="1"
+								class="h-20 w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll rounded-md border border-gray-300 bg-transparent p-1  text-xs outline-none focus:ring-0 focus-visible:ring-0"
+								bind:value
+								hidden={!expanded}
+							/>
+						</div>
+					{/if}
+					<ModelCardMetadata {model} />
+				</div>
+			{/each}
+		</div>
+		<button
+			type="submit"
+			class="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,89 @@
+<script lang="ts">
+	import { base } from "$app/paths";
+	import { page } from "$app/stores";
+	import { createEventDispatcher } from "svelte";
+	import { params_writable } from "../../routes/conversation/[id]/ParamsWritable";
+
+	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;
+	}}
+	on:click = {() => {params_writable.set(conv.id)}}
+	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,105 @@
+<script lang="ts">
+	import { base } from "$app/paths";
+	import { createEventDispatcher } from "svelte";
+
+	import Logo from "$lib/components/icons/Logo.svelte";
+	import { switchTheme } from "$lib/switchTheme";
+	import { PUBLIC_APP_NAME, PUBLIC_ORIGIN } from "$env/static/public";
+	import NavConversationItem from "./NavConversationItem.svelte";
+	import type { LayoutData } from "../../routes/$types";
+
+	const dispatch = createEventDispatcher<{
+		shareConversation: { id: string; title: string };
+		clickSettings: void;
+		clickLogout: void;
+	}>();
+
+	export let conversations: Array<{
+		id: string;
+		title: string;
+	}> = [];
+
+	export let canLogin: boolean;
+	export let user: LayoutData["user"];
+
+	export let loginModalVisible;
+</script>
+
+<div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
+	<a class="flex items-center rounded-xl text-lg font-semibold" href="{PUBLIC_ORIGIN}{base}/">
+		<Logo classNames="mr-1" />
+		{PUBLIC_APP_NAME}
+	</a>
+	<a
+		href={`${base}/`}
+		class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none dark:border-gray-600 dark:bg-gray-700"
+	>
+		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}
+	{#if canLogin}
+		<button
+			on:click={() => (loginModalVisible = true)}
+			type="button"
+			class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		>
+			Login
+		</button>
+	{/if}
+	<button
+		on:click={switchTheme}
+		type="button"
+		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+	>
+		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>
+	<a
+		href="https://github.com/mithril-security/blind_chat/issues"
+		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>
+</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[webSearchMessages.length - 2]?.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,80 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+
+	import Modal from "$lib/components/Modal.svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import Switch from "$lib/components/Switch.svelte";
+	import { enhance } from "$app/forms";
+	import { base } from "$app/paths";
+	import type { Model } from "$lib/types/Model";
+	import type { LayoutData } from "../../routes/$types";
+
+	export let settings: LayoutData["settings"];
+	export let models: Array<Model>;
+
+	let isConfirmingDeletion = false;
+
+	const dispatch = createEventDispatcher<{ close: void, deleteAllConversations: 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"
+		>
+			<form
+				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,86 @@
+<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";
+	import { env } from "$env/dynamic/public";
+
+	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 }>();
+
+	$: title = env.PUBLIC_APP_NAME
+</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">
+				Enjoying the best AI models, with privacy
+			</p>
+		</div>
+	</div>
+	<div class="lg:col-span-2 lg:pl-24">
+		{#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-6">
+			<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,147 @@
+<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={currentModel.modelUrl || "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.
+				<br><br> 🔒 All conversations are end-to-end protected
+			</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 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.25s;"
+	/>
+	<div
+		class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.5s;"
+	/>
+	<div
+		class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.75s;"
+	/>
+</div>

src/lib/components/icons/Logo.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import { PUBLIC_APP_ASSETS, PUBLIC_APP_NAME, PUBLIC_ORIGIN } from "$env/static/public";
+	import { base } from "$app/paths";
+
+	export let classNames = "";
+</script>
+
+{#if PUBLIC_APP_ASSETS === "chatui"}
+	<svg
+		height="30"
+		width="30"
+		viewBox="0 0 30 30"
+		xmlns="http://www.w3.org/2000/svg"
+		class={classNames}
+	>
+		<path
+			d="M4.06151 14.1464C4.06151 11.8818 4.9611 9.71004 6.56237 8.10877C8.16364 6.5075 10.3354 5.60791 12.6 5.60791H16.5231C18.6254 5.60791 20.6416 6.44307 22.1282 7.92965C23.6148 9.41624 24.45 11.4325 24.45 13.5348C24.45 15.6372 23.6148 17.6534 22.1282 19.14C20.6416 20.6266 18.6254 21.4618 16.5231 21.4618H7.08459L4.63844 23.8387C4.59547 23.8942 4.53557 23.9343 4.4678 23.9527C4.40004 23.9712 4.32811 23.9671 4.2629 23.941C4.1977 23.9149 4.14276 23.8683 4.10643 23.8082C4.07009 23.7481 4.05432 23.6778 4.06151 23.6079V14.1464Z"
+			class="fill-primary-500"
+		/>
+	</svg>
+{:else}
+	<object
+		class={classNames}
+		data="{PUBLIC_ORIGIN || $page.url.origin}{base}/{PUBLIC_APP_ASSETS}/favicon.svg"
+		title="{PUBLIC_APP_NAME} logo"
+	/>
+{/if}