setup postgres and kyseley for most data instead of milvus

layouts/LayoutDefault.tsx

@@ -1,15 +1,62 @@
 import "@mantine/core/styles.css";
-import { AppShell, Burger, Group, Image, MantineProvider } from "@mantine/core";
+import {
+  AppShell,
+  Burger,
+  Group,
+  Image,
+  MantineProvider,
+  NavLink,
+} from "@mantine/core";
+import {
+  IconHome2,
+  IconChevronRight,
+  IconActivity,
+  IconTrash,
+  IconCircle,
+  IconCircleFilled,
+  IconTrashFilled,
+} from "@tabler/icons-react";
 import { useDisclosure } from "@mantine/hooks";
 import theme from "./theme.js";
-
 import logoUrl from "../assets/logo.svg";
-import { Link } from "../components/Link";
+import { useStore } from "../state.js";
+import { useEffect } from "react";
+import { trpc } from "../trpc/client.js";
+import { usePageContext } from "vike-react/usePageContext";
+import "./hover.css";
+import type { ConversationsId } from "../database/generated/public/Conversations.js";
 
 export default function LayoutDefault({
   children,
 }: { children: React.ReactNode }) {
+  const pageContext = usePageContext();
+  const { urlPathname } = pageContext;
   const [opened, { toggle }] = useDisclosure();
+  const conversations = useStore((state) => state.conversations);
+  const setConversations = useStore((state) => state.setConversations);
+  const addConversation = useStore((state) => state.addConversation);
+  const removeConversation = useStore((state) => state.removeConversation);
+  const conversationId = useStore((state) => state.conversationId);
+
+  useEffect(() => {
+    trpc.chat.listConversations.query().then((res) => {
+      setConversations(res);
+    });
+  }, [setConversations]);
+
+  // useEffect(() => {
+  //   if (isConversationListExpanded) {
+  //     trpc.chat.listConversations.query().then((res) => {
+  //       setConversations(res);
+  //     });
+  //   }
+  // }, [isConversationListExpanded]);
+
+  function handleDeleteConversation(conversationId: ConversationsId) {
+    removeConversation(conversationId);
+    trpc.chat.deleteConversation.mutate({ id: conversationId });
+  }
+
   return (
     <MantineProvider theme={theme}>
       <AppShell
@@ -36,10 +83,77 @@ export default function LayoutDefault({
           </Group>
         </AppShell.Header>
         <AppShell.Navbar p="md">
-          <Link href="/" label="Welcome" />
-          <Link href="/todo" label="Todo" />
-          <Link href="/star-wars" label="Data Fetching" />
-          <Link href="/chat" label="Chat" />
+          <NavLink href="/" label="Welcome" active={urlPathname === "/"} />
+          <NavLink href="/todo" label="Todo" active={urlPathname === "/todo"} />
+          <NavLink
+            href="/star-wars"
+            label="Data Fetching"
+            active={urlPathname.startsWith("/star-wars")}
+          />
+          <NavLink
+            key="chat-new"
+            href="#required-for-focus-management"
+            label="Chats"
+            leftSection={<IconActivity size={16} stroke={1.5} />}
+            rightSection={
+              <IconChevronRight
+                size={12}
+                stroke={1.5}
+                className="mantine-rotate-rtl"
+              />
+            }
+            variant="subtle"
+            active={urlPathname.startsWith("/chat")}
+          >
+            {conversations.map((conversation) => (
+              <NavLink
+                key={conversation.id}
+                href={`/chat/${conversation.id}`}
+                label={conversation.title}
+                className="hover-container"
+                leftSection={
+                  <>
+                    <IconCircle
+                      size={16}
+                      stroke={1.5}
+                      className="show-by-default"
+                    />
+                    <IconCircleFilled
+                      size={16}
+                      stroke={1.5}
+                      className="show-on-hover"
+                    />
+                  </>
+                }
+                rightSection={
+                  <>
+                    <IconTrash
+                      size={16}
+                      stroke={1.5}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        handleDeleteConversation(conversation.id);
+                      }}
+                      className="show-by-default"
+                    />
+                    <IconTrashFilled
+                      size={16}
+                      stroke={1.5}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        handleDeleteConversation(conversation.id);
+                      }}
+                      className="show-on-hover border-on-hover"
+                    />
+                  </>
+                }
+                variant="subtle"
+                active={conversation.id === conversationId}
+              />
+            ))}
+          </NavLink>
         </AppShell.Navbar>
         <AppShell.Main> {children} </AppShell.Main>
       </AppShell>

layouts/hover.css

@@ -0,0 +1,20 @@
+.hover-container .show-on-hover {
+  display: none;
+}
+
+.hover-container:hover .show-on-hover {
+  display: block;
+}
+
+.hover-container .show-by-default {
+  display: block;
+}
+
+.hover-container:hover .show-by-default {
+  display: none;
+}
+
+.border-on-hover:hover {
+  border: 1px solid var(--mantine-color-gray-9);
+  border-radius: var(--mantine-radius-sm);
+}