Showing preview only (358K chars total). Download the full file or copy to clipboard to get everything.
Repository: getumbrel/llama-gpt
Branch: master
Commit: 43994a365ffb
Files: 261
Total size: 305.4 KB
Directory structure:
gitextract_5taggak1/
├── .gitattributes
├── .github/
│ └── workflows/
│ └── on-push.yml
├── .gitignore
├── LICENSE.md
├── README.md
├── api/
│ └── run.sh
├── cuda/
│ ├── ggml.Dockerfile
│ ├── gguf.Dockerfile
│ └── run.sh
├── deploy/
│ └── kubernetes/
│ ├── kustomization.yaml
│ ├── llama-gpt-api-deployment.yaml
│ ├── llama-gpt-api-service.yaml
│ ├── llama-gpt-ui-deployment.yaml
│ └── llama-gpt-ui-service.yaml
├── docker-compose-cuda-ggml.yml
├── docker-compose-cuda-gguf.yml
├── docker-compose-gguf.yml
├── docker-compose-mac.yml
├── docker-compose.yml
├── models/
│ └── .gitkeep
├── run-mac.sh
├── run.sh
└── ui/
├── .dockerignore
├── .eslintrc.json
├── .gitignore
├── CONTRIBUTING.md
├── Dockerfile
├── Makefile
├── __tests__/
│ └── utils/
│ └── app/
│ └── importExports.test.ts
├── components/
│ ├── Buttons/
│ │ └── SidebarActionButton/
│ │ ├── SidebarActionButton.tsx
│ │ └── index.ts
│ ├── Chat/
│ │ ├── Chat.tsx
│ │ ├── ChatInput.tsx
│ │ ├── ChatLoader.tsx
│ │ ├── ChatMessage.tsx
│ │ ├── ErrorMessageDiv.tsx
│ │ ├── MemoizedChatMessage.tsx
│ │ ├── ModelSelect.tsx
│ │ ├── PluginSelect.tsx
│ │ ├── PromptList.tsx
│ │ ├── Regenerate.tsx
│ │ ├── SystemPrompt.tsx
│ │ ├── Temperature.tsx
│ │ └── VariableModal.tsx
│ ├── Chatbar/
│ │ ├── Chatbar.context.tsx
│ │ ├── Chatbar.state.tsx
│ │ ├── Chatbar.tsx
│ │ └── components/
│ │ ├── ChatFolders.tsx
│ │ ├── ChatbarSettings.tsx
│ │ ├── ClearConversations.tsx
│ │ ├── Conversation.tsx
│ │ ├── Conversations.tsx
│ │ └── PluginKeys.tsx
│ ├── Folder/
│ │ ├── Folder.tsx
│ │ └── index.ts
│ ├── Markdown/
│ │ ├── CodeBlock.tsx
│ │ └── MemoizedReactMarkdown.tsx
│ ├── Mobile/
│ │ └── Navbar.tsx
│ ├── Promptbar/
│ │ ├── PromptBar.context.tsx
│ │ ├── Promptbar.state.tsx
│ │ ├── Promptbar.tsx
│ │ ├── components/
│ │ │ ├── Prompt.tsx
│ │ │ ├── PromptFolders.tsx
│ │ │ ├── PromptModal.tsx
│ │ │ ├── PromptbarSettings.tsx
│ │ │ └── Prompts.tsx
│ │ └── index.ts
│ ├── Search/
│ │ ├── Search.tsx
│ │ └── index.ts
│ ├── Settings/
│ │ ├── Import.tsx
│ │ ├── Key.tsx
│ │ └── SettingDialog.tsx
│ ├── Sidebar/
│ │ ├── Sidebar.tsx
│ │ ├── SidebarButton.tsx
│ │ ├── components/
│ │ │ └── OpenCloseButton.tsx
│ │ └── index.ts
│ └── Spinner/
│ ├── Spinner.tsx
│ └── index.ts
├── docker-compose.yml
├── docs/
│ └── google_search.md
├── hooks/
│ ├── useCreateReducer.ts
│ └── useFetch.ts
├── k8s/
│ └── chatbot-ui.yaml
├── next-i18next.config.js
├── next.config.js
├── no-wait.Dockerfile
├── package.json
├── pages/
│ ├── _app.tsx
│ ├── _document.tsx
│ ├── api/
│ │ ├── chat.ts
│ │ ├── google.ts
│ │ ├── home/
│ │ │ ├── home.context.tsx
│ │ │ ├── home.state.tsx
│ │ │ ├── home.tsx
│ │ │ └── index.ts
│ │ └── models.ts
│ └── index.tsx
├── postcss.config.js
├── prettier.config.js
├── public/
│ └── locales/
│ ├── ar/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── bn/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── ca/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ └── sidebar.json
│ ├── de/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── en/
│ │ └── common.json
│ ├── es/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── fi/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── fr/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── he/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── id/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── it/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── ja/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── ko/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── pl/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── pt/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── ro/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── ru/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── si/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── sv/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── te/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── tr/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ └── sidebar.json
│ ├── vi/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ └── zh/
│ ├── chat.json
│ ├── common.json
│ ├── markdown.json
│ ├── promptbar.json
│ ├── settings.json
│ └── sidebar.json
├── services/
│ ├── errorService.ts
│ └── useApiService.ts
├── styles/
│ └── globals.css
├── tailwind.config.js
├── tsconfig.json
├── types/
│ ├── chat.ts
│ ├── data.ts
│ ├── env.ts
│ ├── error.ts
│ ├── export.ts
│ ├── folder.ts
│ ├── google.ts
│ ├── index.ts
│ ├── openai.ts
│ ├── plugin.ts
│ ├── prompt.ts
│ ├── settings.ts
│ └── storage.ts
├── utils/
│ ├── app/
│ │ ├── api.ts
│ │ ├── clean.ts
│ │ ├── codeblock.ts
│ │ ├── const.ts
│ │ ├── conversation.ts
│ │ ├── folders.ts
│ │ ├── importExport.ts
│ │ ├── prompts.ts
│ │ └── settings.ts
│ ├── data/
│ │ └── throttle.ts
│ └── server/
│ ├── google.ts
│ └── index.ts
└── vitest.config.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
* text=auto
*.sh eol=lf
*.yml text
================================================
FILE: .github/workflows/on-push.yml
================================================
name: Build Docker images on master push
on:
push:
tags:
- "*"
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
service:
- api
- ui
env:
SERVICE_DIR: ./${{ matrix.service }}
IMAGE_NAME: ghcr.io/${{ github.repository }}-${{ matrix.service }}
steps:
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- run: docker login --username "${{ github.actor }}" --password ${{ secrets.GITHUB_TOKEN }} ghcr.io
- run: docker buildx create --use
- run: docker buildx build --platform linux/amd64,linux/arm64 -f ${SERVICE_DIR}/Dockerfile --tag $IMAGE_NAME:${{ github.ref_name }} --push ${SERVICE_DIR}
- run: docker buildx build --platform linux/amd64,linux/arm64 -f ${SERVICE_DIR}/Dockerfile --tag $IMAGE_NAME:latest --push ${SERVICE_DIR}
================================================
FILE: .gitignore
================================================
**/.DS_Store
models/*.bin
models/*.gguf
**/.todo
================================================
FILE: LICENSE.md
================================================
MIT License
Copyright (c) 2023 Umbrel, Inc.
Copyright (c) 2023 Mckay Wrigley
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<p align="center">
<a href="https://apps.umbrel.com/app/llama-gpt">
<img width="150" height="150" src="https://i.imgur.com/LI59cui.png" alt="LlamaGPT" width="200" />
</a>
</p>
<p align="center">
<h1 align="center">LlamaGPT</h1>
<p align="center">
A self-hosted, offline, ChatGPT-like chatbot, powered by Llama 2. 100% private, with no data leaving your device.
<br/>
<strong>New: Support for Code Llama models and Nvidia GPUs.</strong>
<br />
<br />
<a href="https://umbrel.com"><strong>umbrel.com (we're hiring) »</strong></a>
<br />
<br />
<a href="https://twitter.com/umbrel">
<img src="https://img.shields.io/twitter/follow/umbrel?style=social" />
</a>
<a href="https://t.me/getumbrel">
<img src="https://img.shields.io/badge/community-chat-%235351FB">
</a>
<a href="https://reddit.com/r/getumbrel">
<img src="https://img.shields.io/reddit/subreddit-subscribers/getumbrel?style=social">
</a>
<a href="https://community.umbrel.com">
<img src="https://img.shields.io/badge/community-forum-%235351FB">
</a>
</p>
</p>
<p align="center">
<a href="https://umbrel.com/#start">
<img src="https://i.imgur.com/sj5vqEG.jpg" width="100%" />
</a>
</p>
## Contents
1. [Demo](#demo)
2. [Supported Models](#supported-models)
3. [How to install](#how-to-install)
- [On umbrelOS home server](#install-llamagpt-on-your-umbrelos-home-server)
- [On M1/M2 Mac](#install-llamagpt-on-m1m2-mac)
- [Anywhere else with Docker](#install-llamagpt-anywhere-else-with-docker)
- [Kubernetes](#install-llamagpt-with-kubernetes)
4. [OpenAI-compatible API](#openai-compatible-api)
5. [Benchmarks](#benchmarks)
6. [Roadmap and contributing](#roadmap-and-contributing)
7. [Acknowledgements](#acknowledgements)
## Demo
https://github.com/getumbrel/llama-gpt/assets/10330103/5d1a76b8-ed03-4a51-90bd-12ebfaf1e6cd
## Supported models
Currently, LlamaGPT supports the following models. Support for running custom models is on the roadmap.
| Model name | Model size | Model download size | Memory required |
| ---------------------------------------- | ---------- | ------------------- | --------------- |
| Nous Hermes Llama 2 7B Chat (GGML q4_0) | 7B | 3.79GB | 6.29GB |
| Nous Hermes Llama 2 13B Chat (GGML q4_0) | 13B | 7.32GB | 9.82GB |
| Nous Hermes Llama 2 70B Chat (GGML q4_0) | 70B | 38.87GB | 41.37GB |
| Code Llama 7B Chat (GGUF Q4_K_M) | 7B | 4.24GB | 6.74GB |
| Code Llama 13B Chat (GGUF Q4_K_M) | 13B | 8.06GB | 10.56GB |
| Phind Code Llama 34B Chat (GGUF Q4_K_M) | 34B | 20.22GB | 22.72GB |
## How to install
### Install LlamaGPT on your umbrelOS home server
Running LlamaGPT on an [umbrelOS](https://umbrel.com) home server is one click. Simply install it from the [Umbrel App Store](https://apps.umbrel.com/app/llama-gpt).
[](https://apps.umbrel.com/app/llama-gpt)
### Install LlamaGPT on M1/M2 Mac
Make sure your have Docker and Xcode installed.
Then, clone this repo and `cd` into it:
```
git clone https://github.com/getumbrel/llama-gpt.git
cd llama-gpt
```
Run LlamaGPT with the following command:
```
./run-mac.sh --model 7b
```
You can access LlamaGPT at http://localhost:3000.
> To run 13B or 70B chat models, replace `7b` with `13b` or `70b` respectively.
> To run 7B, 13B or 34B Code Llama models, replace `7b` with `code-7b`, `code-13b` or `code-34b` respectively.
To stop LlamaGPT, do `Ctrl + C` in Terminal.
### Install LlamaGPT anywhere else with Docker
You can run LlamaGPT on any x86 or arm64 system. Make sure you have Docker installed.
Then, clone this repo and `cd` into it:
```
git clone https://github.com/getumbrel/llama-gpt.git
cd llama-gpt
```
Run LlamaGPT with the following command:
```
./run.sh --model 7b
```
Or if you have an Nvidia GPU, you can run LlamaGPT with CUDA support using the `--with-cuda` flag, like:
```
./run.sh --model 7b --with-cuda
```
You can access LlamaGPT at `http://localhost:3000`.
> To run 13B or 70B chat models, replace `7b` with `13b` or `70b` respectively.
> To run Code Llama 7B, 13B or 34B models, replace `7b` with `code-7b`, `code-13b` or `code-34b` respectively.
To stop LlamaGPT, do `Ctrl + C` in Terminal.
> Note: On the first run, it may take a while for the model to be downloaded to the `/models` directory. You may also see lots of output like this for a few minutes, which is normal:
>
> ```
> llama-gpt-llama-gpt-ui-1 | [INFO wait] Host [llama-gpt-api-13b:8000] not yet available...
> ```
>
> After the model has been automatically downloaded and loaded, and the API server is running, you'll see an output like:
>
> ```
> llama-gpt-ui_1 | ready - started server on 0.0.0.0:3000, url: http://localhost:3000
> ```
>
> You can then access LlamaGPT at http://localhost:3000.
---
### Install LlamaGPT with Kubernetes
First, make sure you have a running Kubernetes cluster and `kubectl` is configured to interact with it.
Then, clone this repo and `cd` into it.
To deploy to Kubernetes first create a namespace:
```bash
kubectl create ns llama
```
Then apply the manifests under the `/deploy/kubernetes` directory with
```bash
kubectl apply -k deploy/kubernetes/. -n llama
```
Expose your service however you would normally do that.
## OpenAI compatible API
Thanks to llama-cpp-python, a drop-in replacement for OpenAI API is available at `http://localhost:3001`. Open http://localhost:3001/docs to see the API documentation.
## Benchmarks
We've tested LlamaGPT models on the following hardware with the default system prompt, and user prompt: "How does the universe expand?" at temperature 0 to guarantee deterministic results. Generation speed is averaged over the first 10 generations.
Feel free to add your own benchmarks to this table by opening a pull request.
#### Nous Hermes Llama 2 7B Chat (GGML q4_0)
| Device | Generation speed |
| ----------------------------------- | ---------------- |
| M1 Max MacBook Pro (64GB RAM) | 54 tokens/sec |
| GCP c2-standard-16 vCPU (64 GB RAM) | 16.7 tokens/sec |
| Ryzen 5700G 4.4GHz 4c (16 GB RAM) | 11.50 tokens/sec |
| GCP c2-standard-4 vCPU (16 GB RAM) | 4.3 tokens/sec |
| Umbrel Home (16GB RAM) | 2.7 tokens/sec |
| Raspberry Pi 4 (8GB RAM) | 0.9 tokens/sec |
#### Nous Hermes Llama 2 13B Chat (GGML q4_0)
| Device | Generation speed |
| ----------------------------------- | ---------------- |
| M1 Max MacBook Pro (64GB RAM) | 20 tokens/sec |
| GCP c2-standard-16 vCPU (64 GB RAM) | 8.6 tokens/sec |
| GCP c2-standard-4 vCPU (16 GB RAM) | 2.2 tokens/sec |
| Umbrel Home (16GB RAM) | 1.5 tokens/sec |
#### Nous Hermes Llama 2 70B Chat (GGML q4_0)
| Device | Generation speed |
| ----------------------------------- | ---------------- |
| M1 Max MacBook Pro (64GB RAM) | 4.8 tokens/sec |
| GCP e2-standard-16 vCPU (64 GB RAM) | 1.75 tokens/sec |
| GCP c2-standard-16 vCPU (64 GB RAM) | 1.62 tokens/sec |
#### Code Llama 7B Chat (GGUF Q4_K_M)
| Device | Generation speed |
| ----------------------------- | ---------------- |
| M1 Max MacBook Pro (64GB RAM) | 41 tokens/sec |
#### Code Llama 13B Chat (GGUF Q4_K_M)
| Device | Generation speed |
| ----------------------------- | ---------------- |
| M1 Max MacBook Pro (64GB RAM) | 25 tokens/sec |
#### Phind Code Llama 34B Chat (GGUF Q4_K_M)
| Device | Generation speed |
| ----------------------------- | ---------------- |
| M1 Max MacBook Pro (64GB RAM) | 10.26 tokens/sec |
## Roadmap and contributing
We're looking to add more features to LlamaGPT. You can see the roadmap [here](https://github.com/getumbrel/llama-gpt/issues/8#issuecomment-1681321145). The highest priorities are:
- [x] Moving the model out of the Docker image and into a separate volume.
- [x] Add Metal support for M1/M2 Macs.
- [x] Add support for Code Llama models.
- [x] Add CUDA support for NVIDIA GPUs.
- [ ] Add ability to load custom models.
- [ ] Allow users to switch between models.
If you're a developer who'd like to help with any of these, please open an issue to discuss the best way to tackle the challenge. If you're looking to help but not sure where to begin, check out [these issues](https://github.com/getumbrel/llama-gpt/labels/good%20first%20issue) that have specifically been marked as being friendly to new contributors.
## Acknowledgements
A massive thank you to the following developers and teams for making LlamaGPT possible:
- [Mckay Wrigley](https://github.com/mckaywrigley) for building [Chatbot UI](https://github.com/mckaywrigley).
- [Georgi Gerganov](https://github.com/ggerganov) for implementing [llama.cpp](https://github.com/ggerganov/llama.cpp).
- [Andrei](https://github.com/abetlen) for building the [Python bindings for llama.cpp](https://github.com/abetlen/llama-cpp-python).
- [NousResearch](https://nousresearch.com) for [fine-tuning the Llama 2 7B and 13B models](https://huggingface.co/NousResearch).
- [Phind](https://www.phind.com/) for [fine-tuning the Code Llama 34B model](https://www.phind.com/blog/code-llama-beats-gpt4).
- [Tom Jobbins](https://huggingface.co/TheBloke) for [quantizing the Llama 2 models](https://huggingface.co/TheBloke/Nous-Hermes-Llama-2-7B-GGML).
- [Meta](https://ai.meta.com/llama) for releasing Llama 2 and Code Llama under a permissive license.
---
[](https://github.com/getumbrel/llama-gpt/blob/master/LICENSE.md)
[umbrel.com](https://umbrel.com)
================================================
FILE: api/run.sh
================================================
#!/bin/bash
# Check if the MODEL environment variable is set
if [ -z "$MODEL" ]
then
echo "Please set the MODEL_FILE environment variable"
exit 1
fi
# Check if the MODEL_DOWNLOAD_URL environment variable is set
if [ -z "$MODEL_DOWNLOAD_URL" ]
then
echo "Please set the MODEL_DOWNLOAD_URL environment variable"
exit 1
fi
# Check if the model file exists
if [ ! -f $MODEL ]; then
echo "Model file not found. Downloading..."
# Check if curl is installed
if ! [ -x "$(command -v curl)" ]; then
echo "curl is not installed. Installing..."
apt-get update --yes --quiet
apt-get install --yes --quiet curl
fi
# Download the model file
curl -L -o $MODEL $MODEL_DOWNLOAD_URL
if [ $? -ne 0 ]; then
echo "Download failed. Trying with TLS 1.2..."
curl -L --tlsv1.2 -o $MODEL $MODEL_DOWNLOAD_URL
fi
else
echo "$MODEL model found."
fi
# Build the project
make build
# Get the number of available CPU threads
n_threads=$(grep -c ^processor /proc/cpuinfo)
# Define context window
n_ctx=4096
# Offload everything to CPU
n_gpu_layers=0
# Define batch size based on total RAM
total_ram=$(cat /proc/meminfo | grep MemTotal | awk '{print $2}')
n_batch=2096
if [ $total_ram -lt 8000000 ]; then
n_batch=1024
fi
# Display configuration information
echo "Initializing server with:"
echo "Batch size: $n_batch"
echo "Number of CPU threads: $n_threads"
echo "Number of GPU layers: $n_gpu_layers"
echo "Context window: $n_ctx"
# Run the server
exec python3 -m llama_cpp.server --n_ctx $n_ctx --n_threads $n_threads --n_gpu_layers $n_gpu_layers --n_batch $n_batch
================================================
FILE: cuda/ggml.Dockerfile
================================================
ARG CUDA_IMAGE="12.1.1-devel-ubuntu22.04"
FROM nvidia/cuda:${CUDA_IMAGE}
# We need to set the host to 0.0.0.0 to allow outside access
ENV HOST 0.0.0.0
RUN apt-get update && apt-get upgrade -y \
&& apt-get install -y git build-essential \
python3 python3-pip gcc wget \
ocl-icd-opencl-dev opencl-headers clinfo \
libclblast-dev libopenblas-dev \
&& mkdir -p /etc/OpenCL/vendors && echo "libnvidia-opencl.so.1" > /etc/OpenCL/vendors/nvidia.icd
COPY . .
# setting build related env vars
ENV CUDA_DOCKER_ARCH=all
ENV LLAMA_CUBLAS=1
# Install depencencies
RUN python3 -m pip install --upgrade pip pytest cmake scikit-build setuptools fastapi uvicorn sse-starlette pydantic-settings
# Install llama-cpp-python 0.1.78 which has GGML support (build with cuda)
RUN CMAKE_ARGS="-DLLAMA_CUBLAS=on" FORCE_CMAKE=1 pip install llama-cpp-python==0.1.78
# Run the server
CMD python3 -m llama_cpp.server
================================================
FILE: cuda/gguf.Dockerfile
================================================
ARG CUDA_IMAGE="12.1.1-devel-ubuntu22.04"
FROM nvidia/cuda:${CUDA_IMAGE}
# We need to set the host to 0.0.0.0 to allow outside access
ENV HOST 0.0.0.0
RUN apt-get update && apt-get upgrade -y \
&& apt-get install -y git build-essential \
python3 python3-pip gcc wget \
ocl-icd-opencl-dev opencl-headers clinfo \
libclblast-dev libopenblas-dev \
&& mkdir -p /etc/OpenCL/vendors && echo "libnvidia-opencl.so.1" > /etc/OpenCL/vendors/nvidia.icd
COPY . .
# setting build related env vars
ENV CUDA_DOCKER_ARCH=all
ENV LLAMA_CUBLAS=1
# Install depencencies
RUN python3 -m pip install --upgrade pip pytest cmake scikit-build setuptools fastapi uvicorn sse-starlette pydantic-settings
# Install llama-cpp-python 0.1.80 which has GGUF support (build with cuda)
RUN CMAKE_ARGS="-DLLAMA_CUBLAS=on" FORCE_CMAKE=1 pip install llama-cpp-python==0.1.80
# Run the server
CMD python3 -m llama_cpp.server
================================================
FILE: cuda/run.sh
================================================
#!/bin/bash
# Check if the MODEL environment variable is set
if [ -z "$MODEL" ]
then
echo "Please set the MODEL_FILE environment variable"
exit 1
fi
# Check if the MODEL_DOWNLOAD_URL environment variable is set
if [ -z "$MODEL_DOWNLOAD_URL" ]
then
echo "Please set the MODEL_DOWNLOAD_URL environment variable"
exit 1
fi
# Check if the model file exists
if [ ! -f $MODEL ]; then
echo "Model file not found. Downloading..."
# Check if curl is installed
if ! [ -x "$(command -v curl)" ]; then
echo "curl is not installed. Installing..."
apt-get update --yes --quiet
apt-get install --yes --quiet curl
fi
# Download the model file
curl -L -o $MODEL $MODEL_DOWNLOAD_URL
if [ $? -ne 0 ]; then
echo "Download failed. Trying with TLS 1.2..."
curl -L --tlsv1.2 -o $MODEL $MODEL_DOWNLOAD_URL
fi
else
echo "$MODEL model found."
fi
# Build the project
make build
# Get the number of available CPU threads
n_threads=$(grep -c ^processor /proc/cpuinfo)
# Define context window
n_ctx=4096
# Offload layers to GPU
n_gpu_layers=10
# Define batch size based on total RAM
total_ram=$(cat /proc/meminfo | grep MemTotal | awk '{print $2}')
n_batch=2096
if [ $total_ram -lt 8000000 ]; then
n_batch=1024
fi
# Display configuration information
echo "Initializing server with:"
echo "Batch size: $n_batch"
echo "Number of CPU threads: $n_threads"
echo "Number of GPU layers: $n_gpu_layers"
echo "Context window: $n_ctx"
# Run the server
exec python3 -m llama_cpp.server --n_ctx $n_ctx --n_threads $n_threads --n_gpu_layers $n_gpu_layers --n_batch $n_batch
================================================
FILE: deploy/kubernetes/kustomization.yaml
================================================
apiVersion: kustomize.config.k8s.io/v1beta1
kind: Kustomization
resources:
- llama-gpt-api-deployment.yaml
- llama-gpt-api-service.yaml
- llama-gpt-ui-deployment.yaml
- llama-gpt-ui-service.yaml
# patches:
# -
configMapGenerator:
- name: llama-gpt
literals:
- DEFAULT_MODEL="/models/llama-2-7b-chat.bin"
- OPENAI_API_HOST="http://llama-gpt-api:8000"
- OPENAI_API_KEY="sk-XXXXXXXXXXXXXXXXXXXX"
- WAIT_HOSTS="llama-gpt-api:8000"
- WAIT_TIMEOUT="600"
================================================
FILE: deploy/kubernetes/llama-gpt-api-deployment.yaml
================================================
apiVersion: apps/v1
kind: Deployment
metadata:
labels:
service: llama-gpt-api
name: llama-gpt-api
spec:
replicas: 1
selector:
matchLabels:
service: llama-gpt-api
template:
metadata:
labels:
service: llama-gpt-api
spec:
containers:
- name: llama-gpt-api
image: ghcr.io/getumbrel/llama-gpt-api:1.0.1
env:
- name: MODEL
valueFrom:
configMapKeyRef:
name: llama-gpt
key: DEFAULT_MODEL
resources:
requests:
memory: 5Gi
restartPolicy: Always
================================================
FILE: deploy/kubernetes/llama-gpt-api-service.yaml
================================================
apiVersion: v1
kind: Service
metadata:
labels:
service: llama-gpt-api
name: llama-gpt-api
spec:
ports:
- name: api
port: 8000
targetPort: 8000
selector:
service: llama-gpt-api
status:
loadBalancer: {}
================================================
FILE: deploy/kubernetes/llama-gpt-ui-deployment.yaml
================================================
apiVersion: apps/v1
kind: Deployment
metadata:
labels:
service: llama-gpt-ui
name: llama-gpt-ui
spec:
replicas: 1
selector:
matchLabels:
service: llama-gpt-ui
template:
metadata:
labels:
service: llama-gpt-ui
spec:
containers:
- name: llama-gpt-ui
image: ghcr.io/getumbrel/llama-gpt-ui:latest
envFrom:
- configMapRef:
name: llama-gpt
ports:
- containerPort: 3000
resources: {}
restartPolicy: Always
================================================
FILE: deploy/kubernetes/llama-gpt-ui-service.yaml
================================================
apiVersion: v1
kind: Service
metadata:
labels:
service: llama-gpt-ui
name: llama-gpt-ui
spec:
ports:
- name: ui
port: 3000
targetPort: 3000
selector:
service: llama-gpt-ui
type: ClusterIP
status:
loadBalancer: {}
================================================
FILE: docker-compose-cuda-ggml.yml
================================================
version: '3.6'
services:
llama-gpt-api-cuda-ggml:
build:
context: ./cuda
dockerfile: ggml.Dockerfile
restart: on-failure
volumes:
- './models:/models'
- './cuda:/cuda'
ports:
- 3001:8000
environment:
MODEL: '/models/${MODEL_NAME:-llama-2-7b-chat.bin}'
MODEL_DOWNLOAD_URL: '${MODEL_DOWNLOAD_URL:-https://huggingface.co/TheBloke/Nous-Hermes-Llama-2-7B-GGML/resolve/main/nous-hermes-llama-2-7b.ggmlv3.q4_0.bin}'
N_GQA: '${N_GQA:-1}'
USE_MLOCK: 1
cap_add:
- IPC_LOCK
- SYS_RESOURCE
command: '/bin/sh /cuda/run.sh'
deploy:
resources:
reservations:
devices:
- driver: nvidia
count: 1
capabilities: [gpu]
llama-gpt-ui:
# TODO: Use this image instead of building from source after the next release
# image: 'ghcr.io/getumbrel/llama-gpt-ui:latest'
build:
context: ./ui
dockerfile: Dockerfile
ports:
- 3000:3000
restart: on-failure
environment:
- 'OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXX'
- 'OPENAI_API_HOST=http://llama-gpt-api-cuda-ggml:8000'
- 'DEFAULT_MODEL=/models/${MODEL_NAME:-llama-2-7b-chat.bin}'
- 'NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT=${DEFAULT_SYSTEM_PROMPT:-"You are a helpful and friendly AI assistant. Respond very concisely."}'
- 'WAIT_HOSTS=llama-gpt-api-cuda-ggml:8000'
- 'WAIT_TIMEOUT=${WAIT_TIMEOUT:-3600}'
================================================
FILE: docker-compose-cuda-gguf.yml
================================================
version: '3.6'
services:
llama-gpt-api-cuda-gguf:
build:
context: ./cuda
dockerfile: gguf.Dockerfile
restart: on-failure
volumes:
- './models:/models'
- './cuda:/cuda'
ports:
- 3001:8000
environment:
MODEL: '/models/${MODEL_NAME:-code-llama-2-7b-chat.gguf}'
MODEL_DOWNLOAD_URL: '${MODEL_DOWNLOAD_URL:-https://huggingface.co/TheBloke/CodeLlama-7B-Instruct-GGUF/resolve/main/codellama-7b-instruct.Q4_K_M.gguf}'
N_GQA: '${N_GQA:-1}'
USE_MLOCK: 1
cap_add:
- IPC_LOCK
- SYS_RESOURCE
command: '/bin/sh /cuda/run.sh'
deploy:
resources:
reservations:
devices:
- driver: nvidia
count: 1
capabilities: [gpu]
llama-gpt-ui:
# TODO: Use this image instead of building from source after the next release
# image: 'ghcr.io/getumbrel/llama-gpt-ui:latest'
build:
context: ./ui
dockerfile: Dockerfile
ports:
- 3000:3000
restart: on-failure
environment:
- 'OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXX'
- 'OPENAI_API_HOST=http://llama-gpt-api-cuda-gguf:8000'
- 'DEFAULT_MODEL=/models/${MODEL_NAME:-code-llama-2-7b-chat.gguf}'
- 'NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT=${DEFAULT_SYSTEM_PROMPT:-"You are a helpful and friendly AI assistant. Respond very concisely."}'
- 'WAIT_HOSTS=llama-gpt-api-cuda-gguf:8000'
- 'WAIT_TIMEOUT=${WAIT_TIMEOUT:-3600}'
================================================
FILE: docker-compose-gguf.yml
================================================
version: '3.6'
services:
llama-gpt-api:
# Pin to llama-cpp-python 0.1.80 with GGUF support
image: ghcr.io/abetlen/llama-cpp-python:latest@sha256:de0fd227f348b5e43d4b5b7300f1344e712c14132914d1332182e9ecfde502b2
restart: on-failure
volumes:
- './models:/models'
- './api:/api'
ports:
- 3001:8000
environment:
MODEL: '/models/${MODEL_NAME:-code-llama-2-7b-chat.gguf}'
MODEL_DOWNLOAD_URL: '${MODEL_DOWNLOAD_URL:-https://huggingface.co/TheBloke/CodeLlama-7B-Instruct-GGUF/resolve/main/codellama-7b-instruct.Q4_K_M.gguf}'
N_GQA: '${N_GQA:-1}'
USE_MLOCK: 1
cap_add:
- IPC_LOCK
command: '/bin/sh /api/run.sh'
llama-gpt-ui:
# TODO: Use this image instead of building from source after the next release
# image: 'ghcr.io/getumbrel/llama-gpt-ui:latest'
build:
context: ./ui
dockerfile: Dockerfile
ports:
- 3000:3000
restart: on-failure
environment:
- 'OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXX'
- 'OPENAI_API_HOST=http://llama-gpt-api:8000'
- 'DEFAULT_MODEL=/models/${MODEL_NAME:-llama-2-7b-chat.bin}'
- 'NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT=${DEFAULT_SYSTEM_PROMPT:-"You are a helpful and friendly AI assistant. Respond very concisely."}'
- 'WAIT_HOSTS=llama-gpt-api:8000'
- 'WAIT_TIMEOUT=${WAIT_TIMEOUT:-3600}'
================================================
FILE: docker-compose-mac.yml
================================================
version: '3.6'
services:
llama-gpt-ui-mac:
build:
context: ./ui
dockerfile: no-wait.Dockerfile
ports:
- 3000:3000
restart: on-failure
environment:
- 'OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXX'
- 'OPENAI_API_HOST=http://host.docker.internal:3001'
- 'DEFAULT_MODEL=$MODEL'
- 'NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT=${DEFAULT_SYSTEM_PROMPT:-"You are a helpful and friendly AI assistant. Respond very concisely and use markdown if responding with code."}'
================================================
FILE: docker-compose.yml
================================================
version: '3.6'
services:
llama-gpt-api:
# Pin the image to llama-cpp-python 0.1.78 to avoid ggml => gguf breaking changes
image: ghcr.io/abetlen/llama-cpp-python:latest@sha256:b6d21ff8c4d9baad65e1fa741a0f8c898d68735fff3f3cd777e3f0c6a1839dd4
restart: on-failure
volumes:
- './models:/models'
- './api:/api'
ports:
- 3001:8000
environment:
MODEL: '/models/${MODEL_NAME:-llama-2-7b-chat.bin}'
MODEL_DOWNLOAD_URL: '${MODEL_DOWNLOAD_URL:-https://huggingface.co/TheBloke/Nous-Hermes-Llama-2-7B-GGML/resolve/main/nous-hermes-llama-2-7b.ggmlv3.q4_0.bin}'
N_GQA: '${N_GQA:-1}'
USE_MLOCK: 1
cap_add:
- IPC_LOCK
command: '/bin/sh /api/run.sh'
llama-gpt-ui:
# TODO: Use this image instead of building from source after the next release
# image: 'ghcr.io/getumbrel/llama-gpt-ui:latest'
build:
context: ./ui
dockerfile: Dockerfile
ports:
- 3000:3000
restart: on-failure
environment:
- 'OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXX'
- 'OPENAI_API_HOST=http://llama-gpt-api:8000'
- 'DEFAULT_MODEL=/models/${MODEL_NAME:-llama-2-7b-chat.bin}'
- 'NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT=${DEFAULT_SYSTEM_PROMPT:-"You are a helpful and friendly AI assistant. Respond very concisely."}'
- 'WAIT_HOSTS=llama-gpt-api:8000'
- 'WAIT_TIMEOUT=${WAIT_TIMEOUT:-3600}'
================================================
FILE: models/.gitkeep
================================================
================================================
FILE: run-mac.sh
================================================
#!/bin/bash
set -e
# Define a function to refresh the source of .zshrc or .bashrc
source_shell_rc() {
# Source .zshrc or .bashrc
if [ -f ~/.zshrc ]; then
source ~/.zshrc
elif [ -f ~/.bashrc ]; then
source ~/.bashrc
else
echo "No .bashrc or .zshrc file found."
fi
}
# Define a function to install conda with Miniforge3
install_conda() {
# Download Miniforge3
curl -L -o /tmp/Miniforge3.sh https://github.com/conda-forge/miniforge/releases/latest/download/Miniforge3-MacOSX-arm64.sh
bash /tmp/Miniforge3.sh
source_shell_rc
}
# Define a function to install a specific version of llama-cpp-python
install_llama_cpp_python() {
local model_type=$1
local version=$2
local installed_version=$(pip3 show llama-cpp-python | grep -i version | awk '{print $2}')
if [[ "$installed_version" != "$version" ]]; then
echo "llama-cpp-python version is not $version. Installing $version version for $model_type support..."
pip3 uninstall llama-cpp-python -y
CMAKE_ARGS="-DLLAMA_METAL=on" FORCE_CMAKE=1 pip3 install llama-cpp-python==$version --no-cache-dir
pip3 install 'llama-cpp-python[server]'
else
echo "llama-cpp-python version is $version."
fi
}
source_shell_rc
# Check if the platform is MacOS and the architecture is arm64
if [[ "$(uname)" != "Darwin" ]] || [[ "$(uname -m)" != "arm64" ]]; then
echo "This script is intended to be run on MacOS with M1/M2 chips. Exiting..."
exit 1
fi
# Check if Docker is installed
if ! command -v docker &> /dev/null; then
echo "Docker is not installed. Exiting..."
exit 1
fi
# Check if python3 is installed
if ! command -v python3 &> /dev/null; then
echo "Python3 is not installed. Exiting..."
exit 1
fi
# Check if Xcode is installed
xcode_path=$(xcode-select -p 2>/dev/null)
if [ -z "$xcode_path" ]; then
echo "Xcode is not installed. Installing (this may take a long time)..."
xcode-select --install
else
echo "Xcode is installed at $xcode_path"
fi
# Check if conda is installed
if ! command -v conda &> /dev/null; then
echo "Conda is not installed. Installing Miniforge3 which includes conda..."
install_conda
else
echo "Conda is installed."
# TODO: Check if the conda version for MacOS that supports Metal GPU is installed
# conda_version=$(conda --version)
# if [[ $conda_version != *"Miniforge3"* ]]; then
# echo "Conda version that supports Metal GPU is not installed. Installing..."
# install_conda
# else
# echo "Conda version that supports M1/M2 is installed."
# fi
fi
# Check if the conda environment 'llama-gpt' exists
if conda env list | grep -q 'llama-gpt'; then
echo "Conda environment 'llama-gpt' already exists."
else
echo "Creating a conda environment called 'llama-gpt'..."
conda create -n llama-gpt python=$(python3 --version | cut -d ' ' -f 2)
fi
# Check if the conda environment 'llama-gpt' is active
if [[ "$(conda info --envs | grep '*' | awk '{print $1}')" != "llama-gpt" ]]; then
echo "Activating the conda environment 'llama-gpt'..."
conda activate llama-gpt
else
echo "Conda environment 'llama-gpt' is already active."
fi
# Parse command line arguments for --model
while [[ "$#" -gt 0 ]]; do
case $1 in
--model) MODEL="$2"; shift ;;
*) echo "Unknown parameter passed: $1"; exit 1 ;;
esac
shift
done
# If no model is passed, default to 7b model
if [[ -z "$MODEL" ]]; then
echo "No model value provided. Defaulting to 7b. If you want to change the model, exit the script and use --model to provide the model value."
echo "Supported models are 7b, 13b, 70b, code-7b, code-13b, code-34b."
MODEL="7b"
fi
# Get the number of available CPU cores and subtract 2
n_threads=$(($(sysctl -n hw.logicalcpu) - 2))
# Define context window
n_ctx=4096
# Define batch size
n_batch=2096
# Define number of GPU layers
n_gpu_layers=1
# Define grouping factor
N_GQA=1
model_type="gguf"
# Set values for MODEL and MODEL_DOWNLOAD_URL based on the model passed
case $MODEL in
7b)
MODEL="./models/llama-2-7b-chat.bin"
MODEL_DOWNLOAD_URL="https://huggingface.co/TheBloke/Nous-Hermes-Llama-2-7B-GGML/resolve/main/nous-hermes-llama-2-7b.ggmlv3.q4_0.bin"
model_type="ggml"
;;
13b)
MODEL="./models/llama-2-13b-chat.bin"
MODEL_DOWNLOAD_URL="https://huggingface.co/TheBloke/Nous-Hermes-Llama2-GGML/resolve/main/nous-hermes-llama2-13b.ggmlv3.q4_0.bin"
model_type="ggml"
n_gpu_layers=2
;;
70b)
MODEL="./models/llama-2-70b-chat.bin"
MODEL_DOWNLOAD_URL="https://huggingface.co/TheBloke/Llama-2-70B-Chat-GGML/resolve/main/llama-2-70b-chat.ggmlv3.q4_0.bin"
model_type="ggml"
n_gpu_layers=3
# Llama 2 70B's grouping factor is 8 compared to 7B and 13B's 1.
N_GQA=8
;;
code-7b)
MODEL="./models/code-llama-7b-chat.gguf"
MODEL_DOWNLOAD_URL="https://huggingface.co/TheBloke/CodeLlama-7B-Instruct-GGUF/resolve/main/codellama-7b-instruct.Q4_K_M.gguf"
DEFAULT_SYSTEM_PROMPT="You are a helpful coding assistant. Use markdown when responding with code."
n_gpu_layers=1
n_ctx=8192
;;
code-13b)
MODEL="./models/code-llama-13b-chat.gguf"
MODEL_DOWNLOAD_URL="https://huggingface.co/TheBloke/CodeLlama-13B-Instruct-GGUF/resolve/main/codellama-13b-instruct.Q4_K_M.gguf"
DEFAULT_SYSTEM_PROMPT="You are a helpful coding assistant. Use markdown when responding with code."
n_gpu_layers=2
n_ctx=8192
;;
code-34b)
MODEL="./models/code-llama-34b-chat.gguf"
MODEL_DOWNLOAD_URL="https://huggingface.co/TheBloke/Phind-CodeLlama-34B-v1-GGUF/resolve/main/phind-codellama-34b-v1.Q4_K_M.gguf"
DEFAULT_SYSTEM_PROMPT="You are a helpful coding assistant. Use markdown when responding with code."
n_gpu_layers=3
n_ctx=8192
# Code Llama 34B's grouping factor is 8 compared to 7B and 13B's 1.
N_GQA=8
;;
*)
echo "Invalid model passed: $MODEL"; exit 1
;;
esac
# Check if llama-cpp-python is already installed
llama_cpp_python_installed=$(pip3 list | grep -q llama-cpp-python && echo "installed" || echo "not installed")
if [[ "$llama_cpp_python_installed" == "not installed" ]]; then
echo "llama-cpp-python is not installed. Installing..."
if [[ "$model_type" == "ggml" ]]; then
install_llama_cpp_python "GGML" "0.1.78"
else
install_llama_cpp_python "GGUF" "0.1.80"
fi
else
echo "llama-cpp-python is installed."
if [[ "$model_type" == "ggml" ]]; then
install_llama_cpp_python "GGML" "0.1.78"
else
install_llama_cpp_python "GGUF" "0.1.80"
fi
fi
# Check if the model file exists
if [ ! -f $MODEL ]; then
echo "Model file not found. Downloading..."
# Download the model file with a custom progress bar showing percentage, download speed, downloaded, total size, and estimated time remaining
curl -L -o $MODEL $MODEL_DOWNLOAD_URL
if [ $? -ne 0 ]; then
echo "Download failed. Trying with TLS 1.2..."
curl -L --tlsv1.2 -o $MODEL $MODEL_DOWNLOAD_URL
fi
else
echo "$MODEL model found."
fi
# Display configuration information
echo "Initializing server with:"
echo "Batch size: $n_batch"
echo "Number of CPU threads: $n_threads"
echo "Number of GPU layers: $n_gpu_layers"
echo "Context window: $n_ctx"
echo "GQA: $n_gqa"
# Export environment variables
export MODEL
export N_GQA
export DEFAULT_SYSTEM_PROMPT
# Run docker-compose with the macOS yml file
docker compose -f ./docker-compose-mac.yml up --remove-orphans --build &
# Run the server
python3 -m llama_cpp.server --n_ctx $n_ctx --n_threads $n_threads --n_gpu_layers $n_gpu_layers --n_batch $n_batch --model $MODEL --port 3001 &
# Define a function to stop docker-compose and the python3 command
stop_commands() {
echo "Stopping docker-compose..."
docker compose -f ./docker-compose-mac.yml down
echo "Stopping python server..."
pkill -f "python3 -m llama_cpp.server"
echo "Deactivating conda environment..."
conda deactivate
echo "All processes stopped."
}
# Set a trap to catch SIGINT and stop the commands
trap stop_commands SIGINT
# Wait for both commands to finish
wait $DOCKER_COMPOSE_PID
wait $PYTHON_PID
================================================
FILE: run.sh
================================================
#!/bin/bash
# Check if docker compose is installed
if ! command -v docker &> /dev/null
then
echo "Docker could not be found. Please install Docker and try again."
exit
fi
# Parse command line arguments for model value and check for --with-cuda flag
with_cuda=0
while [[ "$#" -gt 0 ]]; do
case $1 in
--model) model="$2"; shift ;;
--with-cuda) with_cuda=1 ;;
*) echo "Unknown parameter passed: $1"; exit 1 ;;
esac
shift
done
# Check if model value is provided
if [ -z "$model" ]
then
echo "No model value provided. Defaulting to 7b. If you want to change the model, exit the script and use --model to provide the model value."
echo "Supported models are 7b, 13b, 70b, code-7b, code-13b, code-34b."
model="7b"
fi
model_type="gguf"
# Export the model value as an environment variable
case $model in
7b)
export MODEL_NAME="llama-2-7b-chat.bin"
export MODEL_DOWNLOAD_URL="https://huggingface.co/TheBloke/Nous-Hermes-Llama-2-7B-GGML/resolve/main/nous-hermes-llama-2-7b.ggmlv3.q4_0.bin"
export WAIT_TIMEOUT=3600
export N_GQA=1
model_type="ggml"
;;
13b)
export MODEL_NAME="llama-2-13b-chat.bin"
export MODEL_DOWNLOAD_URL="https://huggingface.co/TheBloke/Nous-Hermes-Llama2-GGML/resolve/main/nous-hermes-llama2-13b.ggmlv3.q4_0.bin"
export WAIT_TIMEOUT=10800
export N_GQA=1
model_type="ggml"
;;
70b)
export MODEL_NAME="llama-2-70b-chat.bin"
export MODEL_DOWNLOAD_URL="https://huggingface.co/TheBloke/Nous-Hermes-Llama2-70B-GGML/resolve/main/nous-hermes-llama2-70b.ggmlv3.Q4_0.bin"
export WAIT_TIMEOUT=21600
# Llama 2 70B's grouping factor is 8 compared to 7B and 13B's 1. Currently,
# it's not possible to change this using --n_gqa with llama-cpp-python in
# run.sh, so we expose it as an environment variable.
# See: https://github.com/abetlen/llama-cpp-python/issues/528
# and: https://github.com/facebookresearch/llama/issues/407
export N_GQA=8
model_type="ggml"
;;
code-7b)
export MODEL_NAME="code-llama-7b-chat.gguf"
export MODEL_DOWNLOAD_URL="https://huggingface.co/TheBloke/CodeLlama-7B-Instruct-GGUF/resolve/main/codellama-7b-instruct.Q4_K_M.gguf"
export WAIT_TIMEOUT=3600
export DEFAULT_SYSTEM_PROMPT="You are a helpful coding assistant. Use markdown when responding with code."
export N_GQA=1
;;
code-13b)
export MODEL_NAME="code-llama-13b-chat.gguf"
export MODEL_DOWNLOAD_URL="https://huggingface.co/TheBloke/CodeLlama-13B-Instruct-GGUF/resolve/main/codellama-13b-instruct.Q4_K_M.gguf"
export DEFAULT_SYSTEM_PROMPT="You are a helpful coding assistant. Use markdown when responding with code."
export WAIT_TIMEOUT=10800
export N_GQA=1
;;
code-34b)
export MODEL_NAME="code-llama-34b-chat.gguf"
export MODEL_DOWNLOAD_URL="https://huggingface.co/TheBloke/Phind-CodeLlama-34B-v1-GGUF/resolve/main/phind-codellama-34b-v1.Q4_K_M.gguf"
export DEFAULT_SYSTEM_PROMPT="You are a helpful coding assistant. Use markdown when responding with code."
export WAIT_TIMEOUT=21600
# Code Llama 34B's grouping factor is 8 compared to 7B and 13B's 1. Currently,
# it's not possible to change this using --n_gqa with llama-cpp-python in
# run.sh, so we expose it as an environment variable.
# See: https://github.com/abetlen/llama-cpp-python/issues/528
export N_GQA=8
;;
*)
echo "Invalid model value provided. Supported models are 7b, 13b, 70b, code-7b, code-13b, code-34b."
exit 1
;;
esac
# Run docker compose with docker-compose-ggml.yml or docker-compose-gguf.yml
if [ "$with_cuda" -eq 1 ]
then
if [ "$model_type" = "ggml" ]
then
docker compose -f docker-compose-cuda-ggml.yml up --build
else
docker compose -f docker-compose-cuda-gguf.yml up --build
fi
else
if [ "$model_type" = "ggml" ]
then
docker compose -f docker-compose.yml up --build
else
docker compose -f docker-compose-gguf.yml up --build
fi
fi
================================================
FILE: ui/.dockerignore
================================================
.env
.env.local
node_modules
test-results
================================================
FILE: ui/.eslintrc.json
================================================
{
"extends": "next/core-web-vitals"
}
================================================
FILE: ui/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
/test-results
# next.js
/.next/
/out/
/dist
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
.idea
pnpm-lock.yaml
================================================
FILE: ui/CONTRIBUTING.md
================================================
# Contributing Guidelines
**Welcome to Chatbot UI!**
We appreciate your interest in contributing to our project.
Before you get started, please read our guidelines for contributing.
## Types of Contributions
We welcome the following types of contributions:
- Bug fixes
- New features
- Documentation improvements
- Code optimizations
- Translations
- Tests
## Getting Started
To get started, fork the project on GitHub and clone it locally on your machine. Then, create a new branch to work on your changes.
```
git clone https://github.com/mckaywrigley/chatbot-ui.git
cd chatbot-ui
git checkout -b my-branch-name
```
Before submitting your pull request, please make sure your changes pass our automated tests and adhere to our code style guidelines.
## Pull Request Process
1. Fork the project on GitHub.
2. Clone your forked repository locally on your machine.
3. Create a new branch from the main branch.
4. Make your changes on the new branch.
5. Ensure that your changes adhere to our code style guidelines and pass our automated tests.
6. Commit your changes and push them to your forked repository.
7. Submit a pull request to the main branch of the main repository.
## Contact
If you have any questions or need help getting started, feel free to reach out to me on [Twitter](https://twitter.com/mckaywrigley).
================================================
FILE: ui/Dockerfile
================================================
# ---- Base Node ----
FROM node:19-alpine AS base
WORKDIR /app
COPY package*.json ./
# ---- Dependencies ----
FROM base AS dependencies
RUN npm ci
# ---- Build ----
FROM dependencies AS build
COPY . .
RUN npm run build
# ---- Production ----
FROM node:19-alpine AS production
WORKDIR /app
COPY --from=dependencies /app/node_modules ./node_modules
COPY --from=build /app/.next ./.next
COPY --from=build /app/public ./public
COPY --from=build /app/package*.json ./
COPY --from=build /app/next.config.js ./next.config.js
COPY --from=build /app/next-i18next.config.js ./next-i18next.config.js
## Add the wait script to the image
COPY --from=ghcr.io/ufoscout/docker-compose-wait:latest /wait /wait
# Expose the port the app will run on
EXPOSE 3000
# Start the application after the API is ready
CMD /wait && npm start
================================================
FILE: ui/Makefile
================================================
include .env
.PHONY: all
build:
docker build -t chatbot-ui .
run:
export $(cat .env | xargs)
docker stop chatbot-ui || true && docker rm chatbot-ui || true
docker run --name chatbot-ui --rm -e OPENAI_API_KEY=${OPENAI_API_KEY} -p 3000:3000 chatbot-ui
logs:
docker logs -f chatbot-ui
push:
docker tag chatbot-ui:latest ${DOCKER_USER}/chatbot-ui:${DOCKER_TAG}
docker push ${DOCKER_USER}/chatbot-ui:${DOCKER_TAG}
================================================
FILE: ui/__tests__/utils/app/importExports.test.ts
================================================
import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';
import {
cleanData,
isExportFormatV1,
isExportFormatV2,
isExportFormatV3,
isExportFormatV4,
isLatestExportFormat,
} from '@/utils/app/importExport';
import { ExportFormatV1, ExportFormatV2, ExportFormatV4 } from '@/types/export';
import { OpenAIModelID, OpenAIModels } from '@/types/openai';
import { describe, expect, it } from 'vitest';
describe('Export Format Functions', () => {
describe('isExportFormatV1', () => {
it('should return true for v1 format', () => {
const obj = [{ id: 1 }];
expect(isExportFormatV1(obj)).toBe(true);
});
it('should return false for non-v1 formats', () => {
const obj = { version: 3, history: [], folders: [] };
expect(isExportFormatV1(obj)).toBe(false);
});
});
describe('isExportFormatV2', () => {
it('should return true for v2 format', () => {
const obj = { history: [], folders: [] };
expect(isExportFormatV2(obj)).toBe(true);
});
it('should return false for non-v2 formats', () => {
const obj = { version: 3, history: [], folders: [] };
expect(isExportFormatV2(obj)).toBe(false);
});
});
describe('isExportFormatV3', () => {
it('should return true for v3 format', () => {
const obj = { version: 3, history: [], folders: [] };
expect(isExportFormatV3(obj)).toBe(true);
});
it('should return false for non-v3 formats', () => {
const obj = { version: 4, history: [], folders: [] };
expect(isExportFormatV3(obj)).toBe(false);
});
});
describe('isExportFormatV4', () => {
it('should return true for v4 format', () => {
const obj = { version: 4, history: [], folders: [], prompts: [] };
expect(isExportFormatV4(obj)).toBe(true);
});
it('should return false for non-v4 formats', () => {
const obj = { version: 5, history: [], folders: [], prompts: [] };
expect(isExportFormatV4(obj)).toBe(false);
});
});
});
describe('cleanData Functions', () => {
describe('cleaning v1 data', () => {
it('should return the latest format', () => {
const data = [
{
id: 1,
name: 'conversation 1',
messages: [
{
role: 'user',
content: "what's up ?",
},
{
role: 'assistant',
content: 'Hi',
},
],
},
] as ExportFormatV1;
const obj = cleanData(data);
expect(isLatestExportFormat(obj)).toBe(true);
expect(obj).toEqual({
version: 4,
history: [
{
id: 1,
name: 'conversation 1',
messages: [
{
role: 'user',
content: "what's up ?",
},
{
role: 'assistant',
content: 'Hi',
},
],
model: OpenAIModels[OpenAIModelID.GPT_3_5],
prompt: DEFAULT_SYSTEM_PROMPT,
temperature: DEFAULT_TEMPERATURE,
folderId: null,
},
],
folders: [],
prompts: [],
});
});
});
describe('cleaning v2 data', () => {
it('should return the latest format', () => {
const data = {
history: [
{
id: '1',
name: 'conversation 1',
messages: [
{
role: 'user',
content: "what's up ?",
},
{
role: 'assistant',
content: 'Hi',
},
],
},
],
folders: [
{
id: 1,
name: 'folder 1',
},
],
} as ExportFormatV2;
const obj = cleanData(data);
expect(isLatestExportFormat(obj)).toBe(true);
expect(obj).toEqual({
version: 4,
history: [
{
id: '1',
name: 'conversation 1',
messages: [
{
role: 'user',
content: "what's up ?",
},
{
role: 'assistant',
content: 'Hi',
},
],
model: OpenAIModels[OpenAIModelID.GPT_3_5],
prompt: DEFAULT_SYSTEM_PROMPT,
temperature: DEFAULT_TEMPERATURE,
folderId: null,
},
],
folders: [
{
id: '1',
name: 'folder 1',
type: 'chat',
},
],
prompts: [],
});
});
});
describe('cleaning v4 data', () => {
it('should return the latest format', () => {
const data = {
version: 4,
history: [
{
id: '1',
name: 'conversation 1',
messages: [
{
role: 'user',
content: "what's up ?",
},
{
role: 'assistant',
content: 'Hi',
},
],
model: OpenAIModels[OpenAIModelID.GPT_3_5],
prompt: DEFAULT_SYSTEM_PROMPT,
temperature: DEFAULT_TEMPERATURE,
folderId: null,
},
],
folders: [
{
id: '1',
name: 'folder 1',
type: 'chat',
},
],
prompts: [
{
id: '1',
name: 'prompt 1',
description: '',
content: '',
model: OpenAIModels[OpenAIModelID.GPT_3_5],
folderId: null,
},
],
} as ExportFormatV4;
const obj = cleanData(data);
expect(isLatestExportFormat(obj)).toBe(true);
expect(obj).toEqual({
version: 4,
history: [
{
id: '1',
name: 'conversation 1',
messages: [
{
role: 'user',
content: "what's up ?",
},
{
role: 'assistant',
content: 'Hi',
},
],
model: OpenAIModels[OpenAIModelID.GPT_3_5],
prompt: DEFAULT_SYSTEM_PROMPT,
temperature: DEFAULT_TEMPERATURE,
folderId: null,
},
],
folders: [
{
id: '1',
name: 'folder 1',
type: 'chat',
},
],
prompts: [
{
id: '1',
name: 'prompt 1',
description: '',
content: '',
model: OpenAIModels[OpenAIModelID.GPT_3_5],
folderId: null,
},
],
});
});
});
});
================================================
FILE: ui/components/Buttons/SidebarActionButton/SidebarActionButton.tsx
================================================
import { MouseEventHandler, ReactElement } from 'react';
interface Props {
handleClick: MouseEventHandler<HTMLButtonElement>;
children: ReactElement;
}
const SidebarActionButton = ({ handleClick, children }: Props) => (
<button
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
onClick={handleClick}
>
{children}
</button>
);
export default SidebarActionButton;
================================================
FILE: ui/components/Buttons/SidebarActionButton/index.ts
================================================
export { default } from './SidebarActionButton';
================================================
FILE: ui/components/Chat/Chat.tsx
================================================
import { IconClearAll, IconSettings } from '@tabler/icons-react';
import {
MutableRefObject,
memo,
useCallback,
useContext,
useEffect,
useRef,
useState,
} from 'react';
import toast from 'react-hot-toast';
import { useTranslation } from 'next-i18next';
import { getEndpoint } from '@/utils/app/api';
import {
saveConversation,
saveConversations,
updateConversation,
} from '@/utils/app/conversation';
import { throttle } from '@/utils/data/throttle';
import { ChatBody, Conversation, Message } from '@/types/chat';
import { Plugin } from '@/types/plugin';
import HomeContext from '@/pages/api/home/home.context';
import Spinner from '../Spinner';
import { ChatInput } from './ChatInput';
import { ChatLoader } from './ChatLoader';
import { ErrorMessageDiv } from './ErrorMessageDiv';
import { ModelSelect } from './ModelSelect';
import { SystemPrompt } from './SystemPrompt';
import { TemperatureSlider } from './Temperature';
import { MemoizedChatMessage } from './MemoizedChatMessage';
interface Props {
stopConversationRef: MutableRefObject<boolean>;
}
export const Chat = memo(({ stopConversationRef }: Props) => {
const { t } = useTranslation('chat');
const {
state: {
selectedConversation,
conversations,
models,
apiKey,
pluginKeys,
serverSideApiKeyIsSet,
messageIsStreaming,
modelError,
loading,
prompts,
},
handleUpdateConversation,
dispatch: homeDispatch,
} = useContext(HomeContext);
const [currentMessage, setCurrentMessage] = useState<Message>();
const [autoScrollEnabled, setAutoScrollEnabled] = useState<boolean>(true);
const [showSettings, setShowSettings] = useState<boolean>(false);
const [showScrollDownButton, setShowScrollDownButton] =
useState<boolean>(false);
const messagesEndRef = useRef<HTMLDivElement>(null);
const chatContainerRef = useRef<HTMLDivElement>(null);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const handleSend = useCallback(
async (message: Message, deleteCount = 0, plugin: Plugin | null = null) => {
if (selectedConversation) {
let updatedConversation: Conversation;
if (deleteCount) {
const updatedMessages = [...selectedConversation.messages];
for (let i = 0; i < deleteCount; i++) {
updatedMessages.pop();
}
updatedConversation = {
...selectedConversation,
messages: [...updatedMessages, message],
};
} else {
updatedConversation = {
...selectedConversation,
messages: [...selectedConversation.messages, message],
};
}
homeDispatch({
field: 'selectedConversation',
value: updatedConversation,
});
homeDispatch({ field: 'loading', value: true });
homeDispatch({ field: 'messageIsStreaming', value: true });
const chatBody: ChatBody = {
model: updatedConversation.model,
messages: updatedConversation.messages,
key: apiKey,
prompt: updatedConversation.prompt,
temperature: updatedConversation.temperature,
};
const endpoint = getEndpoint(plugin);
let body;
if (!plugin) {
body = JSON.stringify(chatBody);
} else {
body = JSON.stringify({
...chatBody,
googleAPIKey: pluginKeys
.find((key) => key.pluginId === 'google-search')
?.requiredKeys.find((key) => key.key === 'GOOGLE_API_KEY')?.value,
googleCSEId: pluginKeys
.find((key) => key.pluginId === 'google-search')
?.requiredKeys.find((key) => key.key === 'GOOGLE_CSE_ID')?.value,
});
}
const controller = new AbortController();
const response = await fetch(endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
signal: controller.signal,
body,
});
if (!response.ok) {
homeDispatch({ field: 'loading', value: false });
homeDispatch({ field: 'messageIsStreaming', value: false });
toast.error(response.statusText);
return;
}
const data = response.body;
if (!data) {
homeDispatch({ field: 'loading', value: false });
homeDispatch({ field: 'messageIsStreaming', value: false });
return;
}
if (!plugin) {
if (updatedConversation.messages.length === 1) {
const { content } = message;
const customName =
content.length > 30 ? content.substring(0, 30) + '...' : content;
updatedConversation = {
...updatedConversation,
name: customName,
};
}
homeDispatch({ field: 'loading', value: false });
const reader = data.getReader();
const decoder = new TextDecoder();
let done = false;
let isFirst = true;
let text = '';
while (!done) {
if (stopConversationRef.current === true) {
controller.abort();
done = true;
break;
}
const { value, done: doneReading } = await reader.read();
done = doneReading;
const chunkValue = decoder.decode(value);
text += chunkValue;
if (isFirst) {
isFirst = false;
const updatedMessages: Message[] = [
...updatedConversation.messages,
{ role: 'assistant', content: chunkValue },
];
updatedConversation = {
...updatedConversation,
messages: updatedMessages,
};
homeDispatch({
field: 'selectedConversation',
value: updatedConversation,
});
} else {
const updatedMessages: Message[] =
updatedConversation.messages.map((message, index) => {
if (index === updatedConversation.messages.length - 1) {
return {
...message,
content: text,
};
}
return message;
});
updatedConversation = {
...updatedConversation,
messages: updatedMessages,
};
homeDispatch({
field: 'selectedConversation',
value: updatedConversation,
});
}
}
saveConversation(updatedConversation);
const updatedConversations: Conversation[] = conversations.map(
(conversation) => {
if (conversation.id === selectedConversation.id) {
return updatedConversation;
}
return conversation;
},
);
if (updatedConversations.length === 0) {
updatedConversations.push(updatedConversation);
}
homeDispatch({ field: 'conversations', value: updatedConversations });
saveConversations(updatedConversations);
homeDispatch({ field: 'messageIsStreaming', value: false });
} else {
const { answer } = await response.json();
const updatedMessages: Message[] = [
...updatedConversation.messages,
{ role: 'assistant', content: answer },
];
updatedConversation = {
...updatedConversation,
messages: updatedMessages,
};
homeDispatch({
field: 'selectedConversation',
value: updateConversation,
});
saveConversation(updatedConversation);
const updatedConversations: Conversation[] = conversations.map(
(conversation) => {
if (conversation.id === selectedConversation.id) {
return updatedConversation;
}
return conversation;
},
);
if (updatedConversations.length === 0) {
updatedConversations.push(updatedConversation);
}
homeDispatch({ field: 'conversations', value: updatedConversations });
saveConversations(updatedConversations);
homeDispatch({ field: 'loading', value: false });
homeDispatch({ field: 'messageIsStreaming', value: false });
}
}
},
[
apiKey,
conversations,
pluginKeys,
selectedConversation,
stopConversationRef,
],
);
const scrollToBottom = useCallback(() => {
if (autoScrollEnabled) {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
textareaRef.current?.focus();
}
}, [autoScrollEnabled]);
const handleScroll = () => {
if (chatContainerRef.current) {
const { scrollTop, scrollHeight, clientHeight } =
chatContainerRef.current;
const bottomTolerance = 30;
if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
setAutoScrollEnabled(false);
setShowScrollDownButton(true);
} else {
setAutoScrollEnabled(true);
setShowScrollDownButton(false);
}
}
};
const handleScrollDown = () => {
chatContainerRef.current?.scrollTo({
top: chatContainerRef.current.scrollHeight,
behavior: 'smooth',
});
};
const handleSettings = () => {
setShowSettings(!showSettings);
};
const onClearAll = () => {
if (
confirm(t<string>('Are you sure you want to clear all messages?')) &&
selectedConversation
) {
handleUpdateConversation(selectedConversation, {
key: 'messages',
value: [],
});
}
};
const scrollDown = () => {
if (autoScrollEnabled) {
messagesEndRef.current?.scrollIntoView(true);
}
};
const throttledScrollDown = throttle(scrollDown, 250);
// useEffect(() => {
// console.log('currentMessage', currentMessage);
// if (currentMessage) {
// handleSend(currentMessage);
// homeDispatch({ field: 'currentMessage', value: undefined });
// }
// }, [currentMessage]);
useEffect(() => {
throttledScrollDown();
selectedConversation &&
setCurrentMessage(
selectedConversation.messages[selectedConversation.messages.length - 2],
);
}, [selectedConversation, throttledScrollDown]);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
setAutoScrollEnabled(entry.isIntersecting);
if (entry.isIntersecting) {
textareaRef.current?.focus();
}
},
{
root: null,
threshold: 0.5,
},
);
const messagesEndElement = messagesEndRef.current;
if (messagesEndElement) {
observer.observe(messagesEndElement);
}
return () => {
if (messagesEndElement) {
observer.unobserve(messagesEndElement);
}
};
}, [messagesEndRef]);
return (
<div className="relative flex-1 overflow-hidden bg-white dark:bg-[#100e14]">
{!(apiKey || serverSideApiKeyIsSet) ? (
<div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[600px]">
<div className="text-center text-4xl font-bold text-black dark:text-white">
LlamaGPT
</div>
<div className="text-center text-lg text-black dark:text-white">
<div className="mb-8">LlamaGPT 100% unaffiliated with OpenAI.</div>
</div>
<div className="text-center text-gray-500 dark:text-gray-400">
<div className="mb-2">
LlamaGPT allows you to self-host your own LLM.
</div>
</div>
</div>
) : modelError ? (
<ErrorMessageDiv error={modelError} />
) : (
<>
<div
className="max-h-full overflow-x-hidden"
ref={chatContainerRef}
onScroll={handleScroll}
>
{selectedConversation?.messages.length === 0 ? (
<>
<div className="mx-auto flex flex-col space-y-5 md:space-y-10 px-3 pt-5 md:pt-12 sm:max-w-[600px]">
<div className="text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
{models.length === 0 ? (
<div>
<Spinner size="16px" className="mx-auto" />
</div>
) : (
'LlamaGPT'
)}
</div>
{models.length > 0 && (
<div className="flex h-full flex-col space-y-4 rounded-lg border border-neutral-600 p-4 dark:border-neutral-700">
<ModelSelect />
<SystemPrompt
conversation={selectedConversation}
prompts={prompts}
onChangePrompt={(prompt) =>
handleUpdateConversation(selectedConversation, {
key: 'prompt',
value: prompt,
})
}
/>
<TemperatureSlider
label={t('Temperature')}
onChangeTemperature={(temperature) =>
handleUpdateConversation(selectedConversation, {
key: 'temperature',
value: temperature,
})
}
/>
</div>
)}
</div>
</>
) : (
<>
<div className="sticky top-0 z-10 flex justify-center border border-b-neutral-300 bg-neutral-100 py-2 text-sm text-neutral-500 dark:border-none dark:bg-[#161519] dark:text-neutral-200">
{t('Model')}: {selectedConversation?.model.name} | {t('Temp')}
: {selectedConversation?.temperature} |
<button
className="ml-2 cursor-pointer hover:opacity-50"
onClick={handleSettings}
>
<IconSettings size={18} />
</button>
<button
className="ml-2 cursor-pointer hover:opacity-50"
onClick={onClearAll}
>
<IconClearAll size={18} />
</button>
</div>
{showSettings && (
<div className="flex flex-col space-y-10 md:mx-auto md:max-w-xl md:gap-6 md:py-3 md:pt-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="flex h-full flex-col space-y-4 border-b border-neutral-600 p-4 dark:border-neutral-700 md:rounded-lg md:border">
<ModelSelect />
</div>
</div>
)}
{selectedConversation?.messages.map((message, index) => (
<MemoizedChatMessage
key={index}
message={message}
messageIndex={index}
onEdit={(editedMessage) => {
setCurrentMessage(editedMessage);
// discard edited message and the ones that come after then resend
handleSend(
editedMessage,
selectedConversation?.messages.length - index,
);
}}
/>
))}
{loading && <ChatLoader />}
<div
className="h-[162px] bg-white dark:bg-transparent"
ref={messagesEndRef}
/>
</>
)}
</div>
<ChatInput
stopConversationRef={stopConversationRef}
textareaRef={textareaRef}
onSend={(message, plugin) => {
setCurrentMessage(message);
handleSend(message, 0, plugin);
}}
onScrollDownClick={handleScrollDown}
onRegenerate={() => {
if (currentMessage) {
handleSend(currentMessage, 2, null);
}
}}
showScrollDownButton={showScrollDownButton}
/>
</>
)}
</div>
);
});
Chat.displayName = 'Chat';
================================================
FILE: ui/components/Chat/ChatInput.tsx
================================================
import {
IconArrowDown,
IconBolt,
IconBrandGoogle,
IconPlayerStop,
IconRepeat,
IconSend,
} from '@tabler/icons-react';
import {
KeyboardEvent,
MutableRefObject,
useCallback,
useContext,
useEffect,
useRef,
useState,
} from 'react';
import { useTranslation } from 'next-i18next';
import { Message } from '@/types/chat';
import { Plugin } from '@/types/plugin';
import { Prompt } from '@/types/prompt';
import HomeContext from '@/pages/api/home/home.context';
import { PluginSelect } from './PluginSelect';
import { PromptList } from './PromptList';
import { VariableModal } from './VariableModal';
interface Props {
onSend: (message: Message, plugin: Plugin | null) => void;
onRegenerate: () => void;
onScrollDownClick: () => void;
stopConversationRef: MutableRefObject<boolean>;
textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
showScrollDownButton: boolean;
}
export const ChatInput = ({
onSend,
onRegenerate,
onScrollDownClick,
stopConversationRef,
textareaRef,
showScrollDownButton,
}: Props) => {
const { t } = useTranslation('chat');
const {
state: { selectedConversation, messageIsStreaming, prompts },
dispatch: homeDispatch,
} = useContext(HomeContext);
const [content, setContent] = useState<string>();
const [isTyping, setIsTyping] = useState<boolean>(false);
const [showPromptList, setShowPromptList] = useState(false);
const [activePromptIndex, setActivePromptIndex] = useState(0);
const [promptInputValue, setPromptInputValue] = useState('');
const [variables, setVariables] = useState<string[]>([]);
const [isModalVisible, setIsModalVisible] = useState(false);
const [showPluginSelect, setShowPluginSelect] = useState(false);
const [plugin, setPlugin] = useState<Plugin | null>(null);
const promptListRef = useRef<HTMLUListElement | null>(null);
const filteredPrompts = prompts.filter((prompt) =>
prompt.name.toLowerCase().includes(promptInputValue.toLowerCase()),
);
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
const maxLength = selectedConversation?.model.maxLength;
if (maxLength && value.length > maxLength) {
alert(
t(
`Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`,
{ maxLength, valueLength: value.length },
),
);
return;
}
setContent(value);
updatePromptListVisibility(value);
};
const handleSend = () => {
if (messageIsStreaming) {
return;
}
if (!content) {
alert(t('Please enter a message'));
return;
}
onSend({ role: 'user', content }, plugin);
setContent('');
setPlugin(null);
if (window.innerWidth < 640 && textareaRef && textareaRef.current) {
textareaRef.current.blur();
}
};
const handleStopConversation = () => {
stopConversationRef.current = true;
setTimeout(() => {
stopConversationRef.current = false;
}, 1000);
};
const isMobile = () => {
const userAgent =
typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
const mobileRegex =
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
return mobileRegex.test(userAgent);
};
const handleInitModal = () => {
const selectedPrompt = filteredPrompts[activePromptIndex];
if (selectedPrompt) {
setContent((prevContent) => {
const newContent = prevContent?.replace(
/\/\w*$/,
selectedPrompt.content,
);
return newContent;
});
handlePromptSelect(selectedPrompt);
}
setShowPromptList(false);
};
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
if (showPromptList) {
if (e.key === 'ArrowDown') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex < prompts.length - 1 ? prevIndex + 1 : prevIndex,
);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex > 0 ? prevIndex - 1 : prevIndex,
);
} else if (e.key === 'Tab') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex < prompts.length - 1 ? prevIndex + 1 : 0,
);
} else if (e.key === 'Enter') {
e.preventDefault();
handleInitModal();
} else if (e.key === 'Escape') {
e.preventDefault();
setShowPromptList(false);
} else {
setActivePromptIndex(0);
}
} else if (e.key === 'Enter' && !isTyping && !isMobile() && !e.shiftKey) {
e.preventDefault();
handleSend();
} else if (e.key === '/' && e.metaKey) {
e.preventDefault();
setShowPluginSelect(!showPluginSelect);
}
};
const parseVariables = (content: string) => {
const regex = /{{(.*?)}}/g;
const foundVariables = [];
let match;
while ((match = regex.exec(content)) !== null) {
foundVariables.push(match[1]);
}
return foundVariables;
};
const updatePromptListVisibility = useCallback((text: string) => {
const match = text.match(/\/\w*$/);
if (match) {
setShowPromptList(true);
setPromptInputValue(match[0].slice(1));
} else {
setShowPromptList(false);
setPromptInputValue('');
}
}, []);
const handlePromptSelect = (prompt: Prompt) => {
const parsedVariables = parseVariables(prompt.content);
setVariables(parsedVariables);
if (parsedVariables.length > 0) {
setIsModalVisible(true);
} else {
setContent((prevContent) => {
const updatedContent = prevContent?.replace(/\/\w*$/, prompt.content);
return updatedContent;
});
updatePromptListVisibility(prompt.content);
}
};
const handleSubmit = (updatedVariables: string[]) => {
const newContent = content?.replace(/{{(.*?)}}/g, (match, variable) => {
const index = variables.indexOf(variable);
return updatedVariables[index];
});
setContent(newContent);
if (textareaRef && textareaRef.current) {
textareaRef.current.focus();
}
};
useEffect(() => {
if (promptListRef.current) {
promptListRef.current.scrollTop = activePromptIndex * 30;
}
}, [activePromptIndex]);
useEffect(() => {
if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = 'inherit';
textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
textareaRef.current.style.overflow = `${
textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden'
}`;
}
}, [content]);
useEffect(() => {
const handleOutsideClick = (e: MouseEvent) => {
if (
promptListRef.current &&
!promptListRef.current.contains(e.target as Node)
) {
setShowPromptList(false);
}
};
window.addEventListener('click', handleOutsideClick);
return () => {
window.removeEventListener('click', handleOutsideClick);
};
}, []);
return (
<div className="absolute bottom-0 left-0 w-full border-transparent bg-gradient-to-b from-transparent via-white to-white pt-6 dark:border-white/20 dark:via-[#121322] dark:to-[#0f0a28] md:pt-2">
<div className="stretch mx-2 mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:mt-[52px] md:last:mb-6 lg:mx-auto lg:max-w-3xl">
{messageIsStreaming && (
<button
className="absolute top-0 left-0 right-0 mx-auto mb-3 flex w-fit items-center gap-3 rounded border border-neutral-600 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-700 dark:bg-transparent dark:text-white md:mb-0 md:mt-2"
onClick={handleStopConversation}
>
<IconPlayerStop size={16} /> {t('Stop Generating')}
</button>
)}
{!messageIsStreaming &&
selectedConversation &&
selectedConversation.messages.length > 0 && (
<button
className="absolute top-0 left-0 right-0 mx-auto mb-3 flex w-fit items-center gap-3 rounded border border-neutral-600 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-700 dark:bg-transparent dark:text-white md:mb-0 md:mt-2"
onClick={onRegenerate}
>
<IconRepeat size={16} /> {t('Regenerate response')}
</button>
)}
<div className="relative mx-2 flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-[#27242e] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] sm:mx-4">
<button
className="absolute left-2 top-2 rounded-sm p-1 text-neutral-800 opacity-60 hover:bg-neutral-200 hover:text-neutral-900 dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
onClick={() => setShowPluginSelect(!showPluginSelect)}
onKeyDown={(e) => {}}
>
{plugin ? <IconBrandGoogle size={20} /> : <IconBolt size={20} />}
</button>
{showPluginSelect && (
<div className="absolute left-0 bottom-14 rounded bg-white dark:bg-transparent">
<PluginSelect
plugin={plugin}
onKeyDown={(e: any) => {
if (e.key === 'Escape') {
e.preventDefault();
setShowPluginSelect(false);
textareaRef.current?.focus();
}
}}
onPluginChange={(plugin: Plugin) => {
setPlugin(plugin);
setShowPluginSelect(false);
if (textareaRef && textareaRef.current) {
textareaRef.current.focus();
}
}}
/>
</div>
)}
<textarea
ref={textareaRef}
className="m-0 w-full resize-none border-0 bg-transparent p-0 py-2 pr-8 pl-10 text-black dark:bg-transparent dark:text-white md:py-3 md:pl-10"
style={{
resize: 'none',
bottom: `${textareaRef?.current?.scrollHeight}px`,
maxHeight: '400px',
overflow: `${
textareaRef.current && textareaRef.current.scrollHeight > 400
? 'auto'
: 'hidden'
}`,
}}
placeholder={
t('Type a message or type "/" to select a prompt...') || ''
}
value={content}
rows={1}
onCompositionStart={() => setIsTyping(true)}
onCompositionEnd={() => setIsTyping(false)}
onChange={handleChange}
onKeyDown={handleKeyDown}
/>
<button
className="absolute right-2 top-2 rounded-sm p-1 text-neutral-800 opacity-60 hover:bg-neutral-200 hover:text-neutral-900 dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
onClick={handleSend}
>
{messageIsStreaming ? (
<div className="h-4 w-4 animate-spin rounded-full border-t-2 border-neutral-800 opacity-60 dark:border-neutral-100"></div>
) : (
<IconSend size={18} />
)}
</button>
{showScrollDownButton && (
<div className="absolute bottom-12 right-0 lg:bottom-0 lg:-right-10">
<button
className="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-300 text-gray-800 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-neutral-200"
onClick={onScrollDownClick}
>
<IconArrowDown size={18} />
</button>
</div>
)}
{showPromptList && filteredPrompts.length > 0 && (
<div className="absolute bottom-12 w-full">
<PromptList
activePromptIndex={activePromptIndex}
prompts={filteredPrompts}
onSelect={handleInitModal}
onMouseOver={setActivePromptIndex}
promptListRef={promptListRef}
/>
</div>
)}
{isModalVisible && (
<VariableModal
prompt={filteredPrompts[activePromptIndex]}
variables={variables}
onSubmit={handleSubmit}
onClose={() => setIsModalVisible(false)}
/>
)}
</div>
</div>
{/* <div className="px-3 pt-2 pb-3 text-center text-[12px] text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
<a
href="https://github.com/mckaywrigley/chatbot-ui"
target="_blank"
rel="noreferrer"
className="underline"
>
ChatBot UI
</a>
.{' '}
{t(
"Chatbot UI is an advanced chatbot kit for OpenAI's chat models aiming to mimic ChatGPT's interface and functionality.",
)}
</div> */}
</div>
);
};
================================================
FILE: ui/components/Chat/ChatLoader.tsx
================================================
import { IconRobot } from '@tabler/icons-react';
import { FC } from 'react';
interface Props { }
export const ChatLoader: FC<Props> = () => {
return (
<div
className="group border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-800/50 dark:bg-transparent dark:text-gray-100"
style={{ overflowWrap: 'anywhere' }}
>
<div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="min-w-[40px] items-end">
<IconRobot size={30} />
</div>
<span className="animate-pulse cursor-default mt-1">▍</span>
</div>
</div>
);
};
================================================
FILE: ui/components/Chat/ChatMessage.tsx
================================================
import {
IconCheck,
IconCopy,
IconEdit,
IconRobot,
IconTrash,
IconUser,
} from '@tabler/icons-react';
import { FC, memo, useContext, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { updateConversation } from '@/utils/app/conversation';
import { Message } from '@/types/chat';
import HomeContext from '@/pages/api/home/home.context';
import { CodeBlock } from '../Markdown/CodeBlock';
import { MemoizedReactMarkdown } from '../Markdown/MemoizedReactMarkdown';
import rehypeMathjax from 'rehype-mathjax';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
export interface Props {
message: Message;
messageIndex: number;
onEdit?: (editedMessage: Message) => void
}
export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) => {
const { t } = useTranslation('chat');
const {
state: { selectedConversation, conversations, currentMessage, messageIsStreaming },
dispatch: homeDispatch,
} = useContext(HomeContext);
const [isEditing, setIsEditing] = useState<boolean>(false);
const [isTyping, setIsTyping] = useState<boolean>(false);
const [messageContent, setMessageContent] = useState(message.content);
const [messagedCopied, setMessageCopied] = useState(false);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const toggleEditing = () => {
setIsEditing(!isEditing);
};
const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setMessageContent(event.target.value);
if (textareaRef.current) {
textareaRef.current.style.height = 'inherit';
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
}
};
const handleEditMessage = () => {
if (message.content != messageContent) {
if (selectedConversation && onEdit) {
onEdit({ ...message, content: messageContent });
}
}
setIsEditing(false);
};
const handleDeleteMessage = () => {
if (!selectedConversation) return;
const { messages } = selectedConversation;
const findIndex = messages.findIndex((elm) => elm === message);
if (findIndex < 0) return;
if (
findIndex < messages.length - 1 &&
messages[findIndex + 1].role === 'assistant'
) {
messages.splice(findIndex, 2);
} else {
messages.splice(findIndex, 1);
}
const updatedConversation = {
...selectedConversation,
messages,
};
const { single, all } = updateConversation(
updatedConversation,
conversations,
);
homeDispatch({ field: 'selectedConversation', value: single });
homeDispatch({ field: 'conversations', value: all });
};
const handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter' && !isTyping && !e.shiftKey) {
e.preventDefault();
handleEditMessage();
}
};
const copyOnClick = () => {
// fallback to allow copying to clipboard over http
const copyToClipboardFallback = (text: string) => {
let textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.position = "absolute";
textArea.style.opacity = "0";
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
textArea.remove();
};
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(message.content);
} else {
copyToClipboardFallback(message.content);
}
setMessageCopied(true);
setTimeout(() => {
setMessageCopied(false);
}, 2000);
};
useEffect(() => {
setMessageContent(message.content);
}, [message.content]);
useEffect(() => {
if (textareaRef.current) {
textareaRef.current.style.height = 'inherit';
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
}
}, [isEditing]);
return (
<div
className={`group md:px-4 ${
message.role === 'assistant'
? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-800/50 dark:bg-transparent dark:text-gray-100'
: 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-800/50 dark:bg-transparent dark:text-gray-100'
}`}
style={{ overflowWrap: 'anywhere' }}
>
<div className="relative m-auto flex p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="min-w-[40px] text-right font-bold">
{message.role === 'assistant' ? (
<IconRobot size={30} />
) : (
<IconUser size={30} />
)}
</div>
<div className="prose mt-[-2px] w-full dark:prose-invert">
{message.role === 'user' ? (
<div className="flex w-full">
{isEditing ? (
<div className="flex w-full flex-col">
<textarea
ref={textareaRef}
className="w-full resize-none whitespace-pre-wrap border-none dark:bg-[#1d1c21]"
value={messageContent}
onChange={handleInputChange}
onKeyDown={handlePressEnter}
onCompositionStart={() => setIsTyping(true)}
onCompositionEnd={() => setIsTyping(false)}
style={{
fontFamily: 'inherit',
fontSize: 'inherit',
lineHeight: 'inherit',
padding: '0',
margin: '0',
overflow: 'hidden',
}}
/>
<div className="mt-10 flex justify-center space-x-4">
<button
className="h-[40px] rounded-md bg-blue-500 px-4 py-1 text-sm font-medium text-white enabled:hover:bg-blue-600 disabled:opacity-50"
onClick={handleEditMessage}
disabled={messageContent.trim().length <= 0}
>
{t('Save & Submit')}
</button>
<button
className="h-[40px] rounded-md border border-neutral-300 px-4 py-1 text-sm font-medium text-neutral-700 hover:bg-neutral-100 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800"
onClick={() => {
setMessageContent(message.content);
setIsEditing(false);
}}
>
{t('Cancel')}
</button>
</div>
</div>
) : (
<div className="prose whitespace-pre-wrap dark:prose-invert flex-1">
{message.content}
</div>
)}
{!isEditing && (
<div className="md:-mr-8 ml-1 md:ml-0 flex flex-col md:flex-row gap-4 md:gap-1 items-center md:items-start justify-end md:justify-start">
<button
className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
onClick={toggleEditing}
>
<IconEdit size={20} />
</button>
<button
className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
onClick={handleDeleteMessage}
>
<IconTrash size={20} />
</button>
</div>
)}
</div>
) : (
<div className="flex flex-row">
<MemoizedReactMarkdown
className="prose dark:prose-invert flex-1"
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]}
components={{
code({ node, inline, className, children, ...props }) {
if (children.length) {
if (children[0] == '▍') {
return <span className="animate-pulse cursor-default mt-1">▍</span>
}
children[0] = (children[0] as string).replace("`▍`", "▍")
}
const match = /language-(\w+)/.exec(className || '');
return !inline ? (
<CodeBlock
key={Math.random()}
language={(match && match[1]) || ''}
value={String(children).replace(/\n$/, '')}
{...props}
/>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
table({ children }) {
return (
<table className="border-collapse border border-black px-3 py-1 dark:border-white">
{children}
</table>
);
},
th({ children }) {
return (
<th className="break-words border border-black bg-gray-500 px-3 py-1 text-white dark:border-white">
{children}
</th>
);
},
td({ children }) {
return (
<td className="break-words border border-black px-3 py-1 dark:border-white">
{children}
</td>
);
},
}}
>
{`${message.content}${
messageIsStreaming && messageIndex == (selectedConversation?.messages.length ?? 0) - 1 ? '`▍`' : ''
}`}
</MemoizedReactMarkdown>
<div className="md:-mr-8 ml-1 md:ml-0 flex flex-col md:flex-row gap-4 md:gap-1 items-center md:items-start justify-end md:justify-start">
{messagedCopied ? (
<IconCheck
size={20}
className="text-green-500 dark:text-green-400"
/>
) : (
<button
className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
onClick={copyOnClick}
>
<IconCopy size={20} />
</button>
)}
</div>
</div>
)}
</div>
</div>
</div>
);
});
ChatMessage.displayName = 'ChatMessage';
================================================
FILE: ui/components/Chat/ErrorMessageDiv.tsx
================================================
import { IconCircleX } from '@tabler/icons-react';
import { FC } from 'react';
import { ErrorMessage } from '@/types/error';
interface Props {
error: ErrorMessage;
}
export const ErrorMessageDiv: FC<Props> = ({ error }) => {
return (
<div className="mx-6 flex h-full flex-col items-center justify-center text-red-500">
<div className="mb-5">
<IconCircleX size={36} />
</div>
<div className="mb-3 text-2xl font-medium">{error.title}</div>
{error.messageLines.map((line, index) => (
<div key={index} className="text-center">
{' '}
{line}{' '}
</div>
))}
<div className="mt-4 text-xs opacity-50 dark:text-red-400">
{error.code ? <i>Code: {error.code}</i> : ''}
</div>
</div>
);
};
================================================
FILE: ui/components/Chat/MemoizedChatMessage.tsx
================================================
import { FC, memo } from "react";
import { ChatMessage, Props } from "./ChatMessage";
export const MemoizedChatMessage: FC<Props> = memo(
ChatMessage,
(prevProps, nextProps) => (
prevProps.message.content === nextProps.message.content
)
);
================================================
FILE: ui/components/Chat/ModelSelect.tsx
================================================
import { IconExternalLink } from '@tabler/icons-react';
import { useContext } from 'react';
import { useTranslation } from 'next-i18next';
import { OpenAIModel } from '@/types/openai';
import HomeContext from '@/pages/api/home/home.context';
export const ModelSelect = () => {
const { t } = useTranslation('chat');
const {
state: { selectedConversation, models, defaultModelId },
handleUpdateConversation,
dispatch: homeDispatch,
} = useContext(HomeContext);
const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
selectedConversation &&
handleUpdateConversation(selectedConversation, {
key: 'model',
value: models.find(
(model) => model.id === e.target.value,
) as OpenAIModel,
});
};
return (
<div className="flex flex-col">
<label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
{t('Model')}
</label>
<div className="w-full rounded-lg border border-neutral-600 bg-transparent pr-2 text-neutral-900 dark:border-neutral-700 dark:text-white">
<select
className="w-full bg-transparent p-2"
placeholder={t('Select a model') || ''}
value={selectedConversation?.model?.id || defaultModelId}
onChange={handleChange}
>
{models.map((model) => (
<option
key={model.id}
value={model.id}
className="dark:bg-[#1d1c21] dark:text-white"
>
{model.id === defaultModelId
? `Default (${model.name})`
: model.name}
</option>
))}
</select>
</div>
{/* <div className="w-full mt-3 text-left text-neutral-700 dark:text-neutral-400 flex items-center">
<a
href="https://platform.openai.com/account/usage"
target="_blank"
className="flex items-center"
>
<IconExternalLink size={18} className={'inline mr-1'} />
{t('View Account Usage')}
</a>
</div> */}
</div>
);
};
================================================
FILE: ui/components/Chat/PluginSelect.tsx
================================================
import { FC, useEffect, useRef } from 'react';
import { useTranslation } from 'next-i18next';
import { Plugin, PluginList } from '@/types/plugin';
interface Props {
plugin: Plugin | null;
onPluginChange: (plugin: Plugin) => void;
onKeyDown: (e: React.KeyboardEvent<HTMLSelectElement>) => void;
}
export const PluginSelect: FC<Props> = ({
plugin,
onPluginChange,
onKeyDown,
}) => {
const { t } = useTranslation('chat');
const selectRef = useRef<HTMLSelectElement>(null);
const handleKeyDown = (e: React.KeyboardEvent<HTMLSelectElement>) => {
const selectElement = selectRef.current;
const optionCount = selectElement?.options.length || 0;
if (e.key === '/' && e.metaKey) {
e.preventDefault();
if (selectElement) {
selectElement.selectedIndex =
(selectElement.selectedIndex + 1) % optionCount;
selectElement.dispatchEvent(new Event('change'));
}
} else if (e.key === '/' && e.shiftKey && e.metaKey) {
e.preventDefault();
if (selectElement) {
selectElement.selectedIndex =
(selectElement.selectedIndex - 1 + optionCount) % optionCount;
selectElement.dispatchEvent(new Event('change'));
}
} else if (e.key === 'Enter') {
e.preventDefault();
if (selectElement) {
selectElement.dispatchEvent(new Event('change'));
}
onPluginChange(
PluginList.find(
(plugin) =>
plugin.name === selectElement?.selectedOptions[0].innerText,
) as Plugin,
);
} else {
onKeyDown(e);
}
};
useEffect(() => {
if (selectRef.current) {
selectRef.current.focus();
}
}, []);
return (
<div className="flex flex-col">
<div className="mb-1 w-full rounded border border-neutral-600 bg-transparent pr-2 text-neutral-900 dark:border-neutral-700 dark:text-white">
<select
ref={selectRef}
className="w-full cursor-pointer bg-transparent p-2"
placeholder={t('Select a plugin') || ''}
value={plugin?.id || ''}
onChange={(e) => {
onPluginChange(
PluginList.find(
(plugin) => plugin.id === e.target.value,
) as Plugin,
);
}}
onKeyDown={(e) => {
handleKeyDown(e);
}}
>
<option
key="chatgpt"
value="chatgpt"
className="dark:bg-[#1d1c21] dark:text-white"
>
ChatGPT
</option>
{PluginList.map((plugin) => (
<option
key={plugin.id}
value={plugin.id}
className="dark:bg-[#1d1c21] dark:text-white"
>
{plugin.name}
</option>
))}
</select>
</div>
</div>
);
};
================================================
FILE: ui/components/Chat/PromptList.tsx
================================================
import { FC, MutableRefObject } from 'react';
import { Prompt } from '@/types/prompt';
interface Props {
prompts: Prompt[];
activePromptIndex: number;
onSelect: () => void;
onMouseOver: (index: number) => void;
promptListRef: MutableRefObject<HTMLUListElement | null>;
}
export const PromptList: FC<Props> = ({
prompts,
activePromptIndex,
onSelect,
onMouseOver,
promptListRef,
}) => {
return (
<ul
ref={promptListRef}
className="z-10 max-h-52 w-full overflow-scroll rounded border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-neutral-600 dark:bg-[#1d1c21] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]"
>
{prompts.map((prompt, index) => (
<li
key={prompt.id}
className={`${
index === activePromptIndex
? 'bg-gray-200 dark:bg-[#161519] dark:text-black'
: ''
} cursor-pointer px-3 py-2 text-sm text-black dark:text-white`}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onSelect();
}}
onMouseEnter={() => onMouseOver(index)}
>
{prompt.name}
</li>
))}
</ul>
);
};
================================================
FILE: ui/components/Chat/Regenerate.tsx
================================================
import { IconRefresh } from '@tabler/icons-react';
import { FC } from 'react';
import { useTranslation } from 'next-i18next';
interface Props {
onRegenerate: () => void;
}
export const Regenerate: FC<Props> = ({ onRegenerate }) => {
const { t } = useTranslation('chat');
return (
<div className="fixed bottom-4 left-0 right-0 ml-auto mr-auto w-full px-2 sm:absolute sm:bottom-8 sm:left-[280px] sm:w-1/2 lg:left-[200px]">
<div className="mb-4 text-center text-red-500">
{t('Sorry, there was an error.')}
</div>
<button
className="flex h-12 gap-2 w-full items-center justify-center rounded-lg border border-b-neutral-300 bg-neutral-100 text-sm font-semibold text-neutral-500 dark:border-none dark:bg-[#232228] dark:text-neutral-200"
onClick={onRegenerate}
>
<IconRefresh />
<div>{t('Regenerate response')}</div>
</button>
</div>
);
};
================================================
FILE: ui/components/Chat/SystemPrompt.tsx
================================================
import {
FC,
KeyboardEvent,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { useTranslation } from 'next-i18next';
import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
import { Conversation } from '@/types/chat';
import { Prompt } from '@/types/prompt';
import { PromptList } from './PromptList';
import { VariableModal } from './VariableModal';
interface Props {
conversation: Conversation;
prompts: Prompt[];
onChangePrompt: (prompt: string) => void;
}
export const SystemPrompt: FC<Props> = ({
conversation,
prompts,
onChangePrompt,
}) => {
const { t } = useTranslation('chat');
const [value, setValue] = useState<string>('');
const [activePromptIndex, setActivePromptIndex] = useState(0);
const [showPromptList, setShowPromptList] = useState(false);
const [promptInputValue, setPromptInputValue] = useState('');
const [variables, setVariables] = useState<string[]>([]);
const [isModalVisible, setIsModalVisible] = useState(false);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const promptListRef = useRef<HTMLUListElement | null>(null);
const filteredPrompts = prompts.filter((prompt) =>
prompt.name.toLowerCase().includes(promptInputValue.toLowerCase()),
);
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
const maxLength = conversation.model.maxLength;
if (value.length > maxLength) {
alert(
t(
`Prompt limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`,
{ maxLength, valueLength: value.length },
),
);
return;
}
setValue(value);
updatePromptListVisibility(value);
if (value.length > 0) {
onChangePrompt(value);
}
};
const handleInitModal = () => {
const selectedPrompt = filteredPrompts[activePromptIndex];
setValue((prevVal) => {
const newContent = prevVal?.replace(/\/\w*$/, selectedPrompt.content);
return newContent;
});
handlePromptSelect(selectedPrompt);
setShowPromptList(false);
};
const parseVariables = (content: string) => {
const regex = /{{(.*?)}}/g;
const foundVariables = [];
let match;
while ((match = regex.exec(content)) !== null) {
foundVariables.push(match[1]);
}
return foundVariables;
};
const updatePromptListVisibility = useCallback((text: string) => {
const match = text.match(/\/\w*$/);
if (match) {
setShowPromptList(true);
setPromptInputValue(match[0].slice(1));
} else {
setShowPromptList(false);
setPromptInputValue('');
}
}, []);
const handlePromptSelect = (prompt: Prompt) => {
const parsedVariables = parseVariables(prompt.content);
setVariables(parsedVariables);
if (parsedVariables.length > 0) {
setIsModalVisible(true);
} else {
const updatedContent = value?.replace(/\/\w*$/, prompt.content);
setValue(updatedContent);
onChangePrompt(updatedContent);
updatePromptListVisibility(prompt.content);
}
};
const handleSubmit = (updatedVariables: string[]) => {
const newContent = value?.replace(/{{(.*?)}}/g, (match, variable) => {
const index = variables.indexOf(variable);
return updatedVariables[index];
});
setValue(newContent);
onChangePrompt(newContent);
if (textareaRef && textareaRef.current) {
textareaRef.current.focus();
}
};
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
if (showPromptList) {
if (e.key === 'ArrowDown') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex < prompts.length - 1 ? prevIndex + 1 : prevIndex,
);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex > 0 ? prevIndex - 1 : prevIndex,
);
} else if (e.key === 'Tab') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex < prompts.length - 1 ? prevIndex + 1 : 0,
);
} else if (e.key === 'Enter') {
e.preventDefault();
handleInitModal();
} else if (e.key === 'Escape') {
e.preventDefault();
setShowPromptList(false);
} else {
setActivePromptIndex(0);
}
}
};
useEffect(() => {
if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = 'inherit';
textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
}
}, [value]);
useEffect(() => {
if (conversation.prompt) {
setValue(conversation.prompt);
} else {
setValue(DEFAULT_SYSTEM_PROMPT);
}
}, [conversation]);
useEffect(() => {
const handleOutsideClick = (e: MouseEvent) => {
if (
promptListRef.current &&
!promptListRef.current.contains(e.target as Node)
) {
setShowPromptList(false);
}
};
window.addEventListener('click', handleOutsideClick);
return () => {
window.removeEventListener('click', handleOutsideClick);
};
}, []);
return (
<div className="flex flex-col">
<label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
{t('System Prompt')}
</label>
<textarea
ref={textareaRef}
className="w-full rounded-lg border border-neutral-600 bg-transparent px-4 py-3 text-neutral-900 dark:border-neutral-700 dark:text-neutral-100"
style={{
resize: 'none',
bottom: `${textareaRef?.current?.scrollHeight}px`,
maxHeight: '300px',
overflow: `${
textareaRef.current && textareaRef.current.scrollHeight > 400
? 'auto'
: 'hidden'
}`,
}}
placeholder={
t(`Enter a prompt or type "/" to select a prompt...`) || ''
}
value={t(value) || ''}
rows={1}
onChange={handleChange}
onKeyDown={handleKeyDown}
/>
{showPromptList && filteredPrompts.length > 0 && (
<div>
<PromptList
activePromptIndex={activePromptIndex}
prompts={filteredPrompts}
onSelect={handleInitModal}
onMouseOver={setActivePromptIndex}
promptListRef={promptListRef}
/>
</div>
)}
{isModalVisible && (
<VariableModal
prompt={prompts[activePromptIndex]}
variables={variables}
onSubmit={handleSubmit}
onClose={() => setIsModalVisible(false)}
/>
)}
</div>
);
};
================================================
FILE: ui/components/Chat/Temperature.tsx
================================================
import { FC, useContext, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { DEFAULT_TEMPERATURE } from '@/utils/app/const';
import HomeContext from '@/pages/api/home/home.context';
interface Props {
label: string;
onChangeTemperature: (temperature: number) => void;
}
export const TemperatureSlider: FC<Props> = ({
label,
onChangeTemperature,
}) => {
const {
state: { conversations },
} = useContext(HomeContext);
const lastConversation = conversations[conversations.length - 1];
const [temperature, setTemperature] = useState(
lastConversation?.temperature ?? DEFAULT_TEMPERATURE,
);
const { t } = useTranslation('chat');
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const newValue = parseFloat(event.target.value);
setTemperature(newValue);
onChangeTemperature(newValue);
};
return (
<div className="flex flex-col">
<label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
{label}
</label>
<span className="text-[12px] text-black/50 dark:text-white/50 text-sm">
{t(
'Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.',
)}
</span>
<span className="mt-2 mb-1 text-center text-neutral-900 dark:text-neutral-100">
{temperature.toFixed(1)}
</span>
<input
className="cursor-pointer"
type="range"
min={0}
max={1}
step={0.1}
value={temperature}
onChange={handleChange}
/>
<ul className="w mt-2 pb-8 flex justify-between px-[24px] text-neutral-900 dark:text-neutral-100">
<li className="flex justify-center">
<span className="absolute">{t('Precise')}</span>
</li>
<li className="flex justify-center">
<span className="absolute">{t('Neutral')}</span>
</li>
<li className="flex justify-center">
<span className="absolute">{t('Creative')}</span>
</li>
</ul>
</div>
);
};
================================================
FILE: ui/components/Chat/VariableModal.tsx
================================================
import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
import { Prompt } from '@/types/prompt';
interface Props {
prompt: Prompt;
variables: string[];
onSubmit: (updatedVariables: string[]) => void;
onClose: () => void;
}
export const VariableModal: FC<Props> = ({
prompt,
variables,
onSubmit,
onClose,
}) => {
const [updatedVariables, setUpdatedVariables] = useState<
{ key: string; value: string }[]
>(
variables
.map((variable) => ({ key: variable, value: '' }))
.filter(
(item, index, array) =>
array.findIndex((t) => t.key === item.key) === index,
),
);
const modalRef = useRef<HTMLDivElement>(null);
const nameInputRef = useRef<HTMLTextAreaElement>(null);
const handleChange = (index: number, value: string) => {
setUpdatedVariables((prev) => {
const updated = [...prev];
updated[index].value = value;
return updated;
});
};
const handleSubmit = () => {
if (updatedVariables.some((variable) => variable.value === '')) {
alert('Please fill out all variables');
return;
}
onSubmit(updatedVariables.map((variable) => variable.value));
onClose();
};
const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSubmit();
} else if (e.key === 'Escape') {
onClose();
}
};
useEffect(() => {
const handleOutsideClick = (e: MouseEvent) => {
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
onClose();
}
};
window.addEventListener('click', handleOutsideClick);
return () => {
window.removeEventListener('click', handleOutsideClick);
};
}, [onClose]);
useEffect(() => {
if (nameInputRef.current) {
nameInputRef.current.focus();
}
}, []);
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
onKeyDown={handleKeyDown}
>
<div
ref={modalRef}
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#161519] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
role="dialog"
>
<div className="mb-4 text-xl font-bold text-black dark:text-neutral-200">
{prompt.name}
</div>
<div className="mb-4 text-sm italic text-black dark:text-neutral-200">
{prompt.description}
</div>
{updatedVariables.map((variable, index) => (
<div className="mb-4" key={index}>
<div className="mb-2 text-sm font-bold text-neutral-200">
{variable.key}
</div>
<textarea
ref={index === 0 ? nameInputRef : undefined}
className="mt-1 w-full rounded-lg border border-neutral-600 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
style={{ resize: 'none' }}
placeholder={`Enter a value for ${variable.key}...`}
value={variable.value}
onChange={(e) => handleChange(index, e.target.value)}
rows={3}
/>
</div>
))}
<button
className="mt-6 w-full rounded-lg border border-neutral-600 px-4 py-2 text-neutral-900 shadow hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
onClick={handleSubmit}
>
Submit
</button>
</div>
</div>
);
};
================================================
FILE: ui/components/Chatbar/Chatbar.context.tsx
================================================
import { Dispatch, createContext } from 'react';
import { ActionType } from '@/hooks/useCreateReducer';
import { Conversation } from '@/types/chat';
import { SupportedExportFormats } from '@/types/export';
import { PluginKey } from '@/types/plugin';
import { ChatbarInitialState } from './Chatbar.state';
export interface ChatbarContextProps {
state: ChatbarInitialState;
dispatch: Dispatch<ActionType<ChatbarInitialState>>;
handleDeleteConversation: (conversation: Conversation) => void;
handleClearConversations: () => void;
handleExportData: () => void;
handleImportConversations: (data: SupportedExportFormats) => void;
handlePluginKeyChange: (pluginKey: PluginKey) => void;
handleClearPluginKey: (pluginKey: PluginKey) => void;
handleApiKeyChange: (apiKey: string) => void;
}
const ChatbarContext = createContext<ChatbarContextProps>(undefined!);
export default ChatbarContext;
================================================
FILE: ui/components/Chatbar/Chatbar.state.tsx
================================================
import { Conversation } from '@/types/chat';
export interface ChatbarInitialState {
searchTerm: string;
filteredConversations: Conversation[];
}
export const initialState: ChatbarInitialState = {
searchTerm: '',
filteredConversations: [],
};
================================================
FILE: ui/components/Chatbar/Chatbar.tsx
================================================
import { useCallback, useContext, useEffect } from 'react';
import { useTranslation } from 'next-i18next';
import { useCreateReducer } from '@/hooks/useCreateReducer';
import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';
import { saveConversation, saveConversations } from '@/utils/app/conversation';
import { saveFolders } from '@/utils/app/folders';
import { exportData, importData } from '@/utils/app/importExport';
import { Conversation } from '@/types/chat';
import { LatestExportFormat, SupportedExportFormats } from '@/types/export';
import { OpenAIModels } from '@/types/openai';
import { PluginKey } from '@/types/plugin';
import HomeContext from '@/pages/api/home/home.context';
import { ChatFolders } from './components/ChatFolders';
import { ChatbarSettings } from './components/ChatbarSettings';
import { Conversations } from './components/Conversations';
import Sidebar from '../Sidebar';
import ChatbarContext from './Chatbar.context';
import { ChatbarInitialState, initialState } from './Chatbar.state';
import { v4 as uuidv4 } from 'uuid';
export const Chatbar = () => {
const { t } = useTranslation('sidebar');
const chatBarContextValue = useCreateReducer<ChatbarInitialState>({
initialState,
});
const {
state: { conversations, showChatbar, defaultModelId, folders, pluginKeys },
dispatch: homeDispatch,
handleCreateFolder,
handleNewConversation,
handleUpdateConversation,
} = useContext(HomeContext);
const {
state: { searchTerm, filteredConversations },
dispatch: chatDispatch,
} = chatBarContextValue;
const handleApiKeyChange = useCallback(
(apiKey: string) => {
homeDispatch({ field: 'apiKey', value: apiKey });
localStorage.setItem('apiKey', apiKey);
},
[homeDispatch],
);
const handlePluginKeyChange = (pluginKey: PluginKey) => {
if (pluginKeys.some((key) => key.pluginId === pluginKey.pluginId)) {
const updatedPluginKeys = pluginKeys.map((key) => {
if (key.pluginId === pluginKey.pluginId) {
return pluginKey;
}
return key;
});
homeDispatch({ field: 'pluginKeys', value: updatedPluginKeys });
localStorage.setItem('pluginKeys', JSON.stringify(updatedPluginKeys));
} else {
homeDispatch({ field: 'pluginKeys', value: [...pluginKeys, pluginKey] });
localStorage.setItem(
'pluginKeys',
JSON.stringify([...pluginKeys, pluginKey]),
);
}
};
const handleClearPluginKey = (pluginKey: PluginKey) => {
const updatedPluginKeys = pluginKeys.filter(
(key) => key.pluginId !== pluginKey.pluginId,
);
if (updatedPluginKeys.length === 0) {
homeDispatch({ field: 'pluginKeys', value: [] });
localStorage.removeItem('pluginKeys');
return;
}
homeDispatch({ field: 'pluginKeys', value: updatedPluginKeys });
localStorage.setItem('pluginKeys', JSON.stringify(updatedPluginKeys));
};
const handleExportData = () => {
exportData();
};
const handleImportConversations = (data: SupportedExportFormats) => {
const { history, folders, prompts }: LatestExportFormat = importData(data);
homeDispatch({ field: 'conversations', value: history });
homeDispatch({
field: 'selectedConversation',
value: history[history.length - 1],
});
homeDispatch({ field: 'folders', value: folders });
homeDispatch({ field: 'prompts', value: prompts });
window.location.reload();
};
const handleClearConversations = () => {
defaultModelId &&
homeDispatch({
field: 'selectedConversation',
value: {
id: uuidv4(),
name: t('New Conversation'),
messages: [],
model: OpenAIModels[defaultModelId],
prompt: DEFAULT_SYSTEM_PROMPT,
temperature: DEFAULT_TEMPERATURE,
folderId: null,
},
});
homeDispatch({ field: 'conversations', value: [] });
localStorage.removeItem('conversationHistory');
localStorage.removeItem('selectedConversation');
const updatedFolders = folders.filter((f) => f.type !== 'chat');
homeDispatch({ field: 'folders', value: updatedFolders });
saveFolders(updatedFolders);
};
const handleDeleteConversation = (conversation: Conversation) => {
const updatedConversations = conversations.filter(
(c) => c.id !== conversation.id,
);
homeDispatch({ field: 'conversations', value: updatedConversations });
chatDispatch({ field: 'searchTerm', value: '' });
saveConversations(updatedConversations);
if (updatedConversations.length > 0) {
homeDispatch({
field: 'selectedConversation',
value: updatedConversations[updatedConversations.length - 1],
});
saveConversation(updatedConversations[updatedConversations.length - 1]);
} else {
defaultModelId &&
homeDispatch({
field: 'selectedConversation',
value: {
id: uuidv4(),
name: t('New Conversation'),
messages: [],
model: OpenAIModels[defaultModelId],
prompt: DEFAULT_SYSTEM_PROMPT,
temperature: DEFAULT_TEMPERATURE,
folderId: null,
},
});
localStorage.removeItem('selectedConversation');
}
};
const handleToggleChatbar = () => {
homeDispatch({ field: 'showChatbar', value: !showChatbar });
localStorage.setItem('showChatbar', JSON.stringify(!showChatbar));
};
const handleDrop = (e: any) => {
if (e.dataTransfer) {
const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
handleUpdateConversation(conversation, { key: 'folderId', value: 0 });
chatDispatch({ field: 'searchTerm', value: '' });
e.target.style.background = 'none';
}
};
useEffect(() => {
if (searchTerm) {
chatDispatch({
field: 'filteredConversations',
value: conversations.filter((conversation) => {
const searchable =
conversation.name.toLocaleLowerCase() +
' ' +
conversation.messages.map((message) => message.content).join(' ');
return searchable.toLowerCase().includes(searchTerm.toLowerCase());
}),
});
} else {
chatDispatch({
field: 'filteredConversations',
value: conversations,
});
}
}, [searchTerm, conversations]);
return (
<ChatbarContext.Provider
value={{
...chatBarContextValue,
handleDeleteConversation,
handleClearConversations,
handleImportConversations,
handleExportData,
handlePluginKeyChange,
handleClearPluginKey,
handleApiKeyChange,
}}
>
<Sidebar<Conversation>
side={'left'}
isOpen={showChatbar}
addItemButtonTitle={t('New chat')}
itemComponent={<Conversations conversations={filteredConversations} />}
folderComponent={<ChatFolders searchTerm={searchTerm} />}
items={filteredConversations}
searchTerm={searchTerm}
handleSearchTerm={(searchTerm: string) =>
chatDispatch({ field: 'searchTerm', value: searchTerm })
}
toggleOpen={handleToggleChatbar}
handleCreateItem={handleNewConversation}
handleCreateFolder={() => handleCreateFolder(t('New folder'), 'chat')}
handleDrop={handleDrop}
footerComponent={<ChatbarSettings />}
/>
</ChatbarContext.Provider>
);
};
================================================
FILE: ui/components/Chatbar/components/ChatFolders.tsx
================================================
import { useContext } from 'react';
import { FolderInterface } from '@/types/folder';
import HomeContext from '@/pages/api/home/home.context';
import Folder from '@/components/Folder';
import { ConversationComponent } from './Conversation';
interface Props {
searchTerm: string;
}
export const ChatFolders = ({ searchTerm }: Props) => {
const {
state: { folders, conversations },
handleUpdateConversation,
} = useContext(HomeContext);
const handleDrop = (e: any, folder: FolderInterface) => {
if (e.dataTransfer) {
const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
handleUpdateConversation(conversation, {
key: 'folderId',
value: folder.id,
});
}
};
const ChatFolders = (currentFolder: FolderInterface) => {
return (
conversations &&
conversations
.filter((conversation) => conversation.folderId)
.map((conversation, index) => {
if (conversation.folderId === currentFolder.id) {
return (
<div key={index} className="ml-5 gap-2 border-l pl-2">
<ConversationComponent conversation={conversation} />
</div>
);
}
})
);
};
return (
<div className="flex w-full flex-col pt-2">
{folders
.filter((folder) => folder.type === 'chat')
.sort((a, b) => a.name.localeCompare(b.name))
.map((folder, index) => (
<Folder
key={index}
searchTerm={searchTerm}
currentFolder={folder}
handleDrop={handleDrop}
folderComponent={ChatFolders(folder)}
/>
))}
</div>
);
};
================================================
FILE: ui/components/Chatbar/components/ChatbarSettings.tsx
================================================
import { IconFileExport, IconSettings } from '@tabler/icons-react';
import { useContext, useState } from 'react';
import { useTranslation } from 'next-i18next';
import HomeContext from '@/pages/api/home/home.context';
import { SettingDialog } from '@/components/Settings/SettingDialog';
import { Import } from '../../Settings/Import';
import { Key } from '../../Settings/Key';
import { SidebarButton } from '../../Sidebar/SidebarButton';
import ChatbarContext from '../Chatbar.context';
import { ClearConversations } from './ClearConversations';
import { PluginKeys } from './PluginKeys';
export const ChatbarSettings = () => {
const { t } = useTranslation('sidebar');
const [isSettingDialogOpen, setIsSettingDialog] = useState<boolean>(false);
const {
state: {
apiKey,
lightMode,
serverSideApiKeyIsSet,
serverSidePluginKeysSet,
conversations,
},
dispatch: homeDispatch,
} = useContext(HomeContext);
const {
handleClearConversations,
handleImportConversations,
handleExportData,
handleApiKeyChange,
} = useContext(ChatbarContext);
return (
<div className="flex flex-col items-center space-y-1 border-t border-white/20 pt-1 text-sm">
{conversations.length > 0 ? (
<ClearConversations onClearConversations={handleClearConversations} />
) : null}
{/* <Import onImport={handleImportConversations} /> */}
{/* <SidebarButton
text={t('Export data')}
icon={<IconFileExport size={18} />}
onClick={() => handleExportData()}
/> */}
{/* <SidebarButton
text={t('Settings')}
icon={<IconSettings size={18} />}
onClick={() => setIsSettingDialog(true)}
/> */}
{/* {!serverSideApiKeyIsSet ? (
<Key apiKey={apiKey} onApiKeyChange={handleApiKeyChange} />
) : null} */}
{/* {!serverSidePluginKeysSet ? <PluginKeys /> : null} */}
{/* <SettingDialog
open={isSettingDialogOpen}
onClose={() => {
setIsSettingDialog(false);
}}
/> */}
</div>
);
};
================================================
FILE: ui/components/Chatbar/components/ClearConversations.tsx
================================================
import { IconCheck, IconTrash, IconX } from '@tabler/icons-react';
import { FC, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { SidebarButton } from '@/components/Sidebar/SidebarButton';
interface Props {
onClearConversations: () => void;
}
export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
const [isConfirming, setIsConfirming] = useState<boolean>(false);
const { t } = useTranslation('sidebar');
const handleClearConversations = () => {
onClearConversations();
setIsConfirming(false);
};
return isConfirming ? (
<div className="flex w-full cursor-pointer items-center rounded-lg py-3 px-3 hover:bg-gray-500/10">
<IconTrash size={18} />
<div className="ml-3 flex-1 text-left text-[12.5px] leading-3 text-white">
{t('Are you sure?')}
</div>
<div className="flex w-[40px]">
<IconCheck
className="ml-auto mr-1 min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={18}
onClick={(e) => {
e.stopPropagation();
handleClearConversations();
}}
/>
<IconX
className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={18}
onClick={(e) => {
e.stopPropagation();
setIsConfirming(false);
}}
/>
</div>
</div>
) : (
<SidebarButton
text={t('Clear conversations')}
icon={<IconTrash size={18} />}
onClick={() => setIsConfirming(true)}
/>
);
};
================================================
FILE: ui/components/Chatbar/components/Conversation.tsx
================================================
import {
IconCheck,
IconMessage,
IconPencil,
IconTrash,
IconX,
} from '@tabler/icons-react';
import {
DragEvent,
KeyboardEvent,
MouseEventHandler,
useContext,
useEffect,
useState,
} from 'react';
import { Conversation } from '@/types/chat';
import HomeContext from '@/pages/api/home/home.context';
import SidebarActionButton from '@/components/Buttons/SidebarActionButton';
import ChatbarContext from '@/components/Chatbar/Chatbar.context';
interface Props {
conversation: Conversation;
}
export const ConversationComponent = ({ conversation }: Props) => {
const {
state: { selectedConversation, messageIsStreaming },
handleSelectConversation,
handleUpdateConversation,
} = useContext(HomeContext);
const { handleDeleteConversation } = useContext(ChatbarContext);
const [isDeleting, setIsDeleting] = useState(false);
const [isRenaming, setIsRenaming] = useState(false);
const [renameValue, setRenameValue] = useState('');
const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter') {
e.preventDefault();
selectedConversation && handleRename(selectedConversation);
}
};
const handleDragStart = (
e: DragEvent<HTMLButtonElement>,
conversation: Conversation,
) => {
if (e.dataTransfer) {
e.dataTransfer.setData('conversation', JSON.stringify(conversation));
}
};
const handleRename = (conversation: Conversation) => {
if (renameValue.trim().length > 0) {
handleUpdateConversation(conversation, {
key: 'name',
value: renameValue,
});
setRenameValue('');
setIsRenaming(false);
}
};
const handleConfirm: MouseEventHandler<HTMLButtonElement> = (e) => {
e.stopPropagation();
if (isDeleting) {
handleDeleteConversation(conversation);
} else if (isRenaming) {
handleRename(conversation);
}
setIsDeleting(false);
setIsRenaming(false);
};
const handleCancel: MouseEventHandler<HTMLButtonElement> = (e) => {
e.stopPropagation();
setIsDeleting(false);
setIsRenaming(false);
};
const handleOpenRenameModal: MouseEventHandler<HTMLButtonElement> = (e) => {
e.stopPropagation();
setIsRenaming(true);
selectedConversation && setRenameValue(selectedConversation.name);
};
const handleOpenDeleteModal: MouseEventHandler<HTMLButtonElement> = (e) => {
e.stopPropagation();
setIsDeleting(true);
};
useEffect(() => {
if (isRenaming) {
setIsDeleting(false);
} else if (isDeleting) {
setIsRenaming(false);
}
}, [isRenaming, isDeleting]);
return (
<div className="relative flex items-center">
{isRenaming && selectedConversation?.id === conversation.id ? (
<div className="flex w-full items-center gap-3 rounded-lg bg-[#1d1c21]/90 p-3">
<IconMessage size={18} />
<input
className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 text-white outline-none focus:border-neutral-100"
type="text"
value={renameValue}
onChange={(e) => setRenameValue(e.target.value)}
onKeyDown={handleEnterDown}
autoFocus
/>
</div>
) : (
<button
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#1d1c21]/90 ${
messageIsStreaming ? 'disabled:cursor-not-allowed' : ''
} ${
selectedConversation?.id === conversation.id
? 'bg-[#1d1c21]/90'
: ''
}`}
onClick={() => handleSelectConversation(conversation)}
disabled={messageIsStreaming}
draggable="true"
onDragStart={(e) => handleDragStart(e, conversation)}
>
<IconMessage size={18} />
<div
className={`relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3 ${
selectedConversation?.id === conversation.id ? 'pr-12' : 'pr-1'
}`}
>
{conversation.name}
</div>
</button>
)}
{(isDeleting || isRenaming) &&
selectedConversation?.id === conversation.id && (
<div className="absolute right-1 z-10 flex text-gray-300">
<SidebarActionButton handleClick={handleConfirm}>
<IconCheck size={18} />
</SidebarActionButton>
<SidebarActionButton handleClick={handleCancel}>
<IconX size={18} />
</SidebarActionButton>
</div>
)}
{selectedConversation?.id === conversation.id &&
!isDeleting &&
!isRenaming && (
<div className="absolute right-1 z-10 flex text-gray-300">
<SidebarActionButton handleClick={handleOpenRenameModal}>
<IconPencil size={18} />
</SidebarActionButton>
<SidebarActionButton handleClick={handleOpenDeleteModal}>
<IconTrash size={18} />
</SidebarActionButton>
</div>
)}
</div>
);
};
================================================
FILE: ui/components/Chatbar/components/Conversations.tsx
================================================
import { Conversation } from '@/types/chat';
import { ConversationComponent } from './Conversation';
interface Props {
conversations: Conversation[];
}
export const Conversations = ({ conversations }: Props) => {
return (
<div className="flex w-full flex-col gap-1">
{conversations
.filter((conversation) => !conversation.folderId)
.slice()
.reverse()
.map((conversation, index) => (
<ConversationComponent key={index} conversation={conversation} />
))}
</div>
);
};
================================================
FILE: ui/components/Chatbar/components/PluginKeys.tsx
================================================
import { IconKey } from '@tabler/icons-react';
import { KeyboardEvent, useContext, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PluginID, PluginKey } from '@/types/plugin';
import HomeContext from '@/pages/api/home/home.context';
import { SidebarButton } from '@/components/Sidebar/SidebarButton';
import ChatbarContext from '../Chatbar.context';
export const PluginKeys = () => {
const { t } = useTranslation('sidebar');
const {
state: { pluginKeys },
} = useContext(HomeContext);
const { handlePluginKeyChange, handleClearPluginKey } =
useContext(ChatbarContext);
const [isChanging, setIsChanging] = useState(false);
const modalRef = useRef<HTMLDivElement>(null);
const handleEnter = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
setIsChanging(false);
}
};
useEffect(() => {
const handleMouseDown = (e: MouseEvent) => {
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
window.addEventListener('mouseup', handleMouseUp);
}
};
const handleMouseUp = (e: MouseEvent) => {
window.removeEventListener('mouseup', handleMouseUp);
setIsChanging(false);
};
window.addEventListener('mousedown', handleMouseDown);
return () => {
window.removeEventListener('mousedown', handleMouseDown);
};
}, []);
return (
<>
<SidebarButton
text={t('Plugin Keys')}
icon={<IconKey size={18} />}
onClick={() => setIsChanging(true)}
/>
{isChanging && (
<div
className="z-100 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
onKeyDown={handleEnter}
>
<div className="fixed inset-0 z-10 overflow-hidden">
<div className="flex min-h-screen items-center justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div
className="hidden sm:inline-block sm:h-screen sm:align-middle"
aria-hidden="true"
/>
<div
ref={modalRef}
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#161519] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
role="dialog"
>
<div className="mb-10 text-4xl">Plugin Keys</div>
<div className="mt-6 rounded border p-4">
<div className="text-xl font-bold">Google Search Plugin</div>
<div className="mt-4 italic">
Please enter your Google API Key and Google CSE ID to enable
the Google Search Plugin.
</div>
<div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
Google API Key
</div>
<input
className="mt-2 w-full rounded-lg border border-neutral-600 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
type="password"
value={
pluginKeys
.find((p) => p.pluginId === PluginID.GOOGLE_SEARCH)
?.requiredKeys.find((k) => k.key === 'GOOGLE_API_KEY')
?.value
}
onChange={(e) => {
const pluginKey = pluginKeys.find(
(p) => p.pluginId === PluginID.GOOGLE_SEARCH,
);
if (pluginKey) {
const requiredKey = pluginKey.requiredKeys.find(
(k) => k.key === 'GOOGLE_API_KEY',
);
if (requiredKey) {
const updatedPluginKey = {
...pluginKey,
requiredKeys: pluginKey.requiredKeys.map((k) => {
if (k.key === 'GOOGLE_API_KEY') {
return {
...k,
value: e.target.value,
};
}
return k;
}),
};
handlePluginKeyChange(updatedPluginKey);
}
} else {
const newPluginKey: PluginKey = {
pluginId: PluginID.GOOGLE_SEARCH,
requiredKeys: [
{
key: 'GOOGLE_API_KEY',
value: e.target.value,
},
{
key: 'GOOGLE_CSE_ID',
value: '',
},
],
};
handlePluginKeyChange(newPluginKey);
}
}}
/>
<div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
Google CSE ID
</div>
<input
className="mt-2 w-full rounded-lg border border-neutral-600 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
type="password"
value={
pluginKeys
.find((p) => p.pluginId === PluginID.GOOGLE_SEARCH)
?.requiredKeys.find((k) => k.key === 'GOOGLE_CSE_ID')
?.value
}
onChange={(e) => {
const pluginKey = pluginKeys.find(
(p) => p.pluginId === PluginID.GOOGLE_SEARCH,
);
if (pluginKey) {
const requiredKey = pluginKey.requiredKeys.find(
(k) => k.key === 'GOOGLE_CSE_ID',
);
if (requiredKey) {
const updatedPluginKey = {
...pluginKey,
requiredKeys: pluginKey.requiredKeys.map((k) => {
if (k.key === 'GOOGLE_CSE_ID') {
return {
...k,
value: e.target.value,
};
}
return k;
}),
};
handlePluginKeyChange(updatedPluginKey);
}
} else {
const newPluginKey: PluginKey = {
pluginId: PluginID.GOOGLE_SEARCH,
requiredKeys: [
{
key: 'GOOGLE_API_KEY',
value: '',
},
{
key: 'GOOGLE_CSE_ID',
value: e.target.value,
},
],
};
handlePluginKeyChange(newPluginKey);
}
}}
/>
<button
className="mt-6 w-full rounded-lg border border-neutral-600 px-4 py-2 text-neutral-900 shadow hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
onClick={() => {
const pluginKey = pluginKeys.find(
(p) => p.pluginId === PluginID.GOOGLE_SEARCH,
);
if (pluginKey) {
handleClearPluginKey(pluginKey);
}
}}
>
Clear Google Search Plugin Keys
</button>
</div>
<button
type="button"
className="mt-6 w-full rounded-lg border border-neutral-600 px-4 py-2 text-neutral-900 shadow hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
onClick={() => setIsChanging(false)}
>
{t('Save')}
</button>
</div>
</div>
</div>
</div>
)}
</>
);
};
================================================
FILE: ui/components/Folder/Folder.tsx
================================================
import {
IconCaretDown,
IconCaretRight,
IconCheck,
IconPencil,
IconTrash,
IconX,
} from '@tabler/icons-react';
import {
KeyboardEvent,
ReactElement,
useContext,
useEffect,
useState,
} from 'react';
import { FolderInterface } from '@/types/folder';
import HomeContext from '@/pages/api/home/home.context';
import SidebarActionButton from '@/components/Buttons/SidebarActionButton';
interface Props {
currentFolder: FolderInterface;
searchTerm: string;
handleDrop: (e: any, folder: FolderInterface) => void;
folderComponent: (ReactElement | undefined)[];
}
const Folder = ({
currentFolder,
searchTerm,
handleDrop,
folderComponent,
}: Props) => {
const { handleDeleteFolder, handleUpdateFolder } = useContext(HomeContext);
const [isDeleting, setIsDeleting] = useState(false);
const [isRenaming, setIsRenaming] = useState(false);
const [renameValue, setRenameValue] = useState('');
const [isOpen, setIsOpen] = useState(false);
const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter') {
e.preventDefault();
handleRename();
}
};
const handleRename = () => {
handleUpdateFolder(currentFolder.id, renameValue);
setRenameValue('');
setIsRenaming(false);
};
const dropHandler = (e: any) => {
if (e.dataTransfer) {
setIsOpen(true);
handleDrop(e, currentFolder);
e.target.style.background = 'none';
}
};
const allowDrop = (e: any) => {
e.preventDefault();
};
const highlightDrop = (e: any) => {
e.target.style.background = '#1d1c21';
};
const removeHighlight = (e: any) => {
e.target.style.background = 'none';
};
useEffect(() => {
if (isRenaming) {
setIsDeleting(false);
} else if (isDeleting) {
setIsRenaming(false);
}
}, [isRenaming, isDeleting]);
useEffect(() => {
if (searchTerm) {
setIsOpen(true);
} else {
setIsOpen(false);
}
}, [searchTerm]);
return (
<>
<div className="relative flex items-center">
{isRenaming ? (
<div className="flex w-full items-center gap-3 bg-[#1d1c21]/90 p-3">
{isOpen ? (
<IconCaretDown size={18} />
) : (
<IconCaretRight size={18} />
)}
<input
className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 text-white outline-none focus:border-neutral-100"
type="text"
value={renameValue}
onChange={(e) => setRenameValue(e.target.value)}
onKeyDown={handleEnterDown}
autoFocus
/>
</div>
) : (
<button
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#1d1c21]/90`}
onClick={() => setIsOpen(!isOpen)}
onDrop={(e) => dropHandler(e)}
onDragOver={allowDrop}
onDragEnter={highlightDrop}
onDragLeave={removeHighlight}
>
{isOpen ? (
<IconCaretDown size={18} />
) : (
<IconCaretRight size={18} />
)}
<div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3">
{currentFolder.name}
</div>
</button>
)}
{(isDeleting || isRenaming) && (
<div className="absolute right-1 z-10 flex text-gray-300">
<SidebarActionButton
handleClick={(e) => {
e.stopPropagation();
if (isDeleting) {
handleDeleteFolder(currentFolder.id);
} else if (isRenaming) {
handleRename();
}
setIsDeleting(false);
setIsRenaming(false);
}}
>
<IconCheck size={18} />
</SidebarActionButton>
<SidebarActionButton
handleClick={(e) => {
e.stopPropagation();
setIsDeleting(false);
setIsRenaming(false);
}}
>
<IconX size={18} />
</SidebarActionButton>
</div>
)}
{!isDeleting && !isRenaming && (
<div className="absolute right-1 z-10 flex text-gray-300">
<SidebarActionButton
handleClick={(e) => {
e.stopPropagation();
setIsRenaming(true);
setRenameValue(currentFolder.name);
}}
>
<IconPencil size={18} />
</SidebarActionButton>
<SidebarActionButton
handleClick={(e) => {
e.stopPropagation();
setIsDeleting(true);
}}
>
<IconTrash size={18} />
</SidebarActionButton>
</div>
)}
</div>
{isOpen ? folderComponent : null}
</>
);
};
export default Folder;
================================================
FILE: ui/components/Folder/index.ts
================================================
export { default } from './Folder';
================================================
FILE: ui/components/Markdown/CodeBlock.tsx
================================================
import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
import { FC, memo, useState } from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { useTranslation } from 'next-i18next';
import {
generateRandomString,
programmingLanguages,
} from '@/utils/app/codeblock';
interface Props {
language: string;
value: string;
}
export const CodeBlock: FC<Props> = memo(({ language, value }) => {
const { t } = useTranslation('markdown');
const [isCopied, setIsCopied] = useState<Boolean>(false);
const copyToClipboard = () => {
// fallback to allow copying to clipboard over http
const copyToClipboardFallback = (text: string) => {
let textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.position = "absolute";
textArea.style.opacity = "0";
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
textArea.remove();
};
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(value);
} else {
copyToClipboardFallback(value);
}
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, 2000);
};
const downloadAsFile = () => {
const fileExtension = programmingLanguages[language] || '.file';
const suggestedFileName = `file-${generateRandomString(
3,
true,
)}${fileExtension}`;
const fileName = window.prompt(
t('Enter file name') || '',
suggestedFileName,
);
if (!fileName) {
// user pressed cancel on prompt
return;
}
const blob = new Blob([value], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.download = fileName;
link.href = url;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
return (
<div className="codeblock relative font-sans text-[16px]">
<div className="flex items-center justify-between py-1.5 px-4">
<span className="text-xs lowercase text-white">{language}</span>
<div className="flex items-center">
<button
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
onClick={copyToClipboard}
>
{isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
{isCopied ? t('Copied!') : t('Copy code')}
</button>
<button
className="flex items-center rounded bg-none p-1 text-xs text-white"
onClick={downloadAsFile}
>
<IconDownload size={18} />
</button>
</div>
</div>
<SyntaxHighlighter
language={language}
style={oneDark}
customStyle={{ margin: 0 }}
>
{value}
</SyntaxHighlighter>
</div>
);
});
CodeBlock.displayName = 'CodeBlock';
================================================
FILE: ui/components/Markdown/MemoizedReactMarkdown.tsx
================================================
import { FC, memo } from 'react';
import ReactMarkdown, { Options } from 'react-markdown';
export const MemoizedReactMarkdown: FC<Options> = memo(
ReactMarkdown,
(prevProps, nextProps) => (
prevProps.children === nextProps.children
)
);
================================================
FILE: ui/components/Mobile/Navbar.tsx
================================================
import { IconPlus } from '@tabler/icons-react';
import { FC } from 'react';
import { Conversation } from '@/types/chat';
interface Props {
selectedConversation: Conversation;
onNewConversation: () => void;
}
export const Navbar: FC<Props> = ({
selectedConversation,
onNewConversation,
}) => {
return (
<nav className="flex w-full justify-between bg-[#161519] py-3 px-4">
<div className="mr-4"></div>
<div className="max-w-[240px] overflow-hidden text-ellipsis whitespace-nowrap">
{selectedConversation.name}
</div>
<IconPlus
className="cursor-pointer hover:text-neutral-400 mr-8"
onClick={onNewConversation}
/>
</nav>
);
};
================================================
FILE: ui/components/Promptbar/PromptBar.context.tsx
================================================
import { Dispatch, createContext } from 'react';
import { ActionType } from '@/hooks/useCreateReducer';
import { Prompt } from '@/types/prompt';
import { PromptbarInitialState } from './Promptbar.state';
export interface PromptbarContextProps {
state: PromptbarInitialState;
dispatch: Dispatch<ActionType<PromptbarInitialState>>;
handleCreatePrompt: () => void;
handleDeletePrompt: (prompt: Prompt) => void;
handleUpdatePrompt: (prompt: Prompt) => void;
}
const PromptbarContext = createContext<PromptbarContextProps>(undefined!);
export default PromptbarContext;
================================================
FILE: ui/components/Promptbar/Promptbar.state.tsx
================================================
import { Prompt } from '@/types/prompt';
export interface PromptbarInitialState {
searchTerm: string;
filteredPrompts: Prompt[];
}
export const initialState: PromptbarInitialState = {
searchTerm: '',
filteredPrompts: [],
};
================================================
FILE: ui/components/Promptbar/Promptbar.tsx
================================================
import { useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useCreateReducer } from '@/hooks/useCreateReducer';
import { savePrompts } from '@/utils/app/prompts';
import { OpenAIModels } from '@/types/openai';
import { Prompt } from '@/types/prompt';
import HomeContext from '@/pages/api/home/home.context';
import { PromptFolders } from './components/PromptFolders';
import { PromptbarSettings } from './components/PromptbarSettings';
import { Prompts } from './components/Prompts';
import Sidebar from '../Sidebar';
import PromptbarContext from './PromptBar.context';
import { PromptbarInitialState, initialState } from './Promptbar.state';
import { v4 as uuidv4 } from 'uuid';
const Promptbar = () => {
const { t } = useTranslation('promptbar');
const promptBarContextValue = useCreateReducer<PromptbarInitialState>({
initialState,
});
const {
state: { prompts, defaultModelId, showPromptbar },
dispatch: homeDispatch,
handleCreateFolder,
} = useContext(HomeContext);
const {
state: { searchTerm, filteredPrompts },
dispatch: promptDispatch,
} = promptBarContextValue;
const handleTogglePromptbar = () => {
homeDispatch({ field: 'showPromptbar', value: !showPromptbar });
localStorage.setItem('showPromptbar', JSON.stringify(!showPromptbar));
};
const handleCreatePrompt = () => {
if (defaultModelId) {
const newPrompt: Prompt = {
id: uuidv4(),
name: `Prompt ${prompts.length + 1}`,
description: '',
content: '',
model: OpenAIModels[defaultModelId],
folderId: null,
};
const updatedPrompts = [...prompts, newPrompt];
homeDispatch({ field: 'prompts', value: updatedPrompts });
savePrompts(updatedPrompts);
}
};
const handleDeletePrompt = (prompt: Prompt) => {
const updatedPrompts = prompts.filter((p) => p.id !== prompt.id);
homeDispatch({ field: 'prompts', value: updatedPrompts });
savePrompts(updatedPrompts);
};
const handleUpdatePrompt = (prompt: Prompt) => {
const updatedPrompts = prompts.map((p) => {
if (p.id === prompt.id) {
return prompt;
}
return p;
});
homeDispatch({ field: 'prompts', value: updatedPrompts });
savePrompts(updatedPrompts);
};
const handleDrop = (e: any) => {
if (e.dataTransfer) {
const prompt = JSON.parse(e.dataTransfer.getData('prompt'));
const updatedPrompt = {
...prompt,
folderId: e.target.dataset.folderId,
};
handleUpdatePrompt(updatedPrompt);
e.target.style.background = 'none';
}
};
useEffect(() => {
if (searchTerm) {
promptDispatch({
field: 'filteredPrompts',
value: prompts.filter((prompt) => {
const searchable =
prompt.name.toLowerCase() +
' ' +
prompt.description.toLowerCase() +
' ' +
prompt.content.toLowerCase();
return searchable.includes(searchTerm.toLowerCase());
}),
});
} else {
promptDispatch({ field: 'filteredPrompts', value: prompts });
}
}, [searchTerm, prompts]);
return (
<PromptbarContext.Provider
value={{
...promptBarContextValue,
handleCreatePrompt,
handleDeletePrompt,
handleUpdatePrompt,
}}
>
<Sidebar<Prompt>
side={'right'}
isOpen={showPromptbar}
addItemButtonTitle={t('New prompt')}
itemComponent={
<Prompts
prompts={filteredPrompts.filter((prompt) => !prompt.folderId)}
/>
}
folderComponent={<PromptFolders />}
items={filteredPrompts}
searchTerm={searchTerm}
handleSearchTerm={(searchTerm: string) =>
promptDispatch({ field: 'searchTerm', value: searchTerm })
}
toggleOpen={handleTogglePromptbar}
handleCreateItem={handleCreatePrompt}
handleCreateFolder={() => handleCreateFolder(t('New folder'), 'prompt')}
handleDrop={handleDrop}
/>
</PromptbarContext.Provider>
);
};
export default Promptbar;
================================================
FILE: ui/components/Promptbar/components/Prompt.tsx
================================================
import {
IconBulbFilled,
IconCheck,
IconTrash,
IconX,
} from '@tabler/icons-react';
import {
DragEvent,
MouseEventHandler,
useContext,
useEffect,
useState,
} from 'react';
import { Prompt } from '@/types/prompt';
import SidebarActionButton from '@/components/Buttons/SidebarActionButton';
import PromptbarContext from '../PromptBar.context';
import { PromptModal } from './PromptModal';
interface Props {
prompt: Prompt;
}
export const PromptComponent = ({ prompt }: Props) => {
const {
dispatch: promptDispatch,
handleUpdatePrompt,
handleDeletePrompt,
} = useContext(PromptbarContext);
const [showModal, setShowModal] = useState<boolean>(false);
const [isDeleting, setIsDeleting] = useState(false);
const [isRenaming, setIsRenaming] = useState(false);
const [renameValue, setRenameValue] = useState('');
const handleUpdate = (prompt: Prompt) => {
handleUpdatePrompt(prompt);
promptDispatch({ field: 'searchTerm', value: '' });
};
const handleDelete: MouseEventHandler<HTMLButtonElement> = (e) => {
e.stopPropagation();
if (isDeleting) {
handleDeletePrompt(prompt);
promptDispatch({ field: 'searchTerm', value: '' });
}
setIsDeleting(false);
};
const handleCancelDelete: MouseEventHandler<HTMLButtonElement> = (e) => {
e.stopPropagation();
setIsDeleting(false);
};
const handleOpenDeleteModal: MouseEventHandler<HTMLButtonElement> = (e) => {
e.stopPropagation();
setIsDeleting(true);
};
const handleDragStart = (e: DragEvent<HTMLButtonElement>, prompt: Prompt) => {
if (e.dataTransfer) {
e.dataTransfer.setData('prompt', JSON.stringify(prompt));
}
};
useEffect(() => {
if (isRenaming) {
setIsDeleting(false);
} else if (isDeleting) {
setIsRenaming(false);
}
}, [isRenaming, isDeleting]);
return (
<div className="relative flex items-center">
<button
className="flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#1d1c21]/90"
draggable="true"
onClick={(e) => {
e.stopPropagation();
setShowModal(true);
}}
onDragStart={(e) => handleDragStart(e, prompt)}
onMouseLeave={() => {
setIsDeleting(false);
setIsRenaming(false);
setRenameValue('');
}}
>
<IconBulbFilled size={18} />
<div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all pr-4 text-left text-[12.5px] leading-3">
{prompt.name}
</div>
</button>
{(isDeleting || isRenaming) && (
<div className="absolute right-1 z-10 flex text-gray-300">
<SidebarActionButton handleClick={handleDelete}>
<IconCheck size={18} />
</SidebarActionButton>
<SidebarActionButton handleClick={handleCancelDelete}>
<IconX size={18} />
</SidebarActionButton>
</div>
)}
{!isDeleting && !isRenaming && (
<div className="absolute right-1 z-10 flex text-gray-300">
<SidebarActionButton handleClick={handleOpenDeleteModal}>
<IconTrash size={18} />
</SidebarActionButton>
</div>
)}
{showModal && (
<PromptModal
prompt={prompt}
onClose={() => setShowModal(false)}
onUpdatePrompt={handleUpdate}
/>
)}
</div>
);
};
================================================
FILE: ui/components/Promptbar/components/PromptFolders.tsx
================================================
import { useContext } from 'react';
import { FolderInterface } from '@/types/folder';
import HomeContext from '@/pages/api/home/home.context';
import Folder from '@/components/Folder';
import { PromptComponent } from '@/components/Promptbar/components/Prompt';
import PromptbarContext from '../PromptBar.context';
export const PromptFolders = () => {
const {
state: { folders },
} = useContext(HomeContext);
const {
state: { searchTerm, filteredPrompts },
handleUpdatePrompt,
} = useContext(PromptbarContext);
const handleDrop = (e: any, folder: FolderInterface) => {
if (e.dataTransfer) {
const prompt = JSON.parse(e.dataTransfer.getData('prompt'));
const updatedPrompt = {
...prompt,
folderId: folder.id,
};
handleUpdatePrompt(updatedPrompt);
}
};
const PromptFolders = (currentFolder: FolderInterface) =>
filteredPrompts
.filter((p) => p.folderId)
.map((prompt, index) => {
if (prompt.folderId === currentFolder.id) {
return (
<div key={index} className="ml-5 gap-2 border-l pl-2">
<PromptComponent prompt={prompt} />
</div>
);
}
});
return (
<div className="flex w-full flex-col pt-2">
{folders
.filter((folder) => folder.type === 'prompt')
.sort((a, b) => a.name.localeCompare(b.name))
.map((folder, index) => (
<Folder
key={index}
searchTerm={searchTerm}
currentFolder={folder}
handleDrop={handleDrop}
folderComponent={PromptFolders(folder)}
/>
))}
</div>
);
};
================================================
FILE: ui/components/Promptbar/components/PromptModal.tsx
================================================
import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { Prompt } from '@/types/prompt';
interface Props {
prompt: Prompt;
onClose: () => void;
onUpdatePrompt: (prompt: Prompt) => void;
}
export const PromptModal: FC<Props> = ({ prompt, onClose, onUpdatePrompt }) => {
const { t } = useTranslation('promptbar');
const [name, setName] = useState(prompt.name);
const [description, setDescription] = useState(prompt.description);
const [content, setContent] = useState(prompt.content);
const modalRef = useRef<HTMLDivElement>(null);
const nameInputRef = useRef<HTMLInputElement>(null);
const handleEnter = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter' && !e.shiftKey) {
onUpdatePrompt({ ...prompt, name, description, content: content.trim() });
onClose();
}
};
useEffect(() => {
const handleMouseDown = (e: MouseEvent) => {
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
window.addEventListener('mouseup', handleMouseUp);
}
};
const handleMouseUp = (e: MouseEvent) => {
window.removeEventListener('mouseup', handleMouseUp);
onClose();
};
window.addEventListener('mousedown', handleMouseDown);
return () => {
window.removeEventListener('mousedown', handleMouseDown);
};
}, [onClose]);
useEffect(() => {
nameInputRef.current?.focus();
}, []);
return (
<div
className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
onKeyDown={handleEnter}
>
<div className="fixed inset-0 z-10 overflow-hidden">
<div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div
className="hidden sm:inline-block sm:h-screen sm:align-middle"
aria-hidden="true"
/>
<div
ref={modalRef}
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#161519] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
role="dialog"
>
<div className="text-sm font-bold text-black dark:text-neutral-200">
{t('Name')}
</div>
<input
ref={nameInputRef}
className="mt-2 w-full rounded-lg border border-neutral-600 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
placeholder={t('A name for your prompt.') || ''}
value={name}
onChange={(e) => setName(e.target.value)}
/>
<div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
{t('Description')}
</div>
<textarea
className="mt-2 w-full rounded-lg border border-neutral-600 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
style={{ resize: 'none' }}
placeholder={t('A description for your prompt.') || ''}
value={description}
onChange={(e) => setDescription(e.target.value)}
rows={3}
/>
<div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
{t('Prompt')}
</div>
<textarea
className="mt-2 w-full rounded-lg border border-neutral-600 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
style={{ resize: 'none' }}
placeholder={
t(
'Prompt content. Use {{}} to denote a variable. Ex: {{name}} is a {{adjective}} {{noun}}',
) || ''
}
value={content}
onChange={(e) => setContent(e.target.value)}
rows={10}
/>
<button
type="button"
className="w-full px-4 py-2 mt-6 border rounded-lg shadow border-neutral-600 text-neutral-900 hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
onClick={() => {
const updatedPrompt = {
...prompt,
name,
description,
content: content.trim(),
};
onUpdatePrompt(updatedPrompt);
onClose();
}}
>
{t('Save')}
</button>
</div>
</div>
</div>
</div>
);
};
================================================
FILE: ui/components/Promptbar/components/PromptbarSettings.tsx
================================================
import { FC } from 'react';
interface Props {}
export const PromptbarSettings: FC<Props> = () => {
return <div></div>;
};
================================================
FILE: ui/components/Promptbar/components/Prompts.tsx
================================================
import { FC } from 'react';
import { Prompt } from '@/types/prompt';
import { PromptComponent } from './Prompt';
interface Props {
prompts: Prompt[];
}
export const Prompts: FC<Props> = ({ prompts }) => {
return (
<div className="flex w-full flex-col gap-1">
{prompts
.slice()
.reverse()
.map((prompt, index) => (
<PromptComponent key={index} prompt={prompt} />
))}
</div>
);
};
================================================
FILE: ui/components/Promptbar/index.ts
================================================
export { default } from './Promptbar';
================================================
FILE: ui/components/Search/Search.tsx
================================================
import { IconX } from '@tabler/icons-react';
import { FC } from 'react';
import { useTranslation } from 'next-i18next';
interface Props {
placeholder: string;
searchTerm: string;
onSearch: (searchTerm: string) => void;
}
const Search: FC<Props> = ({ placeholder, searchTerm, onSearch }) => {
const { t } = useTranslation('sidebar');
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onSearch(e.target.value);
};
const clearSearch = () => {
onSearch('');
};
return (
<div className="relative flex items-center">
<input
className="w-full flex-1 rounded-md border border-neutral-700 bg-[#161519] px-4 py-3 pr-10 text-[14px] leading-3 text-white"
type="text"
placeholder={t(placeholder) || ''}
value={searchTerm}
onChange={handleSearchChange}
/>
{searchTerm && (
<IconX
className="absolute right-4 cursor-pointer text-neutral-300 hover:text-neutral-400"
size={18}
onClick={clearSearch}
/>
)}
</div>
);
};
export default Search;
================================================
FILE: ui/components/Search/index.ts
================================================
export { default } from './Search';
================================================
FILE: ui/components/Settings/Import.tsx
================================================
import { IconFileImport } from '@tabler/icons-react';
import { FC } from 'react';
import { useTranslation } from 'next-i18next';
import { SupportedExportFormats } from '@/types/export';
import { SidebarButton } from '../Sidebar/SidebarButton';
interface Props {
onImport: (data: SupportedExportFormats) => void;
}
export const Import: FC<Props> = ({ onImport }) => {
const { t } = useTranslation('sidebar');
return (
<>
<input
id="import-file"
className="sr-only"
tabIndex={-1}
type="file"
accept=".json"
onChange={(e) => {
if (!e.target.files?.length) return;
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
let json = JSON.parse(e.target?.result as string);
onImport(json);
};
reader.readAsText(file);
}}
/>
<SidebarButton
text={t('Import data')}
icon={<IconFileImport size={18} />}
onClick={() => {
const importFile = document.querySelector(
'#import-file',
) as HTMLInputElement;
if (importFile) {
importFile.click();
}
}}
/>
</>
);
};
================================================
FILE: ui/components/Settings/Key.tsx
================================================
import { IconCheck, IconKey, IconX } from '@tabler/icons-react';
import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { SidebarButton } from '../Sidebar/SidebarButton';
interface Props {
apiKey: string;
onApiKeyChange: (apiKey: string) => void;
}
export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
const { t } = useTranslation('sidebar');
const [isChanging, setIsChanging] = useState(false);
const [newKey, setNewKey] = useState(apiKey);
const inputRef = useRef<HTMLInputElement>(null);
const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter') {
e.preventDefault();
handleUpdateKey(newKey);
}
};
const handleUpdateKey = (newKey: string) => {
onApiKeyChange(newKey.trim());
setIsChanging(false);
};
useEffect(() => {
if (isChanging) {
inputRef.current?.focus();
}
}, [isChanging]);
return isChanging ? (
<div className="duration:200 flex w-full cursor-pointer items-center rounded-md py-3 px-3 transition-colors hover:bg-gray-500/10">
<IconKey size={18} />
<input
ref={inputRef}
className="ml-2 h-[20px] flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-[12.5px] leading-3 text-left text-white outline-none focus:border-neutral-100"
type="password"
value={newKey}
onChange={(e) => setNewKey(e.target.value)}
onKeyDown={handleEnterDown}
placeholder={t('API Key') || 'API Key'}
/>
<div className="flex w-[40px]">
<IconCheck
className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={18}
onClick={(e) => {
e.stopPropagation();
handleUpdateKey(newKey);
}}
/>
<IconX
className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={18}
onClick={(e) => {
e.stopPropagation();
setIsChanging(false);
setNewKey(apiKey);
}}
/>
</div>
</div>
) : (
<SidebarButton
text={t('OpenAI API Key')}
icon={<IconKey size={18} />}
onClick={() => setIsChanging(true)}
/>
);
};
================================================
FILE: ui/components/Settings/SettingDialog.tsx
================================================
import { FC, useContext, useEffect, useReducer, useRef } from 'react';
import { useTranslation } from 'next-i18next';
import { useCreateReducer } from '@/hooks/useCreateReducer';
import { getSettings, saveSettings } from '@/utils/app/settings';
import { Settings } from '@/types/settings';
import HomeContext from '@/pages/api/home/home.context';
interface Props {
open: boolean;
onClose: () => void;
}
export const SettingDialog: FC<Props> = ({ open, onClose }) => {
const { t } = useTranslation('settings');
const settings: Settings = getSettings();
const { state, dispatch } = useCreateReducer<Settings>({
initialState: settings,
});
const { dispatch: homeDispatch } = useContext(HomeContext);
const modalRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleMouseDown = (e: MouseEvent) => {
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
window.addEventListener('mouseup', handleMouseUp);
}
};
const handleMouseUp = (e: MouseEvent) => {
window.removeEventListener('mouseup', handleMouseUp);
onClose();
};
window.addEventListener('mousedown', handleMouseDown);
return () => {
window.removeEventListener('mousedown', handleMouseDown);
};
}, [onClose]);
const handleSave = () => {
homeDispatch({ field: 'lightMode', value: state.theme });
saveSettings(state);
};
// Render nothing if the dialog is not open.
if (!open) {
return <></>;
}
// Render the dialog.
return (
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
<div className="fixed inset-0 z-10 overflow-hidden">
<div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div
className="hidden sm:inline-block sm:h-screen sm:align-middle"
aria-hidden="true"
/>
<div
ref={modalRef}
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#161519] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
role="dialog"
>
<div className="text-lg pb-4 font-bold text-black dark:text-neutral-200">
{t('Settings')}
</div>
<div className="text-sm font-bold mb-2 text-black dark:text-neutral-200">
{t('Theme')}
</div>
<select
className="w-full cursor-pointer bg-transparent p-2 text-neutral-700 dark:text-neutral-200"
value={state.theme}
onChange={(event) =>
dispatch({ field: 'theme', value: event.target.value })
}
>
<option value="dark">{t('Dark mode')}</option>
<option value="light">{t('Light mode')}</option>
</select>
<button
type="button"
className="w-full px-4 py-2 mt-6 border rounded-lg shadow border-neutral-600 text-neutral-900 hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
onClick={() => {
handleSave();
onClose();
}}
>
{t('Save')}
</button>
</div>
</div>
</div>
</div>
);
};
================================================
FILE: ui/components/Sidebar/Sidebar.tsx
================================================
import { IconFolderPlus, IconMistOff, IconPlus } from '@tabler/icons-react';
import { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import {
CloseSidebarButton,
OpenSidebarButton,
} from './components/OpenCloseButton';
import Search from '../Search';
interface Props<T> {
isOpen: boolean;
addItemButtonTitle: string;
side: 'left' | 'right';
items: T[];
itemComponent: ReactNode;
folderComponent: ReactNode;
footerComponent?: ReactNode;
searchTerm: string;
handleSearchTerm: (searchTerm: string) => void;
toggleOpen: () => void;
handleCreateItem: () => void;
handleCreateFolder: () => void;
handleDrop: (e: any) => void;
}
const Sidebar = <T,>({
isOpen,
addItemButtonTitle,
side,
items,
itemComponent,
folderComponent,
footerComponent,
searchTerm,
handleSearchTerm,
toggleOpen,
handleCreateItem,
handleCreateFolder,
handleDrop,
}: Props<T>) => {
const { t } = useTranslation('promptbar');
const allowDrop = (e: any) => {
e.preventDefault();
};
const highlightDrop = (e: any) => {
e.target.style.background = '#1d1c21';
};
const removeHighlight = (e: any) => {
e.target.style.background = 'none';
};
return isOpen ? (
<div>
<div
className={`fixed top-0 ${side}-0 z-40 flex h-full w-[260px] flex-none flex-col space-y-2 bg-[#161519] p-2 text-[14px] transition-all sm:relative sm:top-0`}
>
<div className="flex items-center">
<button
className="text-sidebar flex w-[190px] flex-shrink-0 cursor-pointer select-none items-center gap-3 rounded-md border border-white/20 p-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
onClick={() => {
handleCreateItem();
handleSearchTerm('');
}}
>
<IconPlus size={16} />
{addItemButtonTitle}
</button>
<button
className="ml-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
onClick={handleCreateFolder}
>
<IconFolderPlus size={16} />
</button>
</div>
<Search
placeholder={t('Search...') || ''}
searchTerm={searchTerm}
onSearch={handleSearchTerm}
/>
<div className="flex-grow overflow-auto">
{items?.length > 0 && (
<div className="flex border-b border-white/20 pb-2">
{folderComponent}
</div>
)}
{items?.length > 0 ? (
<div
className="pt-2"
onDrop={handleDrop}
onDragOver={allowDrop}
onDragEnter={highlightDrop}
onDragLeave={removeHighlight}
>
{itemComponent}
</div>
) : (
<div className="mt-8 select-none text-center text-white opacity-50">
<IconMistOff className="mx-auto mb-3" />
<span className="text-[14px] leading-normal">
{t('No data.')}
</span>
</div>
)}
</div>
{footerComponent}
</div>
<CloseSidebarButton onClick={toggleOpen} side={side} />
</div>
) : (
<OpenSidebarButton onClick={toggleOpen} side={side} />
);
};
export default Sidebar;
================================================
FILE: ui/components/Sidebar/SidebarButton.tsx
================================================
import { FC } from 'react';
interface Props {
text: string;
icon: JSX.Element;
onClick: () => void;
}
export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => {
return (
<button
className="flex w-full cursor-pointer select-none items-center gap-3 rounded-md py-3 px-3 text-[14px] leading-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
onClick={onClick}
>
<div>{icon}</div>
<span>{text}</span>
</button>
);
};
================================================
FILE: ui/components/Sidebar/components/OpenCloseButton.tsx
================================================
import { IconArrowBarLeft, IconArrowBarRight } from '@tabler/icons-react';
interface Props {
onClick: any;
side: 'left' | 'right';
}
export const CloseSidebarButton = ({ onClick, side }: Props) => {
return (
<>
<button
className={`fixed top-5 ${
side === 'right' ? 'right-[270px]' : 'left-[270px]'
} z-50 h-7 w-7 hover:text-gray-400 dark:text-white dark:hover:text-gray-300 sm:top-0.5 sm:${
side === 'right' ? 'right-[270px]' : 'left-[270px]'
} sm:h-8 sm:w-8 sm:text-neutral-700`}
onClick={onClick}
>
{side === 'right' ? <IconArrowBarRight /> : <IconArrowBarLeft />}
</button>
<div
onClick={onClick}
className="absolute top-0 left-0 z-10 h-full w-full bg-black opacity-70 sm:hidden"
></div>
</>
);
};
export const OpenSidebarButton = ({ onClick, side }: Props) => {
return (
<button
className={`fixed top-2.5 ${
side === 'right' ? 'right-2' : 'left-2'
} z-50 h-7 w-7 text-white hover:text-gray-400 dark:text-white dark:hover:text-gray-300 sm:top-0.5 sm:${
side === 'right' ? 'right-2' : 'left-2'
} sm:h-8 sm:w-8 sm:text-neutral-700`}
onClick={onClick}
>
{side === 'right' ? <IconArrowBarLeft /> : <IconArrowBarRight />}
</button>
);
};
================================================
FILE: ui/components/Sidebar/index.ts
================================================
export { default } from './Sidebar';
================================================
FILE: ui/components/Spinner/Spinner.tsx
================================================
import { FC } from 'react';
interface Props {
size?: string;
className?: string;
}
const Spinner = ({ size = '1em', className = '' }: Props) => {
return (
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className={`animate-spin ${className}`}
height={size}
width={size}
xmlns="http://www.w3.org/2000/svg"
>
<line x1="12" y1="2" x2="12" y2="6"></line>
<line x1="12" y1="18" x2="12" y2="22"></line>
<line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
<line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
<line x1="2" y1="12" x2="6" y2="12"></line>
<line x1="18" y1="12" x2="22" y2="12"></line>
<line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
<line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
</svg>
);
};
export default Spinner;
================================================
FILE: ui/components/Spinner/index.ts
================================================
export { default } from './Spinner';
================================================
FILE: ui/docker-compose.yml
================================================
version: '3.6'
services:
chatgpt:
build: .
ports:
- 3000:3000
environment:
- 'OPENAI_API_KEY='
================================================
FILE: ui/docs/google_search.md
================================================
# Google Search Tool
Use the Google Search API to search the web in Chatbot UI.
## How To Enable
1. Create a new project at https://console.developers.google.com/apis/dashboard
2. Create a new API key at https://console.developers.google.com/apis/credentials
3. Enable the Custom Search API at https://console.developers.google.com/apis/library/customsearch.googleapis.com
4. Create a new Custom Search Engine at https://cse.google.com/cse/all
5. Add your API Key and your Custom Search Engine ID to your .env.local file
6. You can now select the Google Search Tool in the search tools dropdown
## Usage Limits
Google gives you 100 free searches per day. You can increase this limit by creating a billing account.
================================================
FILE: ui/hooks/useCreateReducer.ts
================================================
import { useMemo, useReducer } from 'react';
// Extracts property names from initial state of reducer to allow typesafe dispatch objects
export type FieldNames<T> = {
[K in keyof T]: T[K] extends string ? K : K;
}[keyof T];
// Returns the Action Type for the dispatch object to be used for typing in things like context
export type ActionType<T> =
| { type: 'reset' }
| { type?: 'change'; field: FieldNames<T>; value: any };
// Returns a typed dispatch and state
export const useCreateReducer = <T>({ initialState }: { initialState: T }) => {
type Action =
| { type: 'reset' }
| { type?: 'change'; field: FieldNames<T>; value: any };
const reducer = (state: T, action: Action) => {
if (!action.type) return { ...state, [action.field]: action.value };
if (action.type === 'reset') return initialState;
throw new Error();
};
const [state, dispatch] = useReducer(reducer, initialState);
return useMemo(() => ({ state, dispatch }), [state, dispatch]);
};
================================================
FILE: ui/hooks/useFetch.ts
================================================
export type RequestModel = {
params?: object;
headers?: object;
signal?: AbortSignal;
};
export type RequestWithBodyModel = RequestModel & {
body?: object | FormData;
};
export const useFetch = () => {
const handleFetch = async (
url: string,
request: any,
signal?: AbortSignal,
) => {
const requestUrl = request?.params ? `${url}${request.params}` : url;
const requestBody = request?.body
? request.body instanceof FormData
? { ...request, body: request.body }
: { ...request, body: JSON.stringify(request.body) }
: request;
const headers = {
...(request?.headers
? request.headers
: request?.body && request.body instanceof FormData
? {}
: { 'Content-type': 'application/json' }),
};
return fetch(requestUrl, { ...requestBody, headers, signal })
.then((response) => {
if (!response.ok) throw response;
const contentType = response.headers.get('content-type');
const contentDisposition = response.headers.get('content-disposition');
const headers = response.headers;
const result =
contentType &&
(contentType?.indexOf('application/json') !== -1 ||
contentType?.indexOf('text/plain') !== -1)
? response.json()
: contentDisposition?.indexOf('attachment') !== -1
? response.blob()
: response;
return result;
})
.catch(async (err) => {
const contentType = err.headers.get('content-type');
const errResult =
contentType && contentType?.indexOf('application/problem+json') !== -1
? await err.json()
: err;
throw errResult;
});
};
return {
get: async <T>(url: string, request?: RequestModel): Promise<T> => {
return handleFetch(url, { ...request, method: 'get' });
},
post: async <T>(
url: string,
request?: RequestWithBodyModel,
): Promise<T> => {
return handleFetch(url, { ...request, method: 'post' });
},
put: async <T>(url: string, request?: RequestWithBodyModel): Promise<T> => {
return handleFetch(url, { ...request, method: 'put' });
},
patch: async <T>(
url: string,
request?: RequestWithBodyModel,
): Promise<T> => {
return handleFetch(url, { ...request, method: 'patch' });
},
delete: async <T>(url: string, request?: RequestModel): Promise<T> => {
return handleFetch(url, { ...request, method: 'delete' });
},
};
};
================================================
FILE: ui/k8s/chatbot-ui.yaml
================================================
apiVersion: v1
kind: Namespace
metadata:
name: chatbot-ui
---
apiVersion: v1
kind: Secret
metadata:
namespace: chatbot-ui
name: chatbot-ui
type: Opaque
data:
OPENAI_API_KEY: <base64 encoded key>
---
apiVersion: apps/v1
kind: Deployment
metadata:
namespace: chatbot-ui
name: chatbot-ui
labels:
app: chatbot-ui
spec:
replicas: 1
selector:
matchLabels:
app: chatbot-ui
template:
metadata:
labels:
app: chatbot-ui
spec:
containers:
- name: chatbot-ui
image: <docker user>/chatbot-ui:latest
resources: {}
ports:
- containerPort: 3000
env:
- name: OPENAI_API_KEY
valueFrom:
secretKeyRef:
name: chatbot-ui
key: OPENAI_API_KEY
---
kind: Service
apiVersion: v1
metadata:
namespace: chatbot-ui
name: chatbot-ui
labels:
app: chatbot-ui
spec:
ports:
- name: http
protocol: TCP
port: 80
targetPort: 3000
selector:
app: chatbot-ui
type: ClusterIP
================================================
FILE: ui/next-i18next.config.js
================================================
module.exports = {
i18n: {
defaultLocale: 'en',
locales: [
"bn",
"de",
"en",
"es",
"fr",
"he",
"id",
"it",
"ja",
"ko",
"pl",
"pt",
"ru",
"ro",
"sv",
"te",
"vi",
"zh",
"ar",
"tr",
"ca",
"fi",
],
},
localePath:
typeof window === 'undefined'
? require('path').resolve('./public/locales')
: '/public/locales',
};
================================================
FILE: ui/next.config.js
================================================
const { i18n } = require('./next-i18next.config');
/** @type {import('next').NextConfig} */
const nextConfig = {
i18n,
reactStrictMode: true,
webpack(config, { isServer, dev }) {
config.experiments = {
asyncWebAssembly: true,
layers: true,
};
return config;
},
};
module.exports = nextConfig;
================================================
FILE: ui/no-wait.Dockerfile
================================================
# ---- Base Node ----
FROM node:19-alpine AS base
WORKDIR /app
COPY package*.json ./
# ---- Dependencies ----
FROM base AS dependencies
RUN npm ci
# ---- Build ----
FROM dependencies AS build
COPY . .
RUN npm run build
# ---- Production ----
FROM node:19-alpine AS production
WORKDIR /app
COPY --from=dependencies /app/node_modules ./node_modules
COPY --from=build /app/.next ./.next
COPY --from=build /app/public ./public
COPY --from=build /app/package*.json ./
COPY --from=build /app/next.config.js ./next.config.js
COPY --from=build /app/next-i18next.config.js ./next-i18next.config.js
# Expose the port the app will run on
EXPOSE 3000
# Start the application after the API is ready
CMD npm start
================================================
FILE: ui/package.json
================================================
{
"name": "ai-chatbot-starter",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"format": "prettier --write .",
"test": "vitest",
"coverage": "vitest run --coverage"
},
"dependencies": {
"@dqbd/tiktoken": "^1.0.2",
"@tabler/icons-react": "^2.9.0",
"eventsource-parser": "^0.1.0",
"i18next": "^22.4.13",
"next": "13.2.4",
"next-i18next": "^13.2.2",
"openai": "^3.2.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hot-toast": "^2.4.0",
"react-i18next": "^12.2.0",
"react-markdown": "^8.0.5",
"react-query": "^3.39.3",
"react-syntax-highlighter": "^15.5.0",
"rehype-mathjax": "^4.0.2",
"remark-gfm": "^3.0.1",
"remark-math": "^5.1.1",
"uuid": "^9.0.0"
},
"devDependencies": {
"@mozilla/readability": "^0.4.4",
"@tailwindcss/typography": "^0.5.9",
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
"@types/jsdom": "^21.1.1",
"@types/node": "18.15.0",
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",
"@types/react-syntax-highlighter": "^15.5.6",
"@types/uuid": "^9.0.1",
"@vitest/coverage-c8": "^0.29.7",
"autoprefixer": "^10.4.14",
"endent": "^2.1.0",
"eslint": "8.36.0",
"eslint-config-next": "13.2.4",
"gpt-3-encoder": "^1.1.4",
"jsdom": "^21.1.1",
"postcss": "^8.4.21",
"prettier": "^2.8.7",
"prettier-plugin-tailwindcss": "^0.2.5",
"tailwindcss": "^3.2.7",
"typescript": "4.9.5",
"vitest": "^0.29.7"
}
}
================================================
FILE: ui/pages/_app.tsx
================================================
import { Toaster } from 'react-hot-toast';
import { QueryClient, Que
gitextract_5taggak1/
├── .gitattributes
├── .github/
│ └── workflows/
│ └── on-push.yml
├── .gitignore
├── LICENSE.md
├── README.md
├── api/
│ └── run.sh
├── cuda/
│ ├── ggml.Dockerfile
│ ├── gguf.Dockerfile
│ └── run.sh
├── deploy/
│ └── kubernetes/
│ ├── kustomization.yaml
│ ├── llama-gpt-api-deployment.yaml
│ ├── llama-gpt-api-service.yaml
│ ├── llama-gpt-ui-deployment.yaml
│ └── llama-gpt-ui-service.yaml
├── docker-compose-cuda-ggml.yml
├── docker-compose-cuda-gguf.yml
├── docker-compose-gguf.yml
├── docker-compose-mac.yml
├── docker-compose.yml
├── models/
│ └── .gitkeep
├── run-mac.sh
├── run.sh
└── ui/
├── .dockerignore
├── .eslintrc.json
├── .gitignore
├── CONTRIBUTING.md
├── Dockerfile
├── Makefile
├── __tests__/
│ └── utils/
│ └── app/
│ └── importExports.test.ts
├── components/
│ ├── Buttons/
│ │ └── SidebarActionButton/
│ │ ├── SidebarActionButton.tsx
│ │ └── index.ts
│ ├── Chat/
│ │ ├── Chat.tsx
│ │ ├── ChatInput.tsx
│ │ ├── ChatLoader.tsx
│ │ ├── ChatMessage.tsx
│ │ ├── ErrorMessageDiv.tsx
│ │ ├── MemoizedChatMessage.tsx
│ │ ├── ModelSelect.tsx
│ │ ├── PluginSelect.tsx
│ │ ├── PromptList.tsx
│ │ ├── Regenerate.tsx
│ │ ├── SystemPrompt.tsx
│ │ ├── Temperature.tsx
│ │ └── VariableModal.tsx
│ ├── Chatbar/
│ │ ├── Chatbar.context.tsx
│ │ ├── Chatbar.state.tsx
│ │ ├── Chatbar.tsx
│ │ └── components/
│ │ ├── ChatFolders.tsx
│ │ ├── ChatbarSettings.tsx
│ │ ├── ClearConversations.tsx
│ │ ├── Conversation.tsx
│ │ ├── Conversations.tsx
│ │ └── PluginKeys.tsx
│ ├── Folder/
│ │ ├── Folder.tsx
│ │ └── index.ts
│ ├── Markdown/
│ │ ├── CodeBlock.tsx
│ │ └── MemoizedReactMarkdown.tsx
│ ├── Mobile/
│ │ └── Navbar.tsx
│ ├── Promptbar/
│ │ ├── PromptBar.context.tsx
│ │ ├── Promptbar.state.tsx
│ │ ├── Promptbar.tsx
│ │ ├── components/
│ │ │ ├── Prompt.tsx
│ │ │ ├── PromptFolders.tsx
│ │ │ ├── PromptModal.tsx
│ │ │ ├── PromptbarSettings.tsx
│ │ │ └── Prompts.tsx
│ │ └── index.ts
│ ├── Search/
│ │ ├── Search.tsx
│ │ └── index.ts
│ ├── Settings/
│ │ ├── Import.tsx
│ │ ├── Key.tsx
│ │ └── SettingDialog.tsx
│ ├── Sidebar/
│ │ ├── Sidebar.tsx
│ │ ├── SidebarButton.tsx
│ │ ├── components/
│ │ │ └── OpenCloseButton.tsx
│ │ └── index.ts
│ └── Spinner/
│ ├── Spinner.tsx
│ └── index.ts
├── docker-compose.yml
├── docs/
│ └── google_search.md
├── hooks/
│ ├── useCreateReducer.ts
│ └── useFetch.ts
├── k8s/
│ └── chatbot-ui.yaml
├── next-i18next.config.js
├── next.config.js
├── no-wait.Dockerfile
├── package.json
├── pages/
│ ├── _app.tsx
│ ├── _document.tsx
│ ├── api/
│ │ ├── chat.ts
│ │ ├── google.ts
│ │ ├── home/
│ │ │ ├── home.context.tsx
│ │ │ ├── home.state.tsx
│ │ │ ├── home.tsx
│ │ │ └── index.ts
│ │ └── models.ts
│ └── index.tsx
├── postcss.config.js
├── prettier.config.js
├── public/
│ └── locales/
│ ├── ar/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── bn/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── ca/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ └── sidebar.json
│ ├── de/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── en/
│ │ └── common.json
│ ├── es/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── fi/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── fr/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── he/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── id/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── it/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── ja/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── ko/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── pl/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── pt/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── ro/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── ru/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── si/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── sv/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── te/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── tr/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ └── sidebar.json
│ ├── vi/
│ │ ├── chat.json
│ │ ├── common.json
│ │ ├── markdown.json
│ │ ├── promptbar.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ └── zh/
│ ├── chat.json
│ ├── common.json
│ ├── markdown.json
│ ├── promptbar.json
│ ├── settings.json
│ └── sidebar.json
├── services/
│ ├── errorService.ts
│ └── useApiService.ts
├── styles/
│ └── globals.css
├── tailwind.config.js
├── tsconfig.json
├── types/
│ ├── chat.ts
│ ├── data.ts
│ ├── env.ts
│ ├── error.ts
│ ├── export.ts
│ ├── folder.ts
│ ├── google.ts
│ ├── index.ts
│ ├── openai.ts
│ ├── plugin.ts
│ ├── prompt.ts
│ ├── settings.ts
│ └── storage.ts
├── utils/
│ ├── app/
│ │ ├── api.ts
│ │ ├── clean.ts
│ │ ├── codeblock.ts
│ │ ├── const.ts
│ │ ├── conversation.ts
│ │ ├── folders.ts
│ │ ├── importExport.ts
│ │ ├── prompts.ts
│ │ └── settings.ts
│ ├── data/
│ │ └── throttle.ts
│ └── server/
│ ├── google.ts
│ └── index.ts
└── vitest.config.ts
SYMBOL INDEX (100 symbols across 62 files)
FILE: ui/components/Buttons/SidebarActionButton/SidebarActionButton.tsx
type Props (line 3) | interface Props {
FILE: ui/components/Chat/Chat.tsx
type Props (line 37) | interface Props {
FILE: ui/components/Chat/ChatInput.tsx
type Props (line 31) | interface Props {
FILE: ui/components/Chat/ChatLoader.tsx
type Props (line 4) | interface Props { }
FILE: ui/components/Chat/ChatMessage.tsx
type Props (line 26) | interface Props {
method code (line 232) | code({ node, inline, className, children, ...props }) {
method table (line 256) | table({ children }) {
method th (line 263) | th({ children }) {
method td (line 270) | td({ children }) {
FILE: ui/components/Chat/ErrorMessageDiv.tsx
type Props (line 6) | interface Props {
FILE: ui/components/Chat/PluginSelect.tsx
type Props (line 7) | interface Props {
FILE: ui/components/Chat/PromptList.tsx
type Props (line 5) | interface Props {
FILE: ui/components/Chat/Regenerate.tsx
type Props (line 6) | interface Props {
FILE: ui/components/Chat/SystemPrompt.tsx
type Props (line 20) | interface Props {
FILE: ui/components/Chat/Temperature.tsx
type Props (line 9) | interface Props {
FILE: ui/components/Chat/VariableModal.tsx
type Props (line 5) | interface Props {
FILE: ui/components/Chatbar/Chatbar.context.tsx
type ChatbarContextProps (line 11) | interface ChatbarContextProps {
FILE: ui/components/Chatbar/Chatbar.state.tsx
type ChatbarInitialState (line 3) | interface ChatbarInitialState {
FILE: ui/components/Chatbar/components/ChatFolders.tsx
type Props (line 11) | interface Props {
FILE: ui/components/Chatbar/components/ClearConversations.tsx
type Props (line 8) | interface Props {
FILE: ui/components/Chatbar/components/Conversation.tsx
type Props (line 24) | interface Props {
FILE: ui/components/Chatbar/components/Conversations.tsx
type Props (line 5) | interface Props {
FILE: ui/components/Folder/Folder.tsx
type Props (line 23) | interface Props {
FILE: ui/components/Markdown/CodeBlock.tsx
type Props (line 13) | interface Props {
FILE: ui/components/Mobile/Navbar.tsx
type Props (line 6) | interface Props {
FILE: ui/components/Promptbar/PromptBar.context.tsx
type PromptbarContextProps (line 9) | interface PromptbarContextProps {
FILE: ui/components/Promptbar/Promptbar.state.tsx
type PromptbarInitialState (line 3) | interface PromptbarInitialState {
FILE: ui/components/Promptbar/components/Prompt.tsx
type Props (line 22) | interface Props {
FILE: ui/components/Promptbar/components/PromptModal.tsx
type Props (line 7) | interface Props {
FILE: ui/components/Promptbar/components/PromptbarSettings.tsx
type Props (line 3) | interface Props {}
FILE: ui/components/Promptbar/components/Prompts.tsx
type Props (line 7) | interface Props {
FILE: ui/components/Search/Search.tsx
type Props (line 6) | interface Props {
FILE: ui/components/Settings/Import.tsx
type Props (line 10) | interface Props {
FILE: ui/components/Settings/Key.tsx
type Props (line 8) | interface Props {
FILE: ui/components/Settings/SettingDialog.tsx
type Props (line 13) | interface Props {
FILE: ui/components/Sidebar/Sidebar.tsx
type Props (line 12) | interface Props<T> {
FILE: ui/components/Sidebar/SidebarButton.tsx
type Props (line 3) | interface Props {
FILE: ui/components/Sidebar/components/OpenCloseButton.tsx
type Props (line 3) | interface Props {
FILE: ui/components/Spinner/Spinner.tsx
type Props (line 3) | interface Props {
FILE: ui/hooks/useCreateReducer.ts
type FieldNames (line 4) | type FieldNames<T> = {
type ActionType (line 9) | type ActionType<T> =
type Action (line 15) | type Action =
FILE: ui/hooks/useFetch.ts
type RequestModel (line 1) | type RequestModel = {
type RequestWithBodyModel (line 7) | type RequestWithBodyModel = RequestModel & {
FILE: ui/next.config.js
method webpack (line 8) | webpack(config, { isServer, dev }) {
FILE: ui/pages/_app.tsx
function App (line 12) | function App({ Component, pageProps }: AppProps<{}>) {
FILE: ui/pages/_document.tsx
type Props (line 5) | type Props = DocumentProps & {
function Document (line 9) | function Document(props: Props) {
FILE: ui/pages/api/home/home.context.tsx
type HomeContextProps (line 11) | interface HomeContextProps {
FILE: ui/pages/api/home/home.state.tsx
type HomeInitialState (line 8) | interface HomeInitialState {
FILE: ui/pages/api/home/home.tsx
type Props (line 44) | interface Props {
FILE: ui/services/useApiService.ts
type GetModelsRequestProps (line 5) | interface GetModelsRequestProps {
FILE: ui/types/chat.ts
type Message (line 3) | interface Message {
type Role (line 8) | type Role = 'assistant' | 'user';
type ChatBody (line 10) | interface ChatBody {
type Conversation (line 18) | interface Conversation {
FILE: ui/types/data.ts
type KeyValuePair (line 1) | interface KeyValuePair {
FILE: ui/types/env.ts
type ProcessEnv (line 1) | interface ProcessEnv {
FILE: ui/types/error.ts
type ErrorMessage (line 1) | interface ErrorMessage {
FILE: ui/types/export.ts
type SupportedExportFormats (line 6) | type SupportedExportFormats =
type LatestExportFormat (line 11) | type LatestExportFormat = ExportFormatV4;
type ConversationV1 (line 14) | interface ConversationV1 {
type ExportFormatV1 (line 20) | type ExportFormatV1 = ConversationV1[];
type ChatFolder (line 23) | interface ChatFolder {
type ExportFormatV2 (line 28) | interface ExportFormatV2 {
type ExportFormatV3 (line 34) | interface ExportFormatV3 {
type ExportFormatV4 (line 40) | interface ExportFormatV4 {
FILE: ui/types/folder.ts
type FolderInterface (line 1) | interface FolderInterface {
type FolderType (line 7) | type FolderType = 'chat' | 'prompt';
FILE: ui/types/google.ts
type GoogleBody (line 3) | interface GoogleBody extends ChatBody {
type GoogleResponse (line 8) | interface GoogleResponse {
type GoogleSource (line 12) | interface GoogleSource {
FILE: ui/types/openai.ts
type OpenAIModel (line 3) | interface OpenAIModel {
type OpenAIModelID (line 10) | enum OpenAIModelID {
FILE: ui/types/plugin.ts
type Plugin (line 3) | interface Plugin {
type PluginKey (line 9) | interface PluginKey {
type PluginID (line 14) | enum PluginID {
type PluginName (line 18) | enum PluginName {
FILE: ui/types/prompt.ts
type Prompt (line 3) | interface Prompt {
FILE: ui/types/settings.ts
type Settings (line 1) | interface Settings {
FILE: ui/types/storage.ts
type LocalStorage (line 7) | interface LocalStorage {
FILE: ui/utils/app/codeblock.ts
type languageMap (line 1) | interface languageMap {
FILE: ui/utils/app/const.ts
constant DEFAULT_SYSTEM_PROMPT (line 1) | const DEFAULT_SYSTEM_PROMPT =
constant OPENAI_API_HOST (line 5) | const OPENAI_API_HOST =
constant DEFAULT_TEMPERATURE (line 8) | const DEFAULT_TEMPERATURE =
constant OPENAI_API_TYPE (line 11) | const OPENAI_API_TYPE =
constant OPENAI_API_VERSION (line 14) | const OPENAI_API_VERSION =
constant OPENAI_ORGANIZATION (line 17) | const OPENAI_ORGANIZATION =
constant AZURE_DEPLOYMENT_ID (line 20) | const AZURE_DEPLOYMENT_ID =
FILE: ui/utils/app/importExport.ts
function isExportFormatV1 (line 15) | function isExportFormatV1(obj: any): obj is ExportFormatV1 {
function isExportFormatV2 (line 19) | function isExportFormatV2(obj: any): obj is ExportFormatV2 {
function isExportFormatV3 (line 23) | function isExportFormatV3(obj: any): obj is ExportFormatV3 {
function isExportFormatV4 (line 27) | function isExportFormatV4(obj: any): obj is ExportFormatV4 {
function cleanData (line 33) | function cleanData(data: SupportedExportFormats): LatestExportFormat {
function currentDate (line 67) | function currentDate() {
FILE: ui/utils/app/settings.ts
constant STORAGE_KEY (line 3) | const STORAGE_KEY = 'settings';
FILE: ui/utils/data/throttle.ts
function throttle (line 1) | function throttle<T extends (...args: any[]) => any>(
FILE: ui/utils/server/index.ts
class OpenAIError (line 12) | class OpenAIError extends Error {
method constructor (line 17) | constructor(message: string, type: string, param: string, code: string) {
method start (line 88) | async start(controller) {
Condensed preview — 261 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (344K chars).
[
{
"path": ".gitattributes",
"chars": 43,
"preview": "* text=auto\n*.sh eol=lf\n*.yml text"
},
{
"path": ".github/workflows/on-push.yml",
"chars": 862,
"preview": "name: Build Docker images on master push\n\non:\n push:\n tags:\n - \"*\"\n\njobs:\n build:\n runs-on: ubuntu-latest\n "
},
{
"path": ".gitignore",
"chars": 48,
"preview": "**/.DS_Store\nmodels/*.bin\nmodels/*.gguf\n**/.todo"
},
{
"path": "LICENSE.md",
"chars": 1102,
"preview": "MIT License\n\nCopyright (c) 2023 Umbrel, Inc.\nCopyright (c) 2023 Mckay Wrigley\n\nPermission is hereby granted, free of cha"
},
{
"path": "README.md",
"chars": 9977,
"preview": "<p align=\"center\">\n <a href=\"https://apps.umbrel.com/app/llama-gpt\">\n <img width=\"150\" height=\"150\" src=\"https://i.i"
},
{
"path": "api/run.sh",
"chars": 1670,
"preview": "#!/bin/bash\n\n # Check if the MODEL environment variable is set\n if [ -z \"$MODEL\" ]\n then\n echo \"Please set the MODEL"
},
{
"path": "cuda/ggml.Dockerfile",
"chars": 914,
"preview": "ARG CUDA_IMAGE=\"12.1.1-devel-ubuntu22.04\"\nFROM nvidia/cuda:${CUDA_IMAGE}\n\n# We need to set the host to 0.0.0.0 to allow "
},
{
"path": "cuda/gguf.Dockerfile",
"chars": 914,
"preview": "ARG CUDA_IMAGE=\"12.1.1-devel-ubuntu22.04\"\nFROM nvidia/cuda:${CUDA_IMAGE}\n\n# We need to set the host to 0.0.0.0 to allow "
},
{
"path": "cuda/run.sh",
"chars": 1667,
"preview": "#!/bin/bash\n\n # Check if the MODEL environment variable is set\n if [ -z \"$MODEL\" ]\n then\n echo \"Please set the MODEL"
},
{
"path": "deploy/kubernetes/kustomization.yaml",
"chars": 463,
"preview": "apiVersion: kustomize.config.k8s.io/v1beta1\nkind: Kustomization\n\nresources:\n- llama-gpt-api-deployment.yaml\n- llama-gpt-"
},
{
"path": "deploy/kubernetes/llama-gpt-api-deployment.yaml",
"chars": 635,
"preview": "apiVersion: apps/v1\nkind: Deployment\nmetadata:\n labels:\n service: llama-gpt-api\n name: llama-gpt-api\nspec:\n replic"
},
{
"path": "deploy/kubernetes/llama-gpt-api-service.yaml",
"chars": 235,
"preview": "apiVersion: v1\nkind: Service\nmetadata:\n labels:\n service: llama-gpt-api\n name: llama-gpt-api\nspec:\n ports:\n - n"
},
{
"path": "deploy/kubernetes/llama-gpt-ui-deployment.yaml",
"chars": 540,
"preview": "apiVersion: apps/v1\nkind: Deployment\nmetadata:\n labels:\n service: llama-gpt-ui\n name: llama-gpt-ui\nspec:\n replicas"
},
{
"path": "deploy/kubernetes/llama-gpt-ui-service.yaml",
"chars": 249,
"preview": "apiVersion: v1\nkind: Service\nmetadata:\n labels:\n service: llama-gpt-ui\n name: llama-gpt-ui\nspec:\n ports:\n - nam"
},
{
"path": "docker-compose-cuda-ggml.yml",
"chars": 1459,
"preview": "version: '3.6'\n\nservices:\n llama-gpt-api-cuda-ggml:\n build:\n context: ./cuda\n dockerfile: ggml.Dockerfile\n"
},
{
"path": "docker-compose-cuda-gguf.yml",
"chars": 1465,
"preview": "version: '3.6'\n\nservices:\n llama-gpt-api-cuda-gguf:\n build:\n context: ./cuda\n dockerfile: gguf.Dockerfile\n"
},
{
"path": "docker-compose-gguf.yml",
"chars": 1360,
"preview": "version: '3.6'\n\nservices:\n llama-gpt-api:\n # Pin to llama-cpp-python 0.1.80 with GGUF support\n image: ghcr.io/abe"
},
{
"path": "docker-compose-mac.yml",
"chars": 505,
"preview": "version: '3.6'\n\nservices:\n llama-gpt-ui-mac:\n build:\n context: ./ui\n dockerfile: no-wait.Dockerfile\n po"
},
{
"path": "docker-compose.yml",
"chars": 1391,
"preview": "version: '3.6'\n\nservices:\n llama-gpt-api:\n # Pin the image to llama-cpp-python 0.1.78 to avoid ggml => gguf breaking"
},
{
"path": "models/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "run-mac.sh",
"chars": 8417,
"preview": "#!/bin/bash\nset -e\n\n# Define a function to refresh the source of .zshrc or .bashrc\nsource_shell_rc() {\n # Source .zsh"
},
{
"path": "run.sh",
"chars": 4225,
"preview": "#!/bin/bash\n\n# Check if docker compose is installed\nif ! command -v docker &> /dev/null\nthen\n echo \"Docker could not "
},
{
"path": "ui/.dockerignore",
"chars": 42,
"preview": ".env\n.env.local\nnode_modules\ntest-results\n"
},
{
"path": "ui/.eslintrc.json",
"chars": 40,
"preview": "{\n \"extends\": \"next/core-web-vitals\"\n}\n"
},
{
"path": "ui/.gitignore",
"chars": 426,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "ui/CONTRIBUTING.md",
"chars": 1333,
"preview": "# Contributing Guidelines\n\n**Welcome to Chatbot UI!**\n\nWe appreciate your interest in contributing to our project.\n\nBefo"
},
{
"path": "ui/Dockerfile",
"chars": 820,
"preview": "# ---- Base Node ----\nFROM node:19-alpine AS base\nWORKDIR /app\nCOPY package*.json ./\n\n# ---- Dependencies ----\nFROM base"
},
{
"path": "ui/Makefile",
"chars": 420,
"preview": "include .env\n\n.PHONY: all\n\nbuild:\n\tdocker build -t chatbot-ui .\n\nrun:\n\texport $(cat .env | xargs)\n\tdocker stop chatbot-u"
},
{
"path": "ui/__tests__/utils/app/importExports.test.ts",
"chars": 6773,
"preview": "import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';\nimport {\n cleanData,\n isExportFormatV1"
},
{
"path": "ui/components/Buttons/SidebarActionButton/SidebarActionButton.tsx",
"chars": 406,
"preview": "import { MouseEventHandler, ReactElement } from 'react';\n\ninterface Props {\n handleClick: MouseEventHandler<HTMLButtonE"
},
{
"path": "ui/components/Buttons/SidebarActionButton/index.ts",
"chars": 49,
"preview": "export { default } from './SidebarActionButton';\n"
},
{
"path": "ui/components/Chat/Chat.tsx",
"chars": 16646,
"preview": "import { IconClearAll, IconSettings } from '@tabler/icons-react';\nimport {\n MutableRefObject,\n memo,\n useCallback,\n "
},
{
"path": "ui/components/Chat/ChatInput.tsx",
"chars": 13158,
"preview": "import {\n IconArrowDown,\n IconBolt,\n IconBrandGoogle,\n IconPlayerStop,\n IconRepeat,\n IconSend,\n} from '@tabler/ico"
},
{
"path": "ui/components/Chat/ChatLoader.tsx",
"chars": 669,
"preview": "import { IconRobot } from '@tabler/icons-react';\nimport { FC } from 'react';\n\ninterface Props { }\n\nexport const ChatLoad"
},
{
"path": "ui/components/Chat/ChatMessage.tsx",
"chars": 10944,
"preview": "import {\n IconCheck,\n IconCopy,\n IconEdit,\n IconRobot,\n IconTrash,\n IconUser,\n} from '@tabler/icons-react';\nimport"
},
{
"path": "ui/components/Chat/ErrorMessageDiv.tsx",
"chars": 789,
"preview": "import { IconCircleX } from '@tabler/icons-react';\nimport { FC } from 'react';\n\nimport { ErrorMessage } from '@/types/er"
},
{
"path": "ui/components/Chat/MemoizedChatMessage.tsx",
"chars": 261,
"preview": "import { FC, memo } from \"react\";\nimport { ChatMessage, Props } from \"./ChatMessage\";\n\nexport const MemoizedChatMessage:"
},
{
"path": "ui/components/Chat/ModelSelect.tsx",
"chars": 2090,
"preview": "import { IconExternalLink } from '@tabler/icons-react';\nimport { useContext } from 'react';\n\nimport { useTranslation } f"
},
{
"path": "ui/components/Chat/PluginSelect.tsx",
"chars": 2848,
"preview": "import { FC, useEffect, useRef } from 'react';\n\nimport { useTranslation } from 'next-i18next';\n\nimport { Plugin, PluginL"
},
{
"path": "ui/components/Chat/PromptList.tsx",
"chars": 1243,
"preview": "import { FC, MutableRefObject } from 'react';\n\nimport { Prompt } from '@/types/prompt';\n\ninterface Props {\n prompts: Pr"
},
{
"path": "ui/components/Chat/Regenerate.tsx",
"chars": 922,
"preview": "import { IconRefresh } from '@tabler/icons-react';\nimport { FC } from 'react';\n\nimport { useTranslation } from 'next-i18"
},
{
"path": "ui/components/Chat/SystemPrompt.tsx",
"chars": 6660,
"preview": "import {\n FC,\n KeyboardEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { useTranslati"
},
{
"path": "ui/components/Chat/Temperature.tsx",
"chars": 2112,
"preview": "import { FC, useContext, useState } from 'react';\n\nimport { useTranslation } from 'next-i18next';\n\nimport { DEFAULT_TEMP"
},
{
"path": "ui/components/Chat/VariableModal.tsx",
"chars": 3809,
"preview": "import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';\n\nimport { Prompt } from '@/types/prompt';\n\ninter"
},
{
"path": "ui/components/Chatbar/Chatbar.context.tsx",
"chars": 907,
"preview": "import { Dispatch, createContext } from 'react';\n\nimport { ActionType } from '@/hooks/useCreateReducer';\n\nimport { Conve"
},
{
"path": "ui/components/Chatbar/Chatbar.state.tsx",
"chars": 252,
"preview": "import { Conversation } from '@/types/chat';\n\nexport interface ChatbarInitialState {\n searchTerm: string;\n filteredCon"
},
{
"path": "ui/components/Chatbar/Chatbar.tsx",
"chars": 7510,
"preview": "import { useCallback, useContext, useEffect } from 'react';\n\nimport { useTranslation } from 'next-i18next';\n\nimport { us"
},
{
"path": "ui/components/Chatbar/components/ChatFolders.tsx",
"chars": 1703,
"preview": "import { useContext } from 'react';\n\nimport { FolderInterface } from '@/types/folder';\n\nimport HomeContext from '@/pages"
},
{
"path": "ui/components/Chatbar/components/ChatbarSettings.tsx",
"chars": 2087,
"preview": "import { IconFileExport, IconSettings } from '@tabler/icons-react';\nimport { useContext, useState } from 'react';\n\nimpor"
},
{
"path": "ui/components/Chatbar/components/ClearConversations.tsx",
"chars": 1575,
"preview": "import { IconCheck, IconTrash, IconX } from '@tabler/icons-react';\nimport { FC, useState } from 'react';\n\nimport { useTr"
},
{
"path": "ui/components/Chatbar/components/Conversation.tsx",
"chars": 5212,
"preview": "import {\n IconCheck,\n IconMessage,\n IconPencil,\n IconTrash,\n IconX,\n} from '@tabler/icons-react';\nimport {\n DragEv"
},
{
"path": "ui/components/Chatbar/components/Conversations.tsx",
"chars": 540,
"preview": "import { Conversation } from '@/types/chat';\n\nimport { ConversationComponent } from './Conversation';\n\ninterface Props {"
},
{
"path": "ui/components/Chatbar/components/PluginKeys.tsx",
"chars": 9154,
"preview": "import { IconKey } from '@tabler/icons-react';\nimport { KeyboardEvent, useContext, useEffect, useRef, useState } from 'r"
},
{
"path": "ui/components/Folder/Folder.tsx",
"chars": 5173,
"preview": "import {\n IconCaretDown,\n IconCaretRight,\n IconCheck,\n IconPencil,\n IconTrash,\n IconX,\n} from '@tabler/icons-react"
},
{
"path": "ui/components/Folder/index.ts",
"chars": 36,
"preview": "export { default } from './Folder';\n"
},
{
"path": "ui/components/Markdown/CodeBlock.tsx",
"chars": 3122,
"preview": "import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';\nimport { FC, memo, useState } from 'react'"
},
{
"path": "ui/components/Markdown/MemoizedReactMarkdown.tsx",
"chars": 258,
"preview": "import { FC, memo } from 'react';\nimport ReactMarkdown, { Options } from 'react-markdown';\n\nexport const MemoizedReactMa"
},
{
"path": "ui/components/Mobile/Navbar.tsx",
"chars": 703,
"preview": "import { IconPlus } from '@tabler/icons-react';\nimport { FC } from 'react';\n\nimport { Conversation } from '@/types/chat'"
},
{
"path": "ui/components/Promptbar/PromptBar.context.tsx",
"chars": 580,
"preview": "import { Dispatch, createContext } from 'react';\n\nimport { ActionType } from '@/hooks/useCreateReducer';\n\nimport { Promp"
},
{
"path": "ui/components/Promptbar/Promptbar.state.tsx",
"chars": 234,
"preview": "import { Prompt } from '@/types/prompt';\n\nexport interface PromptbarInitialState {\n searchTerm: string;\n filteredPromp"
},
{
"path": "ui/components/Promptbar/Promptbar.tsx",
"chars": 4176,
"preview": "import { useContext, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useCr"
},
{
"path": "ui/components/Promptbar/components/Prompt.tsx",
"chars": 3492,
"preview": "import {\n IconBulbFilled,\n IconCheck,\n IconTrash,\n IconX,\n} from '@tabler/icons-react';\nimport {\n DragEvent,\n Mous"
},
{
"path": "ui/components/Promptbar/components/PromptFolders.tsx",
"chars": 1679,
"preview": "import { useContext } from 'react';\n\nimport { FolderInterface } from '@/types/folder';\n\nimport HomeContext from '@/pages"
},
{
"path": "ui/components/Promptbar/components/PromptModal.tsx",
"chars": 4964,
"preview": "import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';\n\nimport { useTranslation } from 'next-i18next';\n"
},
{
"path": "ui/components/Promptbar/components/PromptbarSettings.tsx",
"chars": 126,
"preview": "import { FC } from 'react';\n\ninterface Props {}\n\nexport const PromptbarSettings: FC<Props> = () => {\n return <div></div"
},
{
"path": "ui/components/Promptbar/components/Prompts.tsx",
"chars": 445,
"preview": "import { FC } from 'react';\n\nimport { Prompt } from '@/types/prompt';\n\nimport { PromptComponent } from './Prompt';\n\ninte"
},
{
"path": "ui/components/Promptbar/index.ts",
"chars": 39,
"preview": "export { default } from './Promptbar';\n"
},
{
"path": "ui/components/Search/Search.tsx",
"chars": 1100,
"preview": "import { IconX } from '@tabler/icons-react';\nimport { FC } from 'react';\n\nimport { useTranslation } from 'next-i18next';"
},
{
"path": "ui/components/Search/index.ts",
"chars": 36,
"preview": "export { default } from './Search';\n"
},
{
"path": "ui/components/Settings/Import.tsx",
"chars": 1265,
"preview": "import { IconFileImport } from '@tabler/icons-react';\nimport { FC } from 'react';\n\nimport { useTranslation } from 'next-"
},
{
"path": "ui/components/Settings/Key.tsx",
"chars": 2321,
"preview": "import { IconCheck, IconKey, IconX } from '@tabler/icons-react';\nimport { FC, KeyboardEvent, useEffect, useRef, useState"
},
{
"path": "ui/components/Settings/SettingDialog.tsx",
"chars": 3562,
"preview": "import { FC, useContext, useEffect, useReducer, useRef } from 'react';\n\nimport { useTranslation } from 'next-i18next';\n\n"
},
{
"path": "ui/components/Sidebar/Sidebar.tsx",
"chars": 3444,
"preview": "import { IconFolderPlus, IconMistOff, IconPlus } from '@tabler/icons-react';\nimport { ReactNode } from 'react';\nimport {"
},
{
"path": "ui/components/Sidebar/SidebarButton.tsx",
"chars": 488,
"preview": "import { FC } from 'react';\n\ninterface Props {\n text: string;\n icon: JSX.Element;\n onClick: () => void;\n}\n\nexport con"
},
{
"path": "ui/components/Sidebar/components/OpenCloseButton.tsx",
"chars": 1323,
"preview": "import { IconArrowBarLeft, IconArrowBarRight } from '@tabler/icons-react';\n\ninterface Props {\n onClick: any;\n side: 'l"
},
{
"path": "ui/components/Sidebar/index.ts",
"chars": 37,
"preview": "export { default } from './Sidebar';\n"
},
{
"path": "ui/components/Spinner/Spinner.tsx",
"chars": 951,
"preview": "import { FC } from 'react';\n\ninterface Props {\n size?: string;\n className?: string;\n}\n\nconst Spinner = ({ size = '1em'"
},
{
"path": "ui/components/Spinner/index.ts",
"chars": 37,
"preview": "export { default } from './Spinner';\n"
},
{
"path": "ui/docker-compose.yml",
"chars": 122,
"preview": "version: '3.6'\n\nservices:\n chatgpt:\n build: .\n ports:\n - 3000:3000\n environment:\n - 'OPENAI_API_KEY="
},
{
"path": "ui/docs/google_search.md",
"chars": 724,
"preview": "# Google Search Tool\n\nUse the Google Search API to search the web in Chatbot UI.\n\n## How To Enable\n\n1. Create a new proj"
},
{
"path": "ui/hooks/useCreateReducer.ts",
"chars": 995,
"preview": "import { useMemo, useReducer } from 'react';\n\n// Extracts property names from initial state of reducer to allow typesafe"
},
{
"path": "ui/hooks/useFetch.ts",
"chars": 2563,
"preview": "export type RequestModel = {\n params?: object;\n headers?: object;\n signal?: AbortSignal;\n};\n\nexport type RequestWithB"
},
{
"path": "ui/k8s/chatbot-ui.yaml",
"chars": 1075,
"preview": "apiVersion: v1\nkind: Namespace\nmetadata:\n name: chatbot-ui\n---\napiVersion: v1\nkind: Secret\nmetadata:\n namespace: chatb"
},
{
"path": "ui/next-i18next.config.js",
"chars": 481,
"preview": "module.exports = {\n i18n: {\n defaultLocale: 'en',\n locales: [\n \"bn\",\n \"de\",\n \"en\",\n \"es\",\n "
},
{
"path": "ui/next.config.js",
"chars": 329,
"preview": "const { i18n } = require('./next-i18next.config');\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n i18n"
},
{
"path": "ui/no-wait.Dockerfile",
"chars": 706,
"preview": "# ---- Base Node ----\nFROM node:19-alpine AS base\nWORKDIR /app\nCOPY package*.json ./\n\n# ---- Dependencies ----\nFROM base"
},
{
"path": "ui/package.json",
"chars": 1614,
"preview": "{\n \"name\": \"ai-chatbot-starter\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"bu"
},
{
"path": "ui/pages/_app.tsx",
"chars": 660,
"preview": "import { Toaster } from 'react-hot-toast';\nimport { QueryClient, QueryClientProvider } from 'react-query';\n\nimport { app"
},
{
"path": "ui/pages/_document.tsx",
"chars": 659,
"preview": "import { DocumentProps, Head, Html, Main, NextScript } from 'next/document';\n\n// import i18nextConfig from '../next-i18n"
},
{
"path": "ui/pages/api/chat.ts",
"chars": 2051,
"preview": "import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';\nimport { OpenAIError, OpenAIStream } fro"
},
{
"path": "ui/pages/api/google.ts",
"chars": 4709,
"preview": "import { NextApiRequest, NextApiResponse } from 'next';\n\nimport { OPENAI_API_HOST } from '@/utils/app/const';\nimport { c"
},
{
"path": "ui/pages/api/home/home.context.tsx",
"chars": 884,
"preview": "import { Dispatch, createContext } from 'react';\n\nimport { ActionType } from '@/hooks/useCreateReducer';\n\nimport { Conve"
},
{
"path": "ui/pages/api/home/home.state.tsx",
"chars": 1503,
"preview": "import { Conversation, Message } from '@/types/chat';\nimport { ErrorMessage } from '@/types/error';\nimport { FolderInter"
},
{
"path": "ui/pages/api/home/home.tsx",
"chars": 12030,
"preview": "import { useEffect, useRef, useState } from 'react';\nimport { useQuery } from 'react-query';\n\nimport { GetServerSideProp"
},
{
"path": "ui/pages/api/home/index.ts",
"chars": 54,
"preview": "export { default, getServerSideProps } from './home';\n"
},
{
"path": "ui/pages/api/models.ts",
"chars": 2157,
"preview": "import { OPENAI_API_HOST, OPENAI_API_TYPE, OPENAI_API_VERSION, OPENAI_ORGANIZATION } from '@/utils/app/const';\n\nimport {"
},
{
"path": "ui/pages/index.tsx",
"chars": 58,
"preview": "export { default, getServerSideProps } from './api/home';\n"
},
{
"path": "ui/postcss.config.js",
"chars": 83,
"preview": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n"
},
{
"path": "ui/prettier.config.js",
"chars": 702,
"preview": "module.exports = {\n trailingComma: 'all',\n singleQuote: true,\n plugins: [\n 'prettier-plugin-tailwindcss',\n '@tr"
},
{
"path": "ui/public/locales/ar/chat.json",
"chars": 2178,
"preview": "{\n \"OpenAI API Key Required\": \" (أوبن أيه أي) OpenAI API Key (مطلوب (مفتاح واجهة برمجة تطبيقات \",\n \"Please set your O"
},
{
"path": "ui/public/locales/ar/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/ar/markdown.json",
"chars": 96,
"preview": "{\n \"Copy code\": \"نسخ الكود\",\n \"Copied!\": \"تم النسخ!\",\n \"Enter file name\": \"أدخل اسم الملف\"\n}\n"
},
{
"path": "ui/public/locales/ar/promptbar.json",
"chars": 452,
"preview": "{\n \"New prompt\": \"مطلب جديد\",\n \"New folder\": \"مجلد جديد\",\n \"No prompts.\": \"لا يوجد مطالبات.\",\n \"Search prompts...\": "
},
{
"path": "ui/public/locales/ar/settings.json",
"chars": 66,
"preview": "{\n \"Dark mode\": \"الوضع الداكن\",\n \"Light mode\": \"الوضع الفاتح\"\n}\n"
},
{
"path": "ui/public/locales/ar/sidebar.json",
"chars": 454,
"preview": "{\n \"New folder\": \"مجلد جديد\",\n \"New chat\": \"محادثة جديدة\",\n \"No conversations.\": \"لا يوجد محادثات\",\n \"Search convers"
},
{
"path": "ui/public/locales/bn/chat.json",
"chars": 2417,
"preview": "{\n \"OpenAI API Key Required\": \"OpenAI API key বাধ্যতামূলক\",\n \"Please set your OpenAI API key in the bottom left of the"
},
{
"path": "ui/public/locales/bn/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/bn/markdown.json",
"chars": 104,
"preview": "{\n \"Copy code\": \"কোড কপি করুন\",\n \"Copied!\": \"কপি করা হয়েছে!\",\n \"Enter file name\": \"ফাইল নাম লিখুন\"\n}\n"
},
{
"path": "ui/public/locales/bn/promptbar.json",
"chars": 508,
"preview": "{\n \"New prompt\": \"নতুন prompt\",\n \"New folder\": \"নতুন ফোল্ডার\",\n \"No prompts.\": \"কোনো prompts নেই।\",\n \"Search prompts"
},
{
"path": "ui/public/locales/bn/settings.json",
"chars": 59,
"preview": "{\n \"Dark mode\": \"ডার্ক মোড\",\n \"Light mode\": \"লাইট মোড\"\n}\n"
},
{
"path": "ui/public/locales/bn/sidebar.json",
"chars": 370,
"preview": "{\n \"New folder\": \"নতুন ফোল্ডার\",\n \"New chat\": \"নতুন আড্ডা\",\n \"No conversations.\": \"কোনো আলাপচারিতা নেই।\",\n \"Search c"
},
{
"path": "ui/public/locales/ca/chat.json",
"chars": 2471,
"preview": "{\n \"OpenAI API Key Required\": \"Cal la clau d'API d'OpenAI\",\n \"Please set your OpenAI API key in the bottom left of the"
},
{
"path": "ui/public/locales/ca/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/ca/markdown.json",
"chars": 110,
"preview": "{\n \"Copy code\": \"Copiar codi\",\n \"Copied!\": \"Copiat!\",\n \"Enter file name\": \"Introdueix el nom de l'arxiu\"\n}\n"
},
{
"path": "ui/public/locales/ca/promptbar.json",
"chars": 509,
"preview": "{\n \"New prompt\": \"Nou prompt\",\n \"New folder\": \"Nova carpeta\",\n \"No prompts.\": \"No hi ha prompts.\",\n \"Search prompts."
},
{
"path": "ui/public/locales/ca/sidebar.json",
"chars": 423,
"preview": "{\n \"New folder\": \"Nova carpeta\",\n \"New chat\": \"Nova conversa\",\n \"No conversations.\": \"No hi ha converses.\",\n \"Search"
},
{
"path": "ui/public/locales/de/chat.json",
"chars": 2543,
"preview": "{\n \"OpenAI API Key Required\": \"OpenAI API-Schlüssel erforderlich\",\n \"Please set your OpenAI API key in the bottom left"
},
{
"path": "ui/public/locales/de/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/de/markdown.json",
"chars": 104,
"preview": "{\n \"Copy code\": \"Code kopieren\",\n \"Copied!\": \"Kopiert!\",\n \"Enter file name\": \"Dateinamen eingeben\"\n}\n"
},
{
"path": "ui/public/locales/de/promptbar.json",
"chars": 483,
"preview": "{\n \"New prompt\": \"New prompt\",\n \"New folder\": \"New folder\",\n \"No prompts.\": \"No prompts.\",\n \"Search prompts...\": \"Se"
},
{
"path": "ui/public/locales/de/settings.json",
"chars": 61,
"preview": "{\n \"Dark mode\": \"Dark Mode\",\n \"Light mode\": \"Light Mode\"\n}\n"
},
{
"path": "ui/public/locales/de/sidebar.json",
"chars": 402,
"preview": "{\n \"New folder\": \"Neuer Ordner\",\n \"New chat\": \"Neue Konversation\",\n \"No conversations.\": \"Keine Konversationen.\",\n \""
},
{
"path": "ui/public/locales/en/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/es/chat.json",
"chars": 2490,
"preview": "{\n \"OpenAI API Key Required\": \"Se requiere la clave de API de OpenAI\",\n \"Please set your OpenAI API key in the bottom "
},
{
"path": "ui/public/locales/es/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/es/markdown.json",
"chars": 115,
"preview": "{\n \"Copy code\": \"Copiar código\",\n \"Copied!\": \"¡Copiado!\",\n \"Enter file name\": \"Ingrese el nombre del archivo\"\n}\n"
},
{
"path": "ui/public/locales/es/promptbar.json",
"chars": 511,
"preview": "{\n \"New prompt\": \"Nuevo prompt\",\n \"New folder\": \"Nueva carpeta\",\n \"No prompts.\": \"No hay prompts.\",\n \"Search prompts"
},
{
"path": "ui/public/locales/es/settings.json",
"chars": 63,
"preview": "{\n \"Dark mode\": \"Modo oscuro\",\n \"Light mode\": \"Modo claro\"\n}\n"
},
{
"path": "ui/public/locales/es/sidebar.json",
"chars": 399,
"preview": "{\n \"New folder\": \"Nueva carpeta\",\n \"New chat\": \"Nueva conversación\",\n \"No conversations.\": \"No hay conversaciones.\",\n"
},
{
"path": "ui/public/locales/fi/chat.json",
"chars": 2635,
"preview": "{\n \"OpenAI API Key Required\": \"OpenAI API-avain tarvitaan\",\n \"Please set your OpenAI API key in the bottom left of the"
},
{
"path": "ui/public/locales/fi/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/fi/markdown.json",
"chars": 103,
"preview": "{\n \"Copy code\": \"Kopioi koodi\",\n \"Copied!\": \"Kopioitu!\",\n \"Enter file name\": \"Syötä tiedostonimi\"\n}\n"
},
{
"path": "ui/public/locales/fi/promptbar.json",
"chars": 492,
"preview": "{\n \"New prompt\": \"Uusi prompt\",\n \"New folder\": \"Uusi kansio\",\n \"No prompts.\": \"Ei prompteja.\",\n \"Search prompts...\":"
},
{
"path": "ui/public/locales/fi/settings.json",
"chars": 134,
"preview": "{\n \"Settings\": \"Asetukset\",\n \"Theme\": \"Teema\",\n \"Dark mode\": \"Tumma teema\",\n \"Light mode\": \"Vaalea teema\",\n \"Save\":"
},
{
"path": "ui/public/locales/fi/sidebar.json",
"chars": 425,
"preview": "{\n \"New folder\": \"Uusi kansio\",\n \"New chat\": \"Uusi keskustelu\",\n \"No conversations.\": \"Ei keskusteluja.\",\n \"Search c"
},
{
"path": "ui/public/locales/fr/chat.json",
"chars": 2192,
"preview": "{\n \"OpenAI API Key Required\": \"Clé API OpenAI requise\",\n \"Please set your OpenAI API key in the bottom left of the sid"
},
{
"path": "ui/public/locales/fr/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/fr/markdown.json",
"chars": 109,
"preview": "{\n \"Copy code\": \"Copier le code\",\n \"Copied!\": \"Copié !\",\n \"Enter file name\": \"Entrez le nom du fichier\"\n}\n"
},
{
"path": "ui/public/locales/fr/promptbar.json",
"chars": 483,
"preview": "{\n \"New prompt\": \"New prompt\",\n \"New folder\": \"New folder\",\n \"No prompts.\": \"No prompts.\",\n \"Search prompts...\": \"Se"
},
{
"path": "ui/public/locales/fr/settings.json",
"chars": 63,
"preview": "{\n \"Dark mode\": \"Mode sombre\",\n \"Light mode\": \"Mode clair\"\n}\n"
},
{
"path": "ui/public/locales/fr/sidebar.json",
"chars": 410,
"preview": "{\n \"New folder\": \"Nouveau dossier\",\n \"New chat\": \"Nouvelle discussion\",\n \"No conversations.\": \"Aucune conversation.\","
},
{
"path": "ui/public/locales/he/chat.json",
"chars": 1999,
"preview": "{\n \"OpenAI API Key Required\": \"מפתח openAI API\",\n \"Please set your OpenAI API key in the bottom left of the sidebar.\":"
},
{
"path": "ui/public/locales/he/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/he/markdown.json",
"chars": 96,
"preview": "{\n \"Copy code\": \"העתק קוד\",\n \"Copied!\": \"נשמר בזכרון\",\n \"Enter file name\": \"הקלד שם לקובץ\"\n}\n"
},
{
"path": "ui/public/locales/he/promptbar.json",
"chars": 479,
"preview": "{\n \"New prompt\": \"פקודת מכונה חדשה\",\n \"New folder\": \"תיקיה חדשה\",\n \"No prompts.\": \"לא נמצאו פקודות מכונות\",\n \"Search"
},
{
"path": "ui/public/locales/he/settings.json",
"chars": 57,
"preview": "{\n \"Dark mode\": \"מצב כהה\",\n \"Light mode\": \"מצב בהיר\"\n}\n"
},
{
"path": "ui/public/locales/he/sidebar.json",
"chars": 327,
"preview": "{\n \"New folder\": \"תיקיה חדשה\",\n \"New chat\": \"שיחה חדשה\",\n \"No conversations.\": \"אין שיחות חדשות\",\n \"Search conversat"
},
{
"path": "ui/public/locales/id/chat.json",
"chars": 2113,
"preview": "{\n \"OpenAI API Key Required\": \"Memerlukan Kunci API OpenAI\",\n \"Please set your OpenAI API key in the bottom left of th"
},
{
"path": "ui/public/locales/id/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/id/markdown.json",
"chars": 105,
"preview": "{\n \"Copy code\": \"Salin kode\",\n \"Copied!\": \"Kode disalin!\",\n \"Enter file name\": \"Masukkan nama file\"\n}\n"
},
{
"path": "ui/public/locales/id/promptbar.json",
"chars": 483,
"preview": "{\n \"New prompt\": \"New prompt\",\n \"New folder\": \"New folder\",\n \"No prompts.\": \"No prompts.\",\n \"Search prompts...\": \"Se"
},
{
"path": "ui/public/locales/id/settings.json",
"chars": 63,
"preview": "{\n \"Dark mode\": \"Mode gelap\",\n \"Light mode\": \"Mode terang\"\n}\n"
},
{
"path": "ui/public/locales/id/sidebar.json",
"chars": 367,
"preview": "{\n \"New folder\": \"Folder baru\",\n \"New chat\": \"Percakapan baru\",\n \"No conversations.\": \"Tidak ada percakapan.\",\n \"Sea"
},
{
"path": "ui/public/locales/it/chat.json",
"chars": 2477,
"preview": "{\n \"OpenAI API Key Required\": \"E' richiesta la chiave API OpenAI\",\n \"Please set your OpenAI API key in the bottom left"
},
{
"path": "ui/public/locales/it/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/it/markdown.json",
"chars": 110,
"preview": "{\n \"Copy code\": \"Copia codice\",\n \"Copied!\": \"Copiato!\",\n \"Enter file name\": \"Inserisci il nome del file\"\n}\n"
},
{
"path": "ui/public/locales/it/promptbar.json",
"chars": 521,
"preview": "{\n \"New prompt\": \"Nuovo prompt\",\n \"New folder\": \"Nuova cartella\",\n \"No prompts.\": \"Nessun prompt.\",\n \"Search prompts"
},
{
"path": "ui/public/locales/it/settings.json",
"chars": 71,
"preview": "{\n \"Dark mode\": \"Modalità scura\",\n \"Light mode\": \"Modalità chiara\"\n}\n"
},
{
"path": "ui/public/locales/it/sidebar.json",
"chars": 369,
"preview": "{\n \"New folder\": \"Nuova cartella\",\n \"New chat\": \"Nuova conversazione\",\n \"No conversations.\": \"Nessuna conversazione.\""
},
{
"path": "ui/public/locales/ja/chat.json",
"chars": 1867,
"preview": "{\n \"OpenAI API Key Required\": \"OpenAIのAPIキーが必要です\",\n \"Please set your OpenAI API key in the bottom left of the sidebar."
},
{
"path": "ui/public/locales/ja/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/ja/markdown.json",
"chars": 87,
"preview": "{\n \"Copy code\": \"コードをコピー\",\n \"Copied!\": \"コピーしました！\",\n \"Enter file name\": \"ファイル名を入力\"\n}\n"
},
{
"path": "ui/public/locales/ja/promptbar.json",
"chars": 420,
"preview": "{\n \"New prompt\": \"新しいプロンプト\",\n \"New folder\": \"新しいフォルダ\",\n \"No prompts.\": \"プロンプトはありません\",\n \"Search prompts...\": \"プロンプトの検"
},
{
"path": "ui/public/locales/ja/settings.json",
"chars": 108,
"preview": "{\n \"Settings\": \"設定\",\n \"Theme\": \"テーマ\",\n \"Save\": \"保存\",\n \"Dark mode\": \"ダークモード\",\n \"Light mode\": \"ライトモード\"\n}\n"
},
{
"path": "ui/public/locales/ja/sidebar.json",
"chars": 369,
"preview": "{\n \"New folder\": \"新規フォルダ\",\n \"New chat\": \"新規チャット\",\n \"No conversations.\": \"会話履歴はありません。\",\n \"Search conversations...\": \""
},
{
"path": "ui/public/locales/ko/chat.json",
"chars": 1871,
"preview": "{\n \"OpenAI API Key Required\": \"OpenAI API 키가 필요합니다\",\n \"Please set your OpenAI API key in the bottom left of the sideba"
},
{
"path": "ui/public/locales/ko/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/ko/markdown.json",
"chars": 87,
"preview": "{\n \"Copy code\": \"코드 복사\",\n \"Copied!\": \"복사 완료!\",\n \"Enter file name\": \"파일 이름을 입력하세요\"\n}\n"
},
{
"path": "ui/public/locales/ko/promptbar.json",
"chars": 483,
"preview": "{\n \"New prompt\": \"New prompt\",\n \"New folder\": \"New folder\",\n \"No prompts.\": \"No prompts.\",\n \"Search prompts...\": \"Se"
},
{
"path": "ui/public/locales/ko/settings.json",
"chars": 53,
"preview": "{\n \"Dark mode\": \"다크 모드\",\n \"Light mode\": \"라이트 모드\"\n}\n"
},
{
"path": "ui/public/locales/ko/sidebar.json",
"chars": 282,
"preview": "{\n \"New folder\": \"새 폴더\",\n \"New chat\": \"새 채팅\",\n \"No conversations.\": \"대화가 없습니다.\",\n \"Search conversations...\": \"대화 검색."
},
{
"path": "ui/public/locales/pl/chat.json",
"chars": 2140,
"preview": "{\n \"OpenAI API Key Required\": \"Klucz do OpenAI API jest wymagany\",\n \"Please set your OpenAI API key in the bottom left"
},
{
"path": "ui/public/locales/pl/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/pl/markdown.json",
"chars": 105,
"preview": "{\n \"Copy code\": \"Skopiuj kod\",\n \"Copied!\": \"Skopiowany\",\n \"Enter file name\": \"Wprowadź nazwę pliku\"\n}\n"
},
{
"path": "ui/public/locales/pl/promptbar.json",
"chars": 491,
"preview": "{\n \"New prompt\": \"Nowy prompt\",\n \"New folder\": \"Nowy folder\",\n \"No prompts.\": \"Brak promptów.\",\n \"Search prompts...\""
},
{
"path": "ui/public/locales/pl/settings.json",
"chars": 63,
"preview": "{\n \"Dark mode\": \"Tryb ciemny\",\n \"Light mode\": \"Tryb jasny\"\n}\n"
},
{
"path": "ui/public/locales/pl/sidebar.json",
"chars": 343,
"preview": "{\n \"New folder\": \"Nowy folder\",\n \"New chat\": \"Nowy chat\",\n \"No conversations.\": \"Brak rozmów.\",\n \"Search conversatio"
},
{
"path": "ui/public/locales/pt/chat.json",
"chars": 2449,
"preview": "{\n \"OpenAI API Key Required\": \"A API Key da OpenAI é necessária\",\n \"Please set your OpenAI API key in the bottom left "
},
{
"path": "ui/public/locales/pt/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/pt/markdown.json",
"chars": 109,
"preview": "{\n \"Copy code\": \"Copiar código\",\n \"Copied!\": \"Copiado!\",\n \"Enter file name\": \"Insira o nome do arquivo\"\n}\n"
},
{
"path": "ui/public/locales/pt/promptbar.json",
"chars": 483,
"preview": "{\n \"New prompt\": \"New prompt\",\n \"New folder\": \"New folder\",\n \"No prompts.\": \"No prompts.\",\n \"Search prompts...\": \"Se"
},
{
"path": "ui/public/locales/pt/settings.json",
"chars": 63,
"preview": "{\n \"Dark mode\": \"Modo escuro\",\n \"Light mode\": \"Modo claro\"\n}\n"
},
{
"path": "ui/public/locales/pt/sidebar.json",
"chars": 355,
"preview": "{\n \"New folder\": \"Nova pasta\",\n \"New chat\": \"Novo chat\",\n \"No conversations.\": \"Não há conversas.\",\n \"Search convers"
},
{
"path": "ui/public/locales/ro/chat.json",
"chars": 2424,
"preview": "{\n \"OpenAI API Key Required\": \"Este necesară cheia API OpenAI\",\n \"Please set your OpenAI API key in the bottom left of"
},
{
"path": "ui/public/locales/ro/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/ro/markdown.json",
"chars": 113,
"preview": "{\n \"Copy code\": \"Copiați codul\",\n \"Copied!\": \"Copiat!\",\n \"Enter file name\": \"Introduceți numele fișierului\"\n}\n"
},
{
"path": "ui/public/locales/ro/promptbar.json",
"chars": 529,
"preview": "{\n \"New prompt\": \"Noua solicitare\",\n \"New folder\": \"Dosar nou\",\n \"No prompts.\": \"Fără solicitări.\",\n \"Search prompts"
},
{
"path": "ui/public/locales/ro/settings.json",
"chars": 72,
"preview": "{\n \"Dark mode\": \"Modul întunecat\",\n \"Light mode\": \"Modul de golire\"\n}\n"
},
{
"path": "ui/public/locales/ro/sidebar.json",
"chars": 376,
"preview": "{\n \"New folder\": \"Folder nou\",\n \"New chat\": \"Conversație nouă\",\n \"No conversations.\": \"Nicio conversație.\",\n \"Search"
},
{
"path": "ui/public/locales/ru/chat.json",
"chars": 2320,
"preview": "{\n \"OpenAI API Key Required\": \"Необходим ключ OpenAI\",\n \"Please set your OpenAI API key in the bottom left of the side"
},
{
"path": "ui/public/locales/ru/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/ru/markdown.json",
"chars": 117,
"preview": "{\n \"Copy code\": \"Скопировать\",\n \"Copied!\": \"Скопировано!\",\n \"Enter file name\": \"Введите имя файла для загрузки\"\n}\n"
},
{
"path": "ui/public/locales/ru/promptbar.json",
"chars": 483,
"preview": "{\n \"New prompt\": \"New prompt\",\n \"New folder\": \"New folder\",\n \"No prompts.\": \"No prompts.\",\n \"Search prompts...\": \"Se"
},
{
"path": "ui/public/locales/ru/settings.json",
"chars": 67,
"preview": "{\n \"Dark mode\": \"Темный режим\",\n \"Light mode\": \"Светлый режим\"\n}\n"
},
{
"path": "ui/public/locales/ru/sidebar.json",
"chars": 338,
"preview": "{\n \"New folder\": \"Новая папка\",\n \"New chat\": \"Новый чат\",\n \"No conversations.\": \"Нет чатов.\",\n \"Search conversations"
},
{
"path": "ui/public/locales/si/chat.json",
"chars": 2289,
"preview": "{\n \"OpenAI API Key Required\": \"OpenAI API යතුර අවශ්යයි\",\n \"Please set your OpenAI API key in the bottom left of the s"
},
{
"path": "ui/public/locales/si/common.json",
"chars": 3,
"preview": "{}\n"
},
{
"path": "ui/public/locales/si/markdown.json",
"chars": 114,
"preview": "{\n \"Copy code\": \"කේතය පිටපත් කරන්න\",\n \"Copied!\": \"පිටපත් කළා!\",\n \"Enter file name\": \"ගොනු නාමය ඇතුළත් කරන්න\"\n}\n"
},
{
"path": "ui/public/locales/si/promptbar.json",
"chars": 483,
"preview": "{\n \"New prompt\": \"New prompt\",\n \"New folder\": \"New folder\",\n \"No prompts.\": \"No prompts.\",\n \"Search prompts...\": \"Se"
},
{
"path": "ui/public/locales/si/settings.json",
"chars": 67,
"preview": "{\n \"Dark mode\": \"අඳුරු මාදිලිය\",\n \"Light mode\": \"ආලෝක මාදිලිය\"\n}\n"
}
]
// ... and 61 more files (download for full content)
About this extraction
This page contains the full source code of the getumbrel/llama-gpt GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 261 files (305.4 KB), approximately 88.4k tokens, and a symbol index with 100 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.