Synced repo using 'sync_with_huggingface' Github Action

.dockerignore

@@ -0,0 +1,9 @@
+.next/
+node_modules/
+.env
+next-env.d.ts
+Dockerfile
+.dockerignore
+Makefile
+.github
+.git

.eslintrc.json

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

.example.env

@@ -0,0 +1 @@
+VLLM_URL="http://localhost:8000"

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+ollama-nextjs-ui.gif filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,50 @@
+ARG NODE_VERSION=lts
+# Install dependencies only when needed
+FROM node:$NODE_VERSION-alpine AS builder
+ENV YARN_CACHE_FOLDER=/opt/yarncache
+WORKDIR /opt/app
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+# patch logging for requestHandler
+RUN sed -Ei \
+    -e '/await requestHandler/iconst __start = new Date;' \
+    -e '/await requestHandler/aconsole.log(`[${__start.toISOString()}] ${((new Date - __start) / 1000).toFixed(3)} ${req.method} ${req.url}`);' \
+    node_modules/next/dist/server/lib/start-server.js
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV VLLM_URL="http://localhost:8000"
+ENV VLLM_API_KEY=""
+
+COPY . .
+RUN yarn build
+
+# Production image, copy all the files and run next
+FROM node:$NODE_VERSION-alpine AS runner
+WORKDIR /opt/app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /opt/app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /opt/app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /opt/app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+CMD ["node", "server.js"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Jakob Hoeg Mørk
+
+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,2 @@
+build:
+	docker buildx build --platform linux/amd64,linux/arm64 . -t yoziru/nextjs-vllm-ui

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

next.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    // set basepath based on environment
+    basePath: process.env.NEXT_PUBLIC_BASE_PATH ?? "",
+    output: "standalone",
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "nextjs-vllm-ui",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "ai": "^3.0.15",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "mistral-tokenizer-js": "^1.0.0",
+    "next": "14.1.4",
+    "next-themes": "^0.3.0",
+    "openai": "^4.30.0",
+    "react": "^18",
+    "react-code-blocks": "^0.1.6",
+    "react-dom": "^18",
+    "react-hook-form": "^7.51.2",
+    "react-textarea-autosize": "^8.5.3",
+    "sonner": "^1.4.41",
+    "tailwind-merge": "^2.2.2",
+    "use-debounce": "^10.0.0",
+    "use-local-storage-state": "^19.2.0",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
+    "@types/uuid": "^9.0.8",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.1.4",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.3",
+    "typescript-eslint": "^7.4.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/app/api/chat/route.ts

@@ -0,0 +1,222 @@
+import {
+  createParser,
+  ParsedEvent,
+  ReconnectInterval,
+} from "eventsource-parser";
+import { NextRequest, NextResponse } from "next/server";
+import {
+  ChatCompletionAssistantMessageParam,
+  ChatCompletionCreateParamsStreaming,
+  ChatCompletionMessageParam,
+  ChatCompletionSystemMessageParam,
+  ChatCompletionUserMessageParam,
+} from "openai/resources/index.mjs";
+
+import { encodeChat, tokenLimit } from "@/lib/token-counter";
+
+const addSystemMessage = (
+  messages: ChatCompletionMessageParam[],
+  systemPrompt?: string
+) => {
+  // early exit if system prompt is empty
+  if (!systemPrompt || systemPrompt === "") {
+    return messages;
+  }
+
+  // add system prompt to the chat (if it's not already there)
+  // check first message in the chat
+  if (!messages) {
+    // if there are no messages, add the system prompt as the first message
+    messages = [
+      {
+        content: systemPrompt,
+        role: "system",
+      },
+    ];
+  } else if (messages.length === 0) {
+    // if there are no messages, add the system prompt as the first message
+    messages.push({
+      content: systemPrompt,
+      role: "system",
+    });
+  } else {
+    // if there are messages, check if the first message is a system prompt
+    if (messages[0].role === "system") {
+      // if the first message is a system prompt, update it
+      messages[0].content = systemPrompt;
+    } else {
+      // if the first message is not a system prompt, add the system prompt as the first message
+      messages.unshift({
+        content: systemPrompt,
+        role: "system",
+      });
+    }
+  }
+  return messages;
+};
+
+const formatMessages = (
+  messages: ChatCompletionMessageParam[]
+): ChatCompletionMessageParam[] => {
+  let mappedMessages: ChatCompletionMessageParam[] = [];
+  let messagesTokenCounts: number[] = [];
+  const responseTokens = 512;
+  const tokenLimitRemaining = tokenLimit - responseTokens;
+  let tokenCount = 0;
+
+  messages.forEach((m) => {
+    if (m.role === "system") {
+      mappedMessages.push({
+        role: "system",
+        content: m.content,
+      } as ChatCompletionSystemMessageParam);
+    } else if (m.role === "user") {
+      mappedMessages.push({
+        role: "user",
+        content: m.content,
+      } as ChatCompletionUserMessageParam);
+    } else if (m.role === "assistant") {
+      mappedMessages.push({
+        role: "assistant",
+        content: m.content,
+      } as ChatCompletionAssistantMessageParam);
+    } else {
+      return;
+    }
+
+    // ignore typing
+    // tslint:disable-next-line
+    const messageTokens = encodeChat([m]); 
+    messagesTokenCounts.push(messageTokens);
+    tokenCount += messageTokens;
+  });
+
+  if (tokenCount <= tokenLimitRemaining) {
+    return mappedMessages;
+  }
+
+  // remove the middle messages until the token count is below the limit
+  while (tokenCount > tokenLimitRemaining) {
+    const middleMessageIndex = Math.floor(messages.length / 2);
+    const middleMessageTokens = messagesTokenCounts[middleMessageIndex];
+    mappedMessages.splice(middleMessageIndex, 1);
+    messagesTokenCounts.splice(middleMessageIndex, 1);
+    tokenCount -= middleMessageTokens;
+  }
+  return mappedMessages;
+};
+
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  try {
+    const { messages, chatOptions } = await req.json();
+    if (!chatOptions.selectedModel || chatOptions.selectedModel === "") {
+      throw new Error("Selected model is required");
+    }
+
+    const baseUrl = process.env.VLLM_URL;
+    if (!baseUrl) {
+      throw new Error("VLLM_URL is not set");
+    }
+    const apiKey = process.env.VLLM_API_KEY;
+
+    const formattedMessages = formatMessages(
+      addSystemMessage(messages, chatOptions.systemPrompt)
+    );
+
+    const stream = await getOpenAIStream(
+      baseUrl,
+      chatOptions.selectedModel,
+      formattedMessages,
+      chatOptions.temperature,
+      apiKey,
+    );
+    return new NextResponse(stream, {
+      headers: { "Content-Type": "text/event-stream" },
+    });
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : "Unknown error",
+      },
+      { status: 500 }
+    );
+  }
+}
+
+const getOpenAIStream = async (
+  apiUrl: string,
+  model: string,
+  messages: ChatCompletionMessageParam[],
+  temperature?: number,
+  apiKey?: string
+): Promise<ReadableStream<Uint8Array>> => {
+  const encoder = new TextEncoder();
+  const decoder = new TextDecoder();
+  const headers = new Headers();
+  headers.set("Content-Type", "application/json");
+  if (apiKey !== undefined) {
+    headers.set("Authorization", `Bearer ${apiKey}`);
+    headers.set("api-key", apiKey);
+  }
+  const chatOptions: ChatCompletionCreateParamsStreaming = {
+    model: model,
+    // frequency_penalty: 0,
+    // max_tokens: 2000,
+    messages: messages,
+    // presence_penalty: 0,
+    stream: true,
+    temperature: temperature ?? 0.5,
+    // response_format: {
+    //   type: "json_object",
+    // }
+    // top_p: 0.95,
+  };
+  const res = await fetch(apiUrl + "/v1/chat/completions", {
+    headers: headers,
+    method: "POST",
+    body: JSON.stringify(chatOptions),
+  });
+
+  if (res.status !== 200) {
+    const statusText = res.statusText;
+    const responseBody = await res.text();
+    console.error(`vLLM API response error: ${responseBody}`);
+    throw new Error(
+      `The vLLM API has encountered an error with a status code of ${res.status} ${statusText}: ${responseBody}`
+    );
+  }
+
+  return new ReadableStream({
+    async start(controller) {
+      const onParse = (event: ParsedEvent | ReconnectInterval) => {
+        if (event.type === "event") {
+          const data = event.data;
+
+          if (data === "[DONE]") {
+            controller.close();
+            return;
+          }
+
+          try {
+            const json = JSON.parse(data);
+            const text = json.choices[0].delta.content;
+            const queue = encoder.encode(text);
+            controller.enqueue(queue);
+          } catch (e) {
+            controller.error(e);
+          }
+        }
+      };
+
+      const parser = createParser(onParse);
+
+      for await (const chunk of res.body as any) {
+        // An extra newline is required to make AzureOpenAI work.
+        const str = decoder.decode(chunk).replace("[DONE]\n", "[DONE]\n\n");
+        parser.feed(str);
+      }
+    },
+  });
+};

