Upload folder using huggingface_hub

.dockerignore

@@ -0,0 +1,5 @@
+.env
+.env.local
+node_modules
+test-results
+.vscode

.env.local.example

@@ -0,0 +1,3 @@
+# Chatbot Ollama
+DEFAULT_MODEL="mistral:latest"
+NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT=""

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/deploy-docker-image.yaml

@@ -0,0 +1,69 @@
+name: Docker
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+on:
+  push:
+    branches: ['main']
+
+env:
+  # Use docker.io for Docker Hub if empty
+  REGISTRY: ghcr.io
+  # github.repository as <account>/<repo>
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      # This is used to complete the identity challenge
+      # with sigstore/fulcio when running outside of PRs.
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/[email protected]
+        
+      # Workaround: https://github.com/docker/build-push-action/issues/461
+      - name: Setup Docker buildx
+        uses: docker/setup-buildx-action@79abd3f86f79a9d68a23c75a09a9a85889262adf
+
+      # Login against a Docker registry except on PR
+      # https://github.com/docker/login-action
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@28218f9b04b4f3f62068d7b6ce6ca5b26e35336c
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      # Build and push Docker image with Buildx (don't push on PR)
+      # https://github.com/docker/build-push-action
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@ac9327eae2b366085ac7f6a2d02df8aa8ead720a
+        with:
+          context: .
+          platforms: "linux/amd64,linux/arm64"
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/run-test-suite.yml

@@ -0,0 +1,24 @@
+name: Run Unit Tests
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    container:
+      image: node:16
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Vitest Suite
+        run: npm test

.gitignore

@@ -0,0 +1,41 @@
+# 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
+.vscode
+
+# 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

CONTRIBUTING.md

