+
+
+ System Prompt
+
+
+
+
+ {
+ setSystemPromptForNonRagOption(ollamaPrompt)
+ }}
+ className="mt-2"
+ />
+
+
+ )
+}
diff --git a/src/components/Option/Sidebar.tsx b/src/components/Option/Sidebar.tsx
new file mode 100644
index 0000000..650d8f2
--- /dev/null
+++ b/src/components/Option/Sidebar.tsx
@@ -0,0 +1,61 @@
+import { useQuery } from "@tanstack/react-query"
+import {
+ PageAssitDatabase,
+ formatToChatHistory,
+ formatToMessage
+} from "~libs/db"
+import { Empty, Skeleton } from "antd"
+import { useMessageOption } from "~hooks/useMessageOption"
+
+type Props = {}
+
+export const Sidebar = ({}: Props) => {
+ const { setMessages, setHistory, setHistoryId } = useMessageOption()
+
+ const { data: chatHistories, status } = useQuery({
+ queryKey: ["fetchChatHistory"],
+ queryFn: async () => {
+ const db = new PageAssitDatabase()
+ const history = await db.getChatHistories()
+ return history
+ }
+ })
+
+ return (
+
+ {status === "success" && chatHistories.length === 0 && (
+
+
+
+ )}
+ {status === "pending" && (
+
+
+
+ )}
+ {status === "error" && (
+
+ Error loading history
+
+ )}
+ {status === "success" && chatHistories.length > 0 && (
+
+ {chatHistories.map((chat, index) => (
+ {
+ const db = new PageAssitDatabase()
+ const history = await db.getChatHistory(chat.id)
+ setHistoryId(chat.id)
+ setHistory(formatToChatHistory(history))
+ setMessages(formatToMessage(history))
+ }}
+ key={index}
+ className="flex text-start py-2 px-2 cursor-pointer items-start gap-3 relative rounded-md truncate hover:pr-4 group transition-opacity duration-300 ease-in-out bg-gray-100 dark:bg-[#232222] dark:text-gray-100 text-gray-800 border hover:bg-gray-200 dark:hover:bg-[#2d2d2d] dark:border-gray-800">
+ {chat.title}
+
+ ))}
+
+ )}
+
+ )
+}
diff --git a/src/components/Settings/index.tsx b/src/components/Settings/index.tsx
deleted file mode 100644
index 51d3669..0000000
--- a/src/components/Settings/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";
-import { ClipboardIcon } from "@heroicons/react/24/outline";
-import { api } from "~/utils/api";
-
-export default function SettingsBody() {
- const { data, status } = api.settings.getAccessToken.useQuery();
- const [isCopied, setIsCopied] = React.useState(false);
-
- return (
- <>
- {status === "loading" && Loading...
}
- {status === "success" && (
-