src/app/api/health/route.ts

@@ -0,0 +1,5 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest): Promise<NextResponse> {
+  return new NextResponse("OK", { status: 200 });
+}

src/app/api/models/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest): Promise<NextResponse> {
+  const baseUrl = process.env.VLLM_URL;
+  const apiKey = process.env.VLLM_API_KEY;
+  const headers = new Headers();
+  if (apiKey !== undefined) {
+    headers.set("Authorization", `Bearer ${apiKey}`);
+    headers.set("api-key", apiKey);
+  }
+  if (!baseUrl) {
+    throw new Error("VLLM_URL is not set");
+  }
+
+  const envModel = process.env.VLLM_MODEL;
+  if (envModel) {
+    return NextResponse.json({
+      object: "list",
+      data: [
+        {
+          id: envModel,
+        },
+      ],
+    });
+  }
+
+  try {
+    const res = await fetch(`${baseUrl}/v1/models`, {
+      headers: headers,
+      cache: "no-store",
+    });
+    if (res.status !== 200) {
+      const statusText = res.statusText;
+      const responseBody = await res.text();
+      console.error(`vLLM /api/models response error: ${responseBody}`);
+      return NextResponse.json(
+        {
+          success: false,
+          error: statusText,
+        },
+        { status: res.status }
+      );
+    }
+    return new NextResponse(res.body, res);
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : "Unknown error",
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/chats/[id]/page.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import React from "react";
+
+import ChatPage from "@/components/chat/chat-page";
+
+export default function Page({ params }: { params: { id: string } }) {
+  const [chatId, setChatId] = React.useState<string>("");
+  React.useEffect(() => {
+    if (params.id) {
+      setChatId(params.id);
+    }
+  }, [params.id]);
+  return <ChatPage chatId={chatId} setChatId={setChatId} />;
+}

src/app/globals.css

@@ -0,0 +1,95 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 1rem;
+  }
+
+  .dark {
+    --background: 0 0% 9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 12%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 12%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+#scroller * {
+  overflow-anchor: none;
+}
+
+#anchor {
+  overflow-anchor: auto;
+  height: 1px;
+}
+
+:root {
+  --scrollbar-thumb-color: #ccc;
+  --scrollbar-thumb-hover-color: #aaa; 
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-color);
+  border-radius: 999px;
+  transition: width 0.3s, height 0.3s, visibility 0.3s; 
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover-color);
+}
+
+::-webkit-scrollbar-thumb:not(:hover) {
+  width: 0;
+  height: 0;
+  visibility: hidden;
+}

src/app/layout.tsx

@@ -0,0 +1,36 @@
+import { ThemeProvider } from "@/providers/theme-provider";
+import type { Metadata } from "next";
+
+import { Toaster } from "@/components/ui/sonner";
+import "./globals.css";
+
+export const runtime = "edge"; // 'nodejs' (default) | 'edge'
+
+export const metadata: Metadata = {
+  title: "vLLM UI",
+  description: "vLLM chatbot web interface",
+};
+
+export const viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: 1,
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <ThemeProvider attribute="class" defaultTheme="dark">
+          {children}
+          <Toaster />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import React from "react";
+import ChatPage from "@/components/chat/chat-page";
+
+export default function Home() {
+  const [chatId, setChatId] = React.useState<string>("");
+  return <ChatPage chatId={chatId} setChatId={setChatId} />;
+}