@@ -0,0 +1,44 @@
+# Contributing Guidelines
+
+**Welcome to Chatbot Ollama!**
+
+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.
+
+```bash
+git clone https://github.com/ivanfioravanti/chatbot-ollama.git
+cd chatbot-ollama
+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 [X](https://x.com/ivanfioravanti).

Dockerfile

@@ -0,0 +1,33 @@
+# ---- Base Node ----
+FROM node:20-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:20-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
+
+# Set the environment variable
+ENV DEFAULT_MODEL="mistral:latest"
+ENV OLLAMA_HOST="http://host.docker.internal:11434"
+
+# Expose the port the app will run on
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "start"]

LICENSE

@@ -0,0 +1,43 @@
+MIT License
+
+Copyright (c) 2024 Ivan Fioravanti
+
+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.
+
+MIT License
+
+Copyright (c) 2024 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.

Makefile

@@ -0,0 +1,18 @@
+include .env
+
+.PHONY: all
+
+build:
+	docker build -t chatbot-ollama .
+
+run:
+	export $(cat .env | xargs)
+	docker stop chatbot-ollama || true && docker rm chatbot-ollama || true
+	docker run --name chatbot-ollama --rm -p 3000:3000 chatbot-ollama
+
+logs:
+	docker logs -f chatbot-ollama
+
+push:
+	docker tag chatbot-ollama:latest ${DOCKER_USER}/chatbot-ollama:${DOCKER_TAG}
+	docker push ${DOCKER_USER}/chatbot-ollama:${DOCKER_TAG}

README.md

@@ -1,12 +1,88 @@
----
-title: Ollama
-emoji: 📚
-colorFrom: blue
-colorTo: green
-sdk: gradio
-sdk_version: 4.44.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Chatbot Ollama
+
+## About
+
+Chatbot Ollama is an open source chat UI for Ollama.
+
+This project is based on [chatbot-ui](https://github.com/mckaywrigley/chatbot-ui) by [Mckay Wrigley](https://github.com/mckaywrigley).
+
+![Chatbot Ollama](./public/screenshots/screenshot-2023-10-02.png)
+
+## Updates
+
+Chatbot Ollama will be updated over time.
+
+### Next up
+
+- [ ] pull a model
+- [ ] delete a model
+- [ ] show model information
+
+## Docker
+
+Build locally:
+
+```shell
+docker build -t chatbot-ollama .
+docker run -p 3000:3000 chatbot-ollama
+```
+
+Pull from ghcr:
+
+```bash
+docker run -p 3000:3000 ghcr.io/ivanfioravanti/chatbot-ollama:main
+```
+
+## Running Locally
+
+### 1. Clone Repo
+
+```bash
+git clone https://github.com/ivanfioravanti/chatbot-ollama.git
+```
+
+### 2. Move to folder
+
+```bash
+cd chatbot-ollama
+```
+
+### 3. Install Dependencies
+
+```bash
+npm ci
+```
+
+### 4. Run Ollama server
+
+Either via the cli:
+
+```bash
+ollama serve
+```
+
+or via the [desktop client](https://ollama.ai/download)
+
+### 5. Run App
+
+```bash
+npm run dev
+```
+
+### 6. Use It
+
+You should be able to start chatting.
+
+## Configuration
+
+When deploying the application, the following environment variables can be set:
+
+| Environment Variable              | Default value                  | Description                                                                                                                               |
+| --------------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| DEFAULT_MODEL                     | `mistral:latest`                | The default model to use on new conversations                                                                                             |
+| NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT | [see here](utils/app/const.ts) | The default system prompt to use on new conversations                                                                                     |
+| NEXT_PUBLIC_DEFAULT_TEMPERATURE   | 1                              | The default temperature to use on new conversations                                                                                       |
+
+## Contact
+
+If you have any questions, feel free to reach out to me on [X](https://x.com/ivanfioravanti).

SECURITY.md

@@ -0,0 +1,51 @@
+# Security Policy
+
+This security policy outlines the process for reporting vulnerabilities and secrets found within this GitHub repository. It is essential that all contributors and users adhere to this policy in order to maintain a secure and stable environment.
+
+## Reporting a Vulnerability
+
+If you discover a vulnerability within the code, dependencies, or any other component of this repository, please follow these steps:
+
+1. **Do not disclose the vulnerability publicly.** Publicly disclosing a vulnerability may put the project at risk and could potentially harm other users.
+
+2. **Contact the repository maintainer(s) privately.** Send a private message or email to the maintainer(s) with a detailed description of the vulnerability. Include the following information:
+
+   - The affected component(s)
+   - Steps to reproduce the issue
+   - Potential impact of the vulnerability
+   - Any possible mitigations or workarounds
+
+3. **Wait for a response from the maintainer(s).** Please be patient, as they may need time to investigate and verify the issue. The maintainer(s) should acknowledge receipt of your report and provide an estimated time frame for addressing the vulnerability.
+
+4. **Cooperate with the maintainer(s).** If requested, provide additional information or assistance to help resolve the issue.
+
+5. **Do not disclose the vulnerability until the maintainer(s) have addressed it.** Once the issue has been resolved, the maintainer(s) may choose to publicly disclose the vulnerability and credit you for the discovery.
+
+## Reporting Secrets
+
+If you discover any secrets, such as API keys or passwords, within the repository, follow these steps:
+
+1. **Do not share the secret or use it for unauthorized purposes.** Misusing a secret could have severe consequences for the project and its users.
+
+2. **Contact the repository maintainer(s) privately.** Notify them of the discovered secret, its location, and any potential risks associated with it.
+
+3. **Wait for a response and further instructions.**
+
+## Responsible Disclosure
+
+We encourage responsible disclosure of vulnerabilities and secrets. If you follow the steps outlined in this policy, we will work with you to understand and address the issue. We will not take legal action against individuals who discover and report vulnerabilities or secrets in accordance with this policy.
+
+## Patching and Updates
+
+We are committed to maintaining the security of our project. When vulnerabilities are reported and confirmed, we will:
+
+1. Work diligently to develop and apply a patch or implement a mitigation strategy.
+2. Keep the reporter informed about the progress of the fix.
+3. Update the repository with the necessary patches and document the changes in the release notes or changelog.
+4. Credit the reporter for the discovery, if they wish to be acknowledged.
+
+## Contributing to Security
+
+We welcome contributions that help improve the security of our project. If you have suggestions or want to contribute code to address security issues, please follow the standard contribution guidelines for this repository. When submitting a pull request related to security, please mention that it addresses a security issue and provide any necessary context.
+
+By adhering to this security policy, you contribute to the overall security and stability of the project. Thank you for your cooperation and responsible handling of vulnerabilities and secrets.

__tests__/utils/app/importExports.test.ts

@@ -0,0 +1,265 @@
+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 { OllamaModelID, OllamaModels } from '@/types/ollama';
+
+
+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: OllamaModels[OllamaModelID.DEFAULTMODEL],
+            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: OllamaModels[OllamaModelID.DEFAULTMODEL],
+            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: OllamaModels[OllamaModelID.DEFAULTMODEL],
+            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: OllamaModels[OllamaModelID.DEFAULTMODEL],
+            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: OllamaModels[OllamaModelID.DEFAULTMODEL],
+            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: OllamaModels[OllamaModelID.DEFAULTMODEL],
+            folderId: null,
+          },
+        ],
+      });
+    });
+  });
+});

components/Buttons/SidebarActionButton/SidebarActionButton.tsx

@@ -0,0 +1,17 @@
+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;

components/Buttons/SidebarActionButton/index.ts

@@ -0,0 +1 @@
+export { default } from './SidebarActionButton';

components/Chat/Chat.tsx

@@ -0,0 +1,445 @@
+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 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,
+      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 ) => {
+      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.name,
+          system: updatedConversation.prompt,
+          prompt: updatedConversation.messages.map(message => message.content).join(' '),
+          options: { temperature: updatedConversation.temperature },
+        };
+        const endpoint = getEndpoint();
+        let body;
+        body = JSON.stringify({
+          ...chatBody,
+        });
+        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 (!false) {
+          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 });
+        }
+      }
+    },
+    [
+      conversations,
+      selectedConversation,
+      stopConversationRef,
+      homeDispatch,
+    ],
+  );
+
+  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(() => {
+    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-[#343541]">
+        <>
+          <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>
+                    ) : (
+                      'Chatbot Ollama'
+                    )}
+                  </div>
+
+                  {models.length > 0 && (
+                    <div className="flex h-full flex-col space-y-4 rounded-lg border border-neutral-200 p-4 dark:border-neutral-600">
+                      <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-[#444654] 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-200 p-4 dark:border-neutral-600 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-[#343541]"
+                  ref={messagesEndRef}
+                />
+              </>
+            )}
+          </div>
+
+          <ChatInput
+            stopConversationRef={stopConversationRef}
+            textareaRef={textareaRef}
+            onSend={(message) => {
+              setCurrentMessage(message);
+              handleSend(message, 0);
+            }}
+            onScrollDownClick={handleScrollDown}
+            onRegenerate={() => {
+              if (currentMessage) {
+                handleSend(currentMessage, 2);
+              }
+            }}
+            showScrollDownButton={showScrollDownButton}
+          />
+        </>
+    </div>
+  );
+});
+Chat.displayName = 'Chat';

components/Chat/ChatInput.tsx

@@ -0,0 +1,354 @@
+import {
+  IconArrowDown,
+  IconBolt,
+  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 { Prompt } from '@/types/prompt';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+import { PromptList } from './PromptList';
+import { VariableModal } from './VariableModal';
+
+interface Props {
+  onSend: (message: Message) => 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 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;
+
+    setContent(value);
+    updatePromptListVisibility(value);
+  };
+
+  const handleSend = () => {
+    if (messageIsStreaming) {
+      return;
+    }
+
+    if (!content) {
+      alert(t('Please enter a message'));
+      return;
+    }
+
+    onSend({ role: 'user', content });
+    setContent('');
+
+    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();
+    }
+  };
+
+  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, textareaRef]);
+
+  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-[#343541] dark:to-[#343541] 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-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] 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-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] 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-[#40414F] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] sm:mx-4">
+          <div
+            className="absolute left-2 top-2 rounded-sm p-1 text-neutral-800 opacity-60 dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
+          >
+            <IconBolt size={20} />
+          </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/ivanfioravanti/chatbot-ollama"
+          target="_blank"
+          rel="noreferrer"
+          className="underline"
+        >
+          Chatbot Ollama
+        </a>
+        .{' '}
+        {t(
+          "Chatbot Ollama is an advanced chatbot kit for Ollama models aiming to mimic ChatGPT's interface and functionality.",
+        )}
+      </div>
+    </div>
+  );
+};

components/Chat/ChatLoader.tsx

@@ -0,0 +1,20 @@
+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-900/50 dark:bg-[#444654] 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>
+  );
+};

components/Chat/ChatMessage.tsx

@@ -0,0 +1,291 @@
+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 = () => {
+    if (!navigator.clipboard) return;
+
+    navigator.clipboard.writeText(message.content).then(() => {
+      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-900/50 dark:bg-[#444654] dark:text-gray-100'
+          : 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] 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-[#343541]"
+                    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';

components/Chat/ErrorMessageDiv.tsx

@@ -0,0 +1,28 @@
+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>
+  );
+};

components/Chat/MemoizedChatMessage.tsx

@@ -0,0 +1,9 @@
+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
+    )
+);

components/Chat/ModelSelect.tsx

@@ -0,0 +1,119 @@
+import { IconExternalLink } from '@tabler/icons-react';
+import { useContext, useState, useEffect } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { OllamaModel } from '@/types/ollama';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+export const ModelSelect = () => {
+  const { t } = useTranslation('chat');
+
+  function bytesToGB(bytes: number): string {
+    return (bytes / 1e9).toFixed(2) + ' GB';
+  }
+
+  function timeAgo(date: Date): string {
+    const now = new Date();
+    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+    const mins = Math.floor(diffInSeconds / 60);
+    const hours = Math.floor(mins / 60);
+    const days = Math.floor(hours / 24);
+
+    if (days > 0) {
+      return `${days} day${days > 1 ? 's' : ''} ago`;
+    } else if (hours > 0) {
+      return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+    } else {
+      return `${mins} minute${mins > 1 ? 's' : ''} ago`;
+    }
+  }
+
+  const {
+    state: { selectedConversation, models, defaultModelId },
+    handleUpdateConversation,
+    dispatch: homeDispatch,
+  } = useContext(HomeContext);
+
+  const [selectedModelDetails, setSelectedModelDetails] = useState<{
+    size: string;
+    modified: string;
+  }>({ size: '', modified: '' });
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    selectedConversation &&
+      handleUpdateConversation(selectedConversation, {
+        key: 'model',
+        value: models.find((model) => model.name === e.target.value) as OllamaModel,
+      });
+
+    const selectedModel = models.find((model) => model.name === e.target.value);
+    if (selectedModel) {
+      setSelectedModelDetails({
+        size: bytesToGB(selectedModel.size),
+        modified: timeAgo(new Date(selectedModel.modified_at)),
+      });
+    }
+  };
+
+  useEffect(() => {
+    let model
+    if (selectedConversation?.model) {
+      model = models.find((m) => m.name === selectedConversation.model.name)
+    }
+
+    if (!model) {
+      // selectedConversation has model which is not present on the system. Select the first model
+      model = models[0]
+      selectedConversation && model && handleUpdateConversation(selectedConversation, { key: 'model', value: model });
+    }
+
+    if (model) {
+      setSelectedModelDetails({
+        size: bytesToGB(model.size),
+        modified: timeAgo(new Date(model.modified_at)),
+      });
+    }
+  }, [selectedConversation, models]);
+
+  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-200 bg-transparent pr-2 text-neutral-900 dark:border-neutral-600 dark:text-white">
+        <select
+          className="w-full bg-transparent p-2"
+          placeholder={t('Select a model') || ''}
+          value={selectedConversation?.model?.name || defaultModelId}
+          onChange={handleChange}
+        >
+          {models.map((model) => (
+            <option
+              key={model.name}
+              value={model.name}
+              className="dark:bg-[#343541] dark:text-white"
+            >
+              {model.name === defaultModelId
+                ? `Default (${model.name})`
+                : model.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Display additional properties */}
+      <div className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
+        <p className='mt-2'>
+          <span className="mr-16 inline-block">Size:</span>
+          <span className="inline-block">{selectedModelDetails.size}</span>
+        </p>
+        <p>
+          <span className="mr-8 inline-block">Modified:</span>
+          <span className="inline-block">{selectedModelDetails.modified}</span>
+        </p>
+      </div>
+    </div>
+  );
+};

components/Chat/PromptList.tsx

@@ -0,0 +1,45 @@
+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-500 dark:bg-[#343541] 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-[#202123] 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>
+  );
+};

components/Chat/Regenerate.tsx

@@ -0,0 +1,26 @@
+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-[#444654] dark:text-neutral-200"
+        onClick={onRegenerate}
+      >
+        <IconRefresh />
+        <div>{t('Regenerate response')}</div>
+      </button>
+    </div>
+  );
+};

components/Chat/SystemPrompt.tsx

@@ -0,0 +1,232 @@
+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;
+
+    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-200 bg-transparent px-4 py-3 text-neutral-900 dark:border-neutral-600 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>
+  );
+};

components/Chat/Temperature.tsx

@@ -0,0 +1,67 @@
+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>
+  );
+};

components/Chat/VariableModal.tsx

@@ -0,0 +1,124 @@
+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-[#202123] 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-500 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-500 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>
+  );
+};

components/Chatbar/Chatbar.context.tsx

@@ -0,0 +1,21 @@
+import { Dispatch, createContext } from 'react';
+
+import { ActionType } from '@/hooks/useCreateReducer';
+
+import { Conversation } from '@/types/chat';
+import { SupportedExportFormats } from '@/types/export';
+
+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;
+}
+
+const ChatbarContext = createContext<ChatbarContextProps>(undefined!);
+
+export default ChatbarContext;

components/Chatbar/Chatbar.state.tsx

@@ -0,0 +1,11 @@
+import { Conversation } from '@/types/chat';
+
+export interface ChatbarInitialState {
+  searchTerm: string;
+  filteredConversations: Conversation[];
+}
+
+export const initialState: ChatbarInitialState = {
+  searchTerm: '',
+  filteredConversations: [],
+};

components/Chatbar/Chatbar.tsx

@@ -0,0 +1,189 @@
+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 { OllamaModels } from '@/types/ollama';
+
+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 },
+    dispatch: homeDispatch,
+    handleCreateFolder,
+    handleNewConversation,
+    handleUpdateConversation,
+  } = useContext(HomeContext);
+
+  const {
+    state: { searchTerm, filteredConversations },
+    dispatch: chatDispatch,
+  } = chatBarContextValue;
+
+  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: OllamaModels[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: OllamaModels[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, chatDispatch]);
+
+  return (
+    <ChatbarContext.Provider
+      value={{
+        ...chatBarContextValue,
+        handleDeleteConversation,
+        handleClearConversations,
+        handleImportConversations,
+        handleExportData,
+      }}
+    >
+      <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>
+  );
+};

components/Chatbar/components/ChatFolders.tsx

@@ -0,0 +1,64 @@
+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>
+  );
+};

components/Chatbar/components/ChatbarSettings.tsx

@@ -0,0 +1,61 @@
+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 { SidebarButton } from '../../Sidebar/SidebarButton';
+import ChatbarContext from '../Chatbar.context';
+import { ClearConversations } from './ClearConversations';
+
+export const ChatbarSettings = () => {
+  const { t } = useTranslation('sidebar');
+  const [isSettingDialogOpen, setIsSettingDialog] = useState<boolean>(false);
+
+  const {
+    state: {
+      lightMode,
+      conversations,
+    },
+    dispatch: homeDispatch,
+  } = useContext(HomeContext);
+
+  const {
+    handleClearConversations,
+    handleImportConversations,
+    handleExportData,
+  } = 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)}
+      />
+
+      <SettingDialog
+        open={isSettingDialogOpen}
+        onClose={() => {
+          setIsSettingDialog(false);
+        }}
+      />
+    </div>
+  );
+};

components/Chatbar/components/ClearConversations.tsx

@@ -0,0 +1,57 @@
+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)}
+    />
+  );
+};

components/Chatbar/components/Conversation.tsx

@@ -0,0 +1,168 @@
+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-[#343541]/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-[#343541]/90 ${
+            messageIsStreaming ? 'disabled:cursor-not-allowed' : ''
+          } ${
+            selectedConversation?.id === conversation.id
+              ? 'bg-[#343541]/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>
+  );
+};

components/Chatbar/components/Conversations.tsx

@@ -0,0 +1,21 @@
+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>
+  );
+};

components/Folder/Folder.tsx

@@ -0,0 +1,192 @@
+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 = '#343541';
+  };
+
+  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-[#343541]/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-[#343541]/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;

components/Folder/index.ts

@@ -0,0 +1 @@
+export { default } from './Folder';

components/Markdown/CodeBlock.tsx

@@ -0,0 +1,94 @@
+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 = () => {
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      return;
+    }
+
+    navigator.clipboard.writeText(value).then(() => {
+      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';

components/Markdown/MemoizedReactMarkdown.tsx

@@ -0,0 +1,9 @@
+import { FC, memo } from 'react';
+import ReactMarkdown, { Options } from 'react-markdown';
+
+export const MemoizedReactMarkdown: FC<Options> = memo(
+    ReactMarkdown,
+    (prevProps, nextProps) => (
+        prevProps.children === nextProps.children
+    )
+);

components/Mobile/Navbar.tsx

@@ -0,0 +1,29 @@
+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-[#202123] 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>
+  );
+};

components/Promptbar/PromptBar.context.tsx

@@ -0,0 +1,19 @@
+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;

components/Promptbar/Promptbar.state.tsx

@@ -0,0 +1,11 @@
+import { Prompt } from '@/types/prompt';
+
+export interface PromptbarInitialState {
+  searchTerm: string;
+  filteredPrompts: Prompt[];
+}
+
+export const initialState: PromptbarInitialState = {
+  searchTerm: '',
+  filteredPrompts: [],
+};

components/Promptbar/Promptbar.tsx

@@ -0,0 +1,152 @@
+import { useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCreateReducer } from '@/hooks/useCreateReducer';
+
+import { savePrompts } from '@/utils/app/prompts';
+
+import { OllamaModels } from '@/types/ollama';
+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: OllamaModels[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, promptDispatch]);
+
+  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;

components/Promptbar/components/Prompt.tsx

@@ -0,0 +1,130 @@
+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-[#343541]/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>
+  );
+};

components/Promptbar/components/PromptFolders.tsx

@@ -0,0 +1,64 @@
+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>
+  );
+};

components/Promptbar/components/PromptModal.tsx

@@ -0,0 +1,130 @@
+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-[#202123] 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-500 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-500 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-500 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-500 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>
+  );
+};

components/Promptbar/components/PromptbarSettings.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+
+interface Props {}
+
+export const PromptbarSettings: FC<Props> = () => {
+  return <div></div>;
+};

components/Promptbar/components/Prompts.tsx

@@ -0,0 +1,22 @@
+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>
+  );
+};

components/Promptbar/index.ts

@@ -0,0 +1 @@
+export { default } from './Promptbar';

components/Search/Search.tsx

@@ -0,0 +1,43 @@
+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-600 bg-[#202123] 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;