src/components/chat/chat-bottombar.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import React from "react";
+
+import { PaperPlaneIcon, StopIcon } from "@radix-ui/react-icons";
+import { ChatRequestOptions } from "ai";
+import mistralTokenizer from "mistral-tokenizer-js";
+import TextareaAutosize from "react-textarea-autosize";
+
+import { tokenLimit } from "@/lib/token-counter";
+import { Button } from "../ui/button";
+
+interface ChatBottombarProps {
+  selectedModel: string | undefined;
+  input: string;
+  handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleSubmit: (
+    e: React.FormEvent<HTMLFormElement>,
+    chatRequestOptions?: ChatRequestOptions
+  ) => void;
+  isLoading: boolean;
+  stop: () => void;
+}
+
+export default function ChatBottombar({
+  selectedModel,
+  input,
+  handleInputChange,
+  handleSubmit,
+  isLoading,
+  stop,
+}: ChatBottombarProps) {
+  const inputRef = React.useRef<HTMLTextAreaElement>(null);
+  const hasSelectedModel = selectedModel && selectedModel !== "";
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey && hasSelectedModel && !isLoading) {
+      e.preventDefault();
+      handleSubmit(e as unknown as React.FormEvent<HTMLFormElement>);
+    }
+  };
+  const tokenCount = input ? mistralTokenizer.encode(input).length - 1 : 0;
+
+  return (
+    <div>
+      <div className="stretch flex flex-row gap-3 last:mb-2 md:last:mb-6 mx-2 md:mx-4 md:mx-auto md:max-w-2xl xl:max-w-3xl">
+        {/* <div className="p-2 pb-1 flex justify-between w-full items-center "> */}
+        <div key="input" className="w-full relative mb-1 items-center">
+          <form
+            onSubmit={handleSubmit}
+            className="w-full items-center flex relative gap-2"
+          >
+            <TextareaAutosize
+              autoComplete="off"
+              value={input}
+              ref={inputRef}
+              onKeyDown={handleKeyPress}
+              onChange={handleInputChange}
+              name="message"
+              placeholder="Ask vLLM anything..."
+              className="border-input max-h-48 px-4 py-4 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 dark:focus-visible:ring-slate-500 disabled:cursor-not-allowed disabled:opacity-50 w-full border rounded-md flex items-center h-14 resize-none overflow-hidden dark:bg-card/35 pr-32"
+            />
+            <div className="text-xs text-muted-foreground absolute right-14 px-0 text-right">
+              {tokenCount > tokenLimit ? (
+                <span className="text-red-700">
+                  {tokenCount} token{tokenCount == 1 ? "" : "s"}
+                </span>
+              ) : (
+                <span>
+                  {tokenCount} token{tokenCount == 1 ? "" : "s"}
+                </span>
+              )}
+            </div>
+            {!isLoading ? (
+              <Button
+                size="icon"
+                className="absolute bottom-1.5 md:bottom-2 md:right-2 right-2 z-100"
+                type="submit"
+                disabled={isLoading || !input.trim() || !hasSelectedModel}
+              >
+                <PaperPlaneIcon className="w-5 h-5 text-white dark:text-black" />
+              </Button>
+            ) : (
+              <Button
+                size="icon"
+                className="absolute bottom-1.5 md:bottom-2 md:right-2 right-2 z-100"
+                onClick={stop}
+              >
+                <StopIcon className="w-5 h-5 text-white dark:text-black" />
+              </Button>
+            )}
+          </form>
+        </div>
+      </div>
+      <div className="relative px-2 py-2 text-center text-xs text-slate-500 md:px-[60px]">
+        <span>Enter to send, Shift + Enter for new line</span>
+      </div>
+    </div>
+  );
+}

src/components/chat/chat-layout.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+import { Sidebar } from "../sidebar";
+import Chat, { ChatProps, ChatTopbarProps } from "./chat";
+
+interface ChatLayoutProps {
+  defaultLayout: number[] | undefined;
+  defaultCollapsed?: boolean;
+  navCollapsedSize: number;
+  chatId: string;
+}
+
+type MergedProps = ChatLayoutProps & ChatProps & ChatTopbarProps;
+
+export function ChatLayout({
+  defaultLayout = [30, 160],
+  defaultCollapsed = false,
+  navCollapsedSize = 768,
+  messages,
+  input,
+  handleInputChange,
+  handleSubmit,
+  isLoading,
+  error,
+  stop,
+  chatId,
+  setChatId,
+  chatOptions,
+  setChatOptions,
+}: MergedProps) {
+  const [isCollapsed, setIsCollapsed] = React.useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkScreenWidth = () => {
+      setIsMobile(window.innerWidth <= 768);
+      setIsCollapsed(window.innerWidth <= 768);
+    };
+
+    // Initial check
+    checkScreenWidth();
+
+    // Event listener for screen width changes
+    window.addEventListener("resize", checkScreenWidth);
+
+    // Cleanup the event listener on component unmount
+    return () => {
+      window.removeEventListener("resize", checkScreenWidth);
+    };
+  }, []);
+
+  return (
+    <div className="relative z-0 flex h-full w-full overflow-hidden">
+      <div className="flex-shrink-0 overflow-x-hidden bg-token-sidebar-surface-primary md:w-[260px]">
+        <Sidebar
+          isCollapsed={isCollapsed}
+          isMobile={isMobile}
+          chatId={chatId}
+          setChatId={setChatId}
+          chatOptions={chatOptions}
+          setChatOptions={setChatOptions}
+        />
+      </div>
+      <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
+        <Chat
+          chatId={chatId}
+          setChatId={setChatId}
+          chatOptions={chatOptions}
+          setChatOptions={setChatOptions}
+          messages={messages}
+          input={input}
+          handleInputChange={handleInputChange}
+          handleSubmit={handleSubmit}
+          isLoading={isLoading}
+          error={error}
+          stop={stop}
+        />
+      </div>
+    </div>
+  );
+}

src/components/chat/chat-list.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useRef } from "react";
+
+import Image from "next/image";
+
+import OllamaLogo from "../../../public/ollama.png";
+import CodeDisplayBlock from "../code-display-block";
+import { Message } from "ai";
+
+interface ChatListProps {
+  messages: Message[];
+  isLoading: boolean;
+}
+
+const MessageToolbar = () => (
+  <div className="mt-1 flex gap-3 empty:hidden juice:flex-row-reverse">
+    <div className="text-gray-400 flex self-end lg:self-center items-center justify-center lg:justify-start mt-0 -ml-1 h-7 gap-[2px] invisible">
+      <span>Regenerate</span>
+      <span>Edit</span>
+    </div>
+  </div>
+);
+
+export default function ChatList({ messages, isLoading }: ChatListProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    bottomRef.current?.scrollIntoView({ behavior: "auto", block: "end" });
+  };
+
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+    // if user scrolls up, disable auto-scroll
+    scrollToBottom();
+  }, [messages, isLoading]);
+
+  if (messages.length === 0) {
+    return (
+      <div className="w-full h-full flex justify-center items-center">
+        <div className="flex flex-col gap-4 items-center">
+          <Image
+            src={OllamaLogo}
+            alt="AI"
+            width={60}
+            height={60}
+            className="h-20 w-14 object-contain dark:invert"
+          />
+          <p className="text-center text-xl text-muted-foreground">
+            How can I help you today?
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      id="scroller"
+      className="w-[800px] overflow-y-scroll overflow-x-hidden h-full justify-center m-auto"
+    >
+      <div className="px-4 py-2 justify-center text-base md:gap-6 m-auto">
+        {messages
+          .filter((message) => message.role !== "system")
+          .map((message, index) => (
+            <div
+              key={index}
+              className="flex flex-1 text-base mx-auto gap-3 juice:gap-4 juice:md:gap-6 md:px-5 lg:px-1 xl:px-5 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem]"
+            >
+              <div className="flex flex-1 text-base mx-auto gap-3 juice:gap-4 juice:md:gap-6 md:px-5 lg:px-1 xl:px-5 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem]">
+                <div className="flex-shrink-0 flex flex-col relative items-end">
+                  <div className="pt-0.5">
+                    <div className="gizmo-shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
+                      {message.role === "user" ? (
+                        <div className="dark:invert h-full w-full bg-black" />
+                      ) : (
+                        <Image
+                          src={OllamaLogo}
+                          alt="AI"
+                          className="object-contain dark:invert aspect-square h-full w-full"
+                        />
+                      )}
+                    </div>
+                  </div>
+                </div>
+                {message.role === "user" && (
+                  <div className="relative flex w-full min-w-0 flex-col">
+                    <div className="font-semibold pb-2">You</div>
+                    <div className="flex-col gap-1 md:gap-3">
+                      {message.content}
+                    </div>
+                    <MessageToolbar />
+                  </div>
+                )}
+                {message.role === "assistant" && (
+                  <div className="relative flex w-full min-w-0 flex-col">
+                    <div className="font-semibold pb-2">Assistant</div>
+                    <div className="flex-col gap-1 md:gap-3">
+                      <span className="whitespace-pre-wrap">
+                        {/* Check if the message content contains a code block */}
+                        {message.content.split("```").map((part, index) => {
+                          if (index % 2 === 0) {
+                            return (
+                              <React.Fragment key={index}>
+                                {part}
+                              </React.Fragment>
+                            );
+                          } else {
+                            return (
+                              <CodeDisplayBlock
+                                key={index}
+                                code={part.trim()}
+                                lang=""
+                              />
+                            );
+                          }
+                        })}
+                        {isLoading &&
+                          messages.indexOf(message) === messages.length - 1 && (
+                            <span className="animate-pulse" aria-label="Typing">
+                              ...
+                            </span>
+                          )}
+                      </span>
+                    </div>
+                    <MessageToolbar />
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+      </div>
+      <div id="anchor" ref={bottomRef}></div>
+    </div>
+  );
+}

src/components/chat/chat-options.ts

@@ -0,0 +1,5 @@
+export interface ChatOptions {
+  selectedModel?: string;
+  systemPrompt?: string;
+  temperature?: number;
+}

src/components/chat/chat-page.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import React from "react";
+
+import { ChatRequestOptions } from "ai";
+import { useChat } from "ai/react";
+import { toast } from "sonner";
+import useLocalStorageState from "use-local-storage-state";
+import { v4 as uuidv4 } from "uuid";
+
+import { ChatLayout } from "@/components/chat/chat-layout";
+import { ChatOptions } from "@/components/chat/chat-options";
+import { basePath } from "@/lib/utils";
+
+interface ChatPageProps {
+  chatId: string;
+  setChatId: React.Dispatch<React.SetStateAction<string>>;
+}
+export default function ChatPage({ chatId, setChatId }: ChatPageProps) {
+  const {
+    messages,
+    input,
+    handleInputChange,
+    handleSubmit,
+    isLoading,
+    error,
+    stop,
+    setMessages,
+  } = useChat({
+    api: basePath + "/api/chat",
+    streamMode: "text",
+    onError: (error) => {
+      toast.error("Something went wrong: " + error);
+    },
+  });
+  const [chatOptions, setChatOptions] = useLocalStorageState<ChatOptions>(
+    "chatOptions",
+    {
+      defaultValue: {
+        selectedModel: "",
+        systemPrompt: "",
+        temperature: 0.9,
+      },
+    }
+  );
+
+  React.useEffect(() => {
+    if (chatId) {
+      const item = localStorage.getItem(`chat_${chatId}`);
+      if (item) {
+        setMessages(JSON.parse(item));
+      }
+    } else {
+      setMessages([]);
+    }
+  }, [setMessages, chatId]);
+
+  React.useEffect(() => {
+    if (!isLoading && !error && chatId && messages.length > 0) {
+      // Save messages to local storage
+      localStorage.setItem(`chat_${chatId}`, JSON.stringify(messages));
+      // Trigger the storage event to update the sidebar component
+      window.dispatchEvent(new Event("storage"));
+    }
+  }, [messages, chatId, isLoading, error]);
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (messages.length === 0) {
+      // Generate a random id for the chat
+      const id = uuidv4();
+      setChatId(id);
+    }
+
+    setMessages([...messages]);
+
+    // Prepare the options object with additional body data, to pass the model.
+    const requestOptions: ChatRequestOptions = {
+      options: {
+        body: {
+          chatOptions: chatOptions,
+        },
+      },
+    };
+
+    // Call the handleSubmit function with the options
+    handleSubmit(e, requestOptions);
+  };
+
+  return (
+    <main className="flex h-[calc(100dvh)] flex-col items-center ">
+      <ChatLayout
+        chatId={chatId}
+        setChatId={setChatId}
+        chatOptions={chatOptions}
+        setChatOptions={setChatOptions}
+        messages={messages}
+        input={input}
+        handleInputChange={handleInputChange}
+        handleSubmit={onSubmit}
+        isLoading={isLoading}
+        error={error}
+        stop={stop}
+        navCollapsedSize={10}
+        defaultLayout={[30, 160]}
+      />
+    </main>
+  );
+}

src/components/chat/chat-topbar.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import React, { useEffect } from "react";
+
+import {
+  CheckCircledIcon,
+  CrossCircledIcon,
+  DotFilledIcon,
+  HamburgerMenuIcon,
+  InfoCircledIcon,
+} from "@radix-ui/react-icons";
+import { Message } from "ai/react";
+import { toast } from "sonner";
+
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { encodeChat, tokenLimit } from "@/lib/token-counter";
+import { basePath, useHasMounted } from "@/lib/utils";
+import { Sidebar } from "../sidebar";
+import { ChatOptions } from "./chat-options";
+
+interface ChatTopbarProps {
+  chatOptions: ChatOptions;
+  setChatOptions: React.Dispatch<React.SetStateAction<ChatOptions>>;
+  isLoading: boolean;
+  chatId?: string;
+  setChatId: React.Dispatch<React.SetStateAction<string>>;
+  messages: Message[];
+}
+
+export default function ChatTopbar({
+  chatOptions,
+  setChatOptions,
+  isLoading,
+  chatId,
+  setChatId,
+  messages,
+}: ChatTopbarProps) {
+  const hasMounted = useHasMounted();
+
+  const currentModel = chatOptions && chatOptions.selectedModel;
+  const [error, setError] = React.useState<string | undefined>(undefined);
+
+  const fetchData = async () => {
+    if (!hasMounted) {
+      return null;
+    }
+    try {
+      const res = await fetch(basePath + "/api/models");
+
+      if (!res.ok) {
+        const errorResponse = await res.json();
+        const errorMessage = `Connection to vLLM server failed: ${errorResponse.error} [${res.status} ${res.statusText}]`;
+        throw new Error(errorMessage);
+      }
+
+      const data = await res.json();
+      // Extract the "name" field from each model object and store them in the state
+      const modelNames = data.data.map((model: any) => model.id);
+      // save the first and only model in the list as selectedModel in localstorage
+      setChatOptions({ ...chatOptions, selectedModel: modelNames[0] });
+    } catch (error) {
+      setChatOptions({ ...chatOptions, selectedModel: undefined });
+      toast.error(error as string);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [hasMounted]);
+
+  if (!hasMounted) {
+    return (
+      <div className="md:w-full flex px-4 py-6 items-center gap-1 md:justify-center">
+        <DotFilledIcon className="w-4 h-4 text-blue-500" />
+        <span className="text-xs">Booting up..</span>
+      </div>
+    );
+  }
+
+  const chatTokens = messages.length > 0 ? encodeChat(messages) : 0;
+
+  return (
+    <div className="md:w-full flex px-4 py-4 items-center justify-between md:justify-center">
+      <Sheet>
+        <SheetTrigger>
+          <div className="flex items-center gap-2">
+            <HamburgerMenuIcon className="md:hidden w-5 h-5" />
+          </div>
+        </SheetTrigger>
+        <SheetContent side="left">
+          <div>
+            <Sidebar
+              chatId={chatId || ""}
+              setChatId={setChatId}
+              isCollapsed={false}
+              isMobile={false}
+              chatOptions={chatOptions}
+              setChatOptions={setChatOptions}
+            />
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <div className="flex justify-center md:justify-between gap-4 w-full">
+        <div className="gap-1 flex items-center">
+          {currentModel !== undefined && (
+            <>
+              {isLoading ? (
+                <DotFilledIcon className="w-4 h-4 text-blue-500" />
+              ) : (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <span className="cursor-help">
+                        <CheckCircledIcon className="w-4 h-4 text-green-500" />
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent
+                      sideOffset={4}
+                      className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-2 rounded-sm text-xs"
+                    >
+                      <p className="font-bold">Current Model</p>
+                      <p className="text-gray-500">{currentModel}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+              <span className="text-xs">
+                {isLoading ? "Generating.." : "Ready"}
+              </span>
+            </>
+          )}
+          {currentModel === undefined && (
+            <>
+              <CrossCircledIcon className="w-4 h-4 text-red-500" />
+              <span className="text-xs">Connection to vLLM server failed</span>
+            </>
+          )}
+        </div>
+        <div className="flex items-end gap-2">
+          {chatTokens > tokenLimit && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <span>
+                    <InfoCircledIcon className="w-4 h-4 text-blue-500" />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent
+                  sideOffset={4}
+                  className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-sm text-xs"
+                >
+                  <p className="text-gray-500">
+                    Token limit exceeded. Truncating middle messages.
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+          {messages.length > 0 && (
+            <span className="text-xs text-gray-500">
+              {chatTokens} / {tokenLimit} token{chatTokens > 1 ? "s" : ""}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/chat/chat.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+
+import { ChatRequestOptions } from "ai";
+import { Message } from "ai/react";
+
+import ChatBottombar from "./chat-bottombar";
+import ChatList from "./chat-list";
+import { ChatOptions } from "./chat-options";
+import ChatTopbar from "./chat-topbar";
+
+export interface ChatProps {
+  chatId?: string;
+  setChatId: React.Dispatch<React.SetStateAction<string>>;
+  messages: Message[];
+  input: string;
+  handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleSubmit: (
+    e: React.FormEvent<HTMLFormElement>,
+    chatRequestOptions?: ChatRequestOptions
+  ) => void;
+  isLoading: boolean;
+  error: undefined | Error;
+  stop: () => void;
+}
+
+export interface ChatTopbarProps {
+  chatOptions: ChatOptions;
+  setChatOptions: React.Dispatch<React.SetStateAction<ChatOptions>>;
+}
+
+export default function Chat({
+  messages,
+  input,
+  handleInputChange,
+  handleSubmit,
+  isLoading,
+  error,
+  stop,
+  chatOptions,
+  setChatOptions,
+  chatId,
+  setChatId,
+}: ChatProps & ChatTopbarProps) {
+  return (
+    <div className="flex flex-col justify-between w-full h-full  ">
+      <ChatTopbar
+        chatOptions={chatOptions}
+        setChatOptions={setChatOptions}
+        isLoading={isLoading}
+        chatId={chatId}
+        setChatId={setChatId}
+        messages={messages}
+      />
+
+      <ChatList
+        messages={messages}
+        isLoading={isLoading}
+      />
+
+      <ChatBottombar
+        selectedModel={chatOptions.selectedModel}
+        input={input}
+        handleInputChange={handleInputChange}
+        handleSubmit={handleSubmit}
+        isLoading={isLoading}
+        stop={stop}
+      />
+    </div>
+  );
+}

src/components/code-display-block.tsx

@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+
+import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
+import { useTheme } from "next-themes";
+import { CodeBlock, dracula, github } from "react-code-blocks";
+import { toast } from "sonner";
+
+import { Button } from "./ui/button";
+
+interface ButtonCodeblockProps {
+  code: string;
+  lang: string;
+}
+
+export default function CodeDisplayBlock({ code, lang }: ButtonCodeblockProps) {
+  const [isCopied, setisCopied] = React.useState(false);
+  const { theme } = useTheme();
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(code);
+    setisCopied(true);
+    toast.success("Code copied to clipboard!");
+    setTimeout(() => {
+      setisCopied(false);
+    }, 1500);
+  };
+
+  return (
+    <div className="relative my-4 overflow-scroll overflow-x-scroll  flex flex-col   text-start  ">
+      <CodeBlock
+        customStyle={
+          theme === "dark"
+            ? { background: "#303033" }
+            : { background: "#fcfcfc" }
+        }
+        text={code}
+        language="tsx"
+        showLineNumbers={false}
+        theme={theme === "dark" ? dracula : github}
+      />
+      <Button
+        onClick={copyToClipboard}
+        variant="ghost"
+        size="iconSm"
+        className="h-5 w-5 absolute top-2 right-2"
+      >
+        {isCopied ? (
+          <CheckIcon className="w-4 h-4" />
+        ) : (
+          <CopyIcon className="w-4 h-4" />
+        )}
+      </Button>
+    </div>
+  );
+}

src/components/settings-clear-chats.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogTrigger,
+} from "@radix-ui/react-dialog";
+import { TrashIcon } from "@radix-ui/react-icons";
+import { useRouter } from "next/navigation";
+
+import { useHasMounted } from "@/lib/utils";
+import { DialogHeader } from "./ui/dialog";
+
+export default function ClearChatsButton() {
+  const hasMounted = useHasMounted();
+  const router = useRouter();
+
+  if (!hasMounted) {
+    return null;
+  }
+
+  const chats = Object.keys(localStorage).filter((key) =>
+    key.startsWith("chat_")
+  );
+
+  const disabled = chats.length === 0;
+
+  const clearChats = () => {
+    chats.forEach((key) => {
+      localStorage.removeItem(key);
+    });
+    window.dispatchEvent(new Event("storage"));
+    router.push("/");
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger
+        className="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-8 rounded-sm px-3 text-xs justify-start gap-2 w-full"
+        disabled={disabled}
+      >
+        <TrashIcon className="w-4 h-4" />
+        <span>Clear chats</span>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader className="space-y-2">
+          <DialogDescription className="text-xs">
+            Are you sure you want to delete all chats? This action cannot be
+            undone.
+          </DialogDescription>
+          <div className="flex justify-end gap-2">
+            <DialogClose className="border border-input bg-background hover:bg-accent hover:text-accent-foreground px-3 py-2 rounded-sm text-xs">
+              Cancel
+            </DialogClose>
+            <DialogClose
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90 px-3 py-2 rounded-sm text-xs"
+              onClick={() => clearChats()}
+            >
+              Delete
+            </DialogClose>
+          </div>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/settings-theme-toggle.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import * as React from "react";
+
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import { useTheme } from "next-themes";
+
+import { useHasMounted } from "@/lib/utils";
+import { Button } from "./ui/button";
+
+export default function SettingsThemeToggle() {
+  const hasMounted = useHasMounted();
+  const { setTheme, theme } = useTheme();
+
+  if (!hasMounted) {
+    return null;
+  }
+
+  const nextTheme = theme === "light" ? "dark" : "light";
+
+  return (
+    <Button
+      className="justify-start gap-2 w-full"
+      size="sm"
+      variant="ghost"
+      onClick={() => setTheme(nextTheme)}
+    >
+      {nextTheme === "light" ? (
+        <SunIcon className="w-4 h-4" />
+        ) : (
+        <MoonIcon className="w-4 h-4" />
+      )}
+      <p>{nextTheme === "light" ? "Light mode" : "Dark mode"}</p>
+    </Button>
+  );
+}

src/components/settings.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import ClearChatsButton from "./settings-clear-chats";
+import SettingsThemeToggle from "./settings-theme-toggle";
+import SystemPrompt, { SystemPromptProps } from "./system-prompt";
+import { Input } from "./ui/input";
+
+const TemperatureSlider = ({
+  chatOptions,
+  setChatOptions,
+}: SystemPromptProps) => {
+  const handleTemperatureChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setChatOptions({ ...chatOptions, temperature: parseFloat(e.target.value) });
+  };
+
+  return (
+    <div>
+      <div className="mx-2 flex align-middle gap-4 items-center justify-between
+      ">
+        <label
+          htmlFor="small-input"
+          className="text-xs font-medium text-gray-900 dark:text-white align-middle"
+        >
+          Temperature
+        </label>
+        <Input
+          type="text"
+          id="small-input"
+          className="w-1/4 text-gray-900 hover:border hover:border-gray-300 rounded-sm hover:bg-gray-200 text-xs focus:ring-blue-500 focus:border-blue-500 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 h-6
+          text-right
+          "
+          value={chatOptions.temperature}
+          onChange={handleTemperatureChange}
+          min={0}
+          max={2}
+          step={0.1}
+        />
+      </div>
+
+      <div className="p-2">
+        <input
+          id="labels-range-input"
+          type="range"
+          value={chatOptions.temperature}
+          onChange={handleTemperatureChange}
+          min="0.0"
+          max="2.0"
+          step="0.1"
+          className="w-full h-1 bg-gray-200 rounded-sm appearance-none cursor-pointer range-sm dark:bg-gray-700"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default function Settings({
+  chatOptions,
+  setChatOptions,
+}: SystemPromptProps) {
+  return (
+    <>
+      <SystemPrompt chatOptions={chatOptions} setChatOptions={setChatOptions} />
+      <TemperatureSlider
+        chatOptions={chatOptions}
+        setChatOptions={setChatOptions}
+      />
+      <SettingsThemeToggle />
+      <ClearChatsButton />
+    </>
+  );
+}

src/components/sidebar-skeleton.tsx

@@ -0,0 +1,33 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function SidebarSkeleton() {
+  return (
+    <div className="flex flex-col w-full gap-2 ">
+      <div className="flex h-14 w-full bg-primary/5 justify-between rounded-md items-center p-2">
+        <Skeleton className="h-6 w-2/3 rounded-sm" />
+        <Skeleton className="h-6 w-6 rounded-md" />
+      </div>
+
+      <div className="flex h-14 w-full bg-primary/5 opacity-80 justify-between rounded-md items-center p-2">
+        <Skeleton className="h-6 w-2/3 rounded-sm" />
+        <Skeleton className="h-6 w-6 rounded-md" />
+      </div>
+
+      <div className="flex h-14 w-full bg-primary/5 opacity-60 justify-between rounded-md items-center p-2">
+        <Skeleton className="h-6 w-2/3 rounded-sm" />
+        <Skeleton className="h-6 w-6 rounded-md" />
+      </div>
+
+      <div className="flex h-14 w-full bg-primary/5 opacity-40 justify-between rounded-md items-center p-2">
+        <Skeleton className="h-6 w-2/3 rounded-sm" />
+        <Skeleton className="h-6 w-6 rounded-md" />
+      </div>
+
+      <div className="flex h-14 w-full bg-primary/5 opacity-20 justify-between rounded-md items-center p-2">
+        <Skeleton className="h-6 w-2/3 rounded-sm" />
+        <Skeleton className="h-6 w-6 rounded-md" />
+      </div>
+      
+    </div>
+  );
+}

src/components/sidebar-tabs.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import React from "react";
+
+import { DialogClose } from "@radix-ui/react-dialog";
+import { ChatBubbleIcon, GearIcon, TrashIcon } from "@radix-ui/react-icons";
+import * as Tabs from "@radix-ui/react-tabs";
+import { Message } from "ai/react";
+import Link from "next/link";
+
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ChatOptions } from "./chat/chat-options";
+import Settings from "./settings";
+import SidebarSkeleton from "./sidebar-skeleton";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+
+interface Chats {
+  [key: string]: { chatId: string; messages: Message[] }[];
+}
+interface SidebarTabsProps {
+  isLoading: boolean;
+  localChats: Chats;
+  selectedChatId: string;
+  chatOptions: ChatOptions;
+  setChatOptions: React.Dispatch<React.SetStateAction<ChatOptions>>;
+  handleDeleteChat: (chatId: string) => void;
+}
+
+const SidebarTabs = ({
+  localChats,
+  selectedChatId,
+  isLoading,
+  chatOptions,
+  setChatOptions,
+  handleDeleteChat,
+}: SidebarTabsProps) => (
+  <Tabs.Root
+    className="overflow-hidden h-full bg-accent/20 dark:bg-card/35"
+    defaultValue="chats"
+  >
+    <div className=" text-sm o h-full">
+      <Tabs.Content className="h-screen overflow-y-auto" value="chats">
+        <div className="h-full mb-28">
+          {Object.keys(localChats).length > 0 && (
+            <>
+              {Object.keys(localChats).map((group, index) => (
+                <div key={index} className="flex flex-col py-2 pl-3 pr-1 gap-2 mb-8">
+                  <p className="px-2 text-xs font-medium text-muted-foreground">
+                    {group}
+                  </p>
+                  <ol>
+                    {localChats[group].map(
+                      ({ chatId, messages }, chatIndex) => {
+                        const isSelected =
+                          chatId.substring(5) === selectedChatId;
+                        return (
+                          <li
+                            className="flex w-full items-center relative"
+                            key={chatIndex}
+                          >
+                            <div className="flex-col w-full truncate">
+                              <Link
+                                href={`/chats/${chatId.substring(5)}`}
+                                className={cn(
+                                  {
+                                    [buttonVariants({
+                                      variant: "secondaryLink",
+                                    })]: isSelected,
+                                    [buttonVariants({ variant: "ghost" })]:
+                                      !isSelected,
+                                  },
+                                  "flex gap-2 p-2 justify-start"
+                                )}
+                              >
+                                <span className="text-sm font-normal max-w-[184px] truncate">
+                                  {messages.length > 0
+                                    ? messages[0].content
+                                    : ""}
+                                </span>
+                              </Link>
+                            </div>
+                            <div className="absolute right-0 rounded-xs">
+                              <Dialog>
+                                <DialogTrigger
+                                  className={
+                                    "items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50  h-8 rounded-sm px-3 text-xs justify-start gap-2 w-full hover:text-red-500 hover:bg-card dark:hover:bg-accent" +
+                                    (isSelected
+                                      ? " bg-accent dark:bg-card"
+                                      : " ")
+                                  }
+                                >
+                                  <TrashIcon className="w-4 h-4" />
+                                </DialogTrigger>
+                                <DialogContent>
+                                  <DialogHeader className="space-y-4">
+                                    <DialogTitle>Delete chat?</DialogTitle>
+                                    <DialogDescription>
+                                      Are you sure you want to delete this chat?
+                                      This action cannot be undone.
+                                    </DialogDescription>
+                                    <div className="flex justify-end gap-2">
+                                      <DialogClose className="border border-input bg-background hover:bg-accent hover:text-accent-foreground px-4 py-2 rounded-sm">
+                                        Cancel
+                                      </DialogClose>
+
+                                      <DialogClose
+                                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90 px-4 py-2 rounded-sm"
+                                        onClick={() => handleDeleteChat(chatId)}
+                                      >
+                                        Delete
+                                      </DialogClose>
+                                    </div>
+                                  </DialogHeader>
+                                </DialogContent>
+                              </Dialog>
+                            </div>
+                          </li>
+                        );
+                      }
+                    )}
+                  </ol>
+                </div>
+              ))}
+            </>
+          )}
+          {isLoading && <SidebarSkeleton />}
+        </div>
+      </Tabs.Content>
+      <Tabs.Content className="h-screen overflow-y-auto" value="settings">
+        <div className="h-full mb-16 pl-2">
+          <Settings chatOptions={chatOptions} setChatOptions={setChatOptions} />
+        </div>
+      </Tabs.Content>
+    </div>
+    <div className="sticky left-0 right-0 bottom-0 z-20  m-0 overflow-hidden">
+      <Tabs.List
+        className="flex flex-wrap -mb-px py-2 text-sm font-medium text-center justify-center gap-2 bg-accent dark:bg-card"
+        aria-label="Navigation"
+      >
+        <Tabs.Trigger
+          className="inline-flex items-center justify-center p-0.5 rounded-sm data-[state=active]:bg-gray-200 dark:data-[state=active]:bg-gray-700 h-10 w-10"
+          value="chats"
+        >
+          <ChatBubbleIcon className="w-5 h-5" />
+          {/* <span className="text-xs">Chats</span> */}
+        </Tabs.Trigger>
+        <Tabs.Trigger
+          className="inline-flex items-center justify-center p-0.5 rounded-sm data-[state=active]:bg-gray-200 dark:data-[state=active]:bg-gray-700 h-10 w-10"
+          value="settings"
+        >
+          <GearIcon className="w-5 h-5" />
+          {/* <span className="text-xs">Settings</span> */}
+        </Tabs.Trigger>
+      </Tabs.List>
+    </div>
+  </Tabs.Root>
+);
+
+export default SidebarTabs;

src/components/sidebar.tsx

@@ -0,0 +1,163 @@
+"use client";
+import { useEffect, useState } from "react";
+
+import { Pencil2Icon } from "@radix-ui/react-icons";
+import { Message } from "ai/react";
+import Image from "next/image";
+
+import OllamaLogo from "../../public/ollama.png";
+import { ChatOptions } from "./chat/chat-options";
+import SidebarTabs from "./sidebar-tabs";
+import Link from "next/link";
+
+interface SidebarProps {
+  isCollapsed: boolean;
+  onClick?: () => void;
+  isMobile: boolean;
+  chatId: string;
+  setChatId: React.Dispatch<React.SetStateAction<string>>;
+  chatOptions: ChatOptions;
+  setChatOptions: React.Dispatch<React.SetStateAction<ChatOptions>>;
+}
+
+interface Chats {
+  [key: string]: { chatId: string; messages: Message[] }[];
+}
+
+export function Sidebar({
+  isCollapsed,
+  isMobile,
+  chatId,
+  setChatId,
+  chatOptions,
+  setChatOptions,
+}: SidebarProps) {
+  const [localChats, setLocalChats] = useState<Chats>({});
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    setLocalChats(getLocalstorageChats());
+    const handleStorageChange = () => {
+      setLocalChats(getLocalstorageChats());
+    };
+    window.addEventListener("storage", handleStorageChange);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+    };
+  }, [chatId]);
+
+  const getLocalstorageChats = (): Chats => {
+    const chats = Object.keys(localStorage).filter((key) =>
+      key.startsWith("chat_")
+    );
+
+    if (chats.length === 0) {
+      setIsLoading(false);
+    }
+
+    // Map through the chats and return an object with chatId and messages
+    const chatObjects = chats.map((chat) => {
+      const item = localStorage.getItem(chat);
+      return item
+        ? { chatId: chat, messages: JSON.parse(item) }
+        : { chatId: "", messages: [] };
+    });
+
+    // Sort chats by the createdAt date of the first message of each chat
+    chatObjects.sort((a, b) => {
+      const aDate = new Date(a.messages[0].createdAt);
+      const bDate = new Date(b.messages[0].createdAt);
+      return bDate.getTime() - aDate.getTime();
+    });
+
+    const groupChatsByDate = (
+      chats: { chatId: string; messages: Message[] }[]
+    ) => {
+      const today = new Date();
+      const yesterday = new Date(today);
+      yesterday.setDate(yesterday.getDate() - 1);
+
+      const groupedChats: Chats = {};
+
+      chats.forEach((chat) => {
+        const createdAt = new Date(chat.messages[0].createdAt ?? "");
+        const diffInDays = Math.floor(
+          (today.getTime() - createdAt.getTime()) / (1000 * 3600 * 24)
+        );
+
+        let group: string;
+        if (diffInDays === 0) {
+          group = "Today";
+        } else if (diffInDays === 1) {
+          group = "Yesterday";
+        } else if (diffInDays <= 7) {
+          group = "Previous 7 Days";
+        } else if (diffInDays <= 30) {
+          group = "Previous 30 Days";
+        } else {
+          group = "Older";
+        }
+
+        if (!groupedChats[group]) {
+          groupedChats[group] = [];
+        }
+        groupedChats[group].push(chat);
+      });
+
+      return groupedChats;
+    };
+
+    setIsLoading(false);
+    const groupedChats = groupChatsByDate(chatObjects);
+
+    return groupedChats;
+  };
+
+  const handleDeleteChat = (chatId: string) => {
+    localStorage.removeItem(chatId);
+    setLocalChats(getLocalstorageChats());
+  };
+
+  return (
+    <div
+      data-collapsed={isCollapsed}
+      className="relative justify-between group bg-accent/20 dark:bg-card/35 flex flex-col h-full gap-4 data-[collapsed=true]:p-0 data-[collapsed=true]:hidden"
+    >
+      <div className="sticky left-0 right-0 top-0 z-20 p-1 rounded-sm m-2">
+        <Link
+          className="flex w-full h-10 text-sm font-medium items-center
+          border border-input bg-background hover:bg-accent hover:text-accent-foreground
+          px-2 py-2 rounded-sm"
+          href="/"
+          onClick={() => {
+            setChatId("");
+          }}
+        >
+          <div className="flex gap-3 p-2 items-center justify-between w-full">
+            <div className="flex align-start gap-2">
+              {!isCollapsed && !isMobile && (
+                <Image
+                  src={OllamaLogo}
+                  alt="AI"
+                  width={14}
+                  height={14}
+                  className="dark:invert 2xl:block"
+                />
+              )}
+              <span>New chat</span>
+            </div>
+            <Pencil2Icon className="w-4 h-4" />
+          </div>
+        </Link>
+      </div>
+      <SidebarTabs
+        isLoading={isLoading}
+        localChats={localChats}
+        selectedChatId={chatId}
+        chatOptions={chatOptions}
+        setChatOptions={setChatOptions}
+        handleDeleteChat={handleDeleteChat}
+      />
+    </div>
+  );
+}

src/components/system-prompt.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+import { toast } from "sonner";
+import { useDebounce } from "use-debounce";
+
+import { useHasMounted } from "@/lib/utils";
+import { ChatOptions } from "./chat/chat-options";
+import { Textarea } from "./ui/textarea";
+
+export interface SystemPromptProps {
+  chatOptions: ChatOptions;
+  setChatOptions: Dispatch<SetStateAction<ChatOptions>>;
+}
+export default function SystemPrompt({
+  chatOptions,
+  setChatOptions,
+}: SystemPromptProps) {
+  const hasMounted = useHasMounted();
+
+  const systemPrompt = chatOptions ? chatOptions.systemPrompt : "";
+  const [text, setText] = useState<string>(systemPrompt || "");
+  const [debouncedText] = useDebounce(text, 500);
+
+  useEffect(() => {
+    if (!hasMounted) {
+      return;
+    }
+    if (debouncedText !== systemPrompt) {
+      setChatOptions({ ...chatOptions, systemPrompt: debouncedText });
+      toast.success("System prompt updated", { duration: 1000 });
+    }
+  }, [hasMounted, debouncedText]);
+
+  return (
+    <div>
+      <div className="justify-start gap-2 w-full rounded-sm px-2 text-xs">
+        <p>System prompt</p>
+      </div>
+
+      <div className="m-2">
+        <Textarea
+          className="resize-none bg-white/20 dark:bg-card/35"
+          autoComplete="off"
+          rows={7}
+          value={text}
+          onChange={(e) => setText(e.currentTarget.value)}
+          name="systemPrompt"
+          placeholder="You are a helpful assistant."
+        />
+      </div>
+    </div>
+  );
+}

src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 border border-black bg-black p-0.5 text-white transition-colors enabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:hover:bg-white",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "dark:bg-card/60 bg-accent/20 text-secondary-foreground hover:bg-secondary/60 hover:dark:bg-card/40",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        secondaryLink: "bg-accent/90 dark:bg-secondary/80 text-secondary-foreground dark:hover:bg-secondary hover:bg-accent",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-sm px-3 text-xs",
+        lg: "h-10 rounded-sm px-8",
+        icon: "h-10 w-10",
+        iconSm: "h-8 w-8"
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-md border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/dialog.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import * as React from "react"
+
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-start sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog, DialogClose,
+  DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger
+}

src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-sm border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

src/components/ui/sheet.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import * as React from "react";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { CrossCircledIcon } from "@radix-ui/react-icons";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+    </SheetPrimitive.Content>
+    <SheetPrimitive.Close className="absolute w-1/4 pl-4 pt-4 z-200 right-0 top-0 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <CrossCircledIcon className="h-8 w-8" />
+      <span className="sr-only">Close</span>
+    </SheetPrimitive.Close>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};

src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-sm bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

src/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/components/ui/tabs.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-sm bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

src/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex w-full border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

src/components/ui/tooltip.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-sm bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

src/lib/mistral-tokenizer-js.d.ts

@@ -0,0 +1,3 @@
+declare module "mistral-tokenizer-js" {
+    export function encode(input: string): string[];
+}

src/lib/token-counter.ts

@@ -0,0 +1,21 @@
+import { Message } from "ai";
+import mistralTokenizer from "mistral-tokenizer-js";
+import { ChatCompletionMessageParam } from "openai/resources/index.mjs";
+
+export const tokenLimit = process.env.NEXT_PUBLIC_TOKEN_LIMIT ? parseInt(process.env.NEXT_PUBLIC_TOKEN_LIMIT) : 4096;
+
+export const encodeChat = (
+  messages: Message[] | ChatCompletionMessageParam[]
+): number => {
+  const tokensPerMessage = 3;
+  let numTokens = 0;
+  for (const message of messages) {
+    numTokens += tokensPerMessage;
+    numTokens += mistralTokenizer.encode(message.role).length;
+    if (typeof message.content === "string") {
+      numTokens += mistralTokenizer.encode(message.content).length;
+    }
+  }
+  numTokens += 3;
+  return numTokens;
+};