Merge pull request #78 from OctopBP/feature/chat-pin

Added pinning functionality
deiucanta · Feb 5, 2024 · 7088bba · 7088bba
2 parents 74cb1ac + dfc8492
commit 7088bba
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 45 deletions.
diff --git a/src/components/ChatItem.tsx b/src/components/ChatItem.tsx
@@ -0,0 +1,88 @@
+import { ActionIcon, Flex, Menu } from "@mantine/core";
+import {
+	IconDotsVertical,
+	IconMessages,
+	IconPencil,
+	IconPin,
+	IconPinned,
+	IconPinnedOff,
+	IconTrash
+} from "@tabler/icons-react";
+import { Link } from "@tanstack/react-location";
+import { Chat, db } from "../db";
+import { DeleteChatModal } from "./DeleteChatModal";
+import { EditChatModal } from "./EditChatModal";
+import { MainLink } from "./MainLink";
+import { notifications } from "@mantine/notifications";
+
+export function ChatItem({ chat, isActive }: { chat: Chat, isActive: boolean }) {
+	const toggleChatPin = async (chatId: string, event: React.UIEvent) => {
+		try {
+		  event.preventDefault();
+		  await db.chats.where({ id: chatId }).modify((chat) => {
+			chat.pinned = !chat.pinned;
+		  });
+		} catch (error: any) {
+		  if (error.toJSON().message === "Network Error") {
+			notifications.show({
+			  title: "Error",
+			  color: "red",
+			  message: "No internet connection.",
+			});
+		  }
+		  const message = error.response?.data?.error?.message;
+		  if (message) {
+			notifications.show({
+			  title: "Error",
+			  color: "red",
+			  message,
+			});
+		  }
+		}
+	  };
+
+  return (
+    <Flex
+      key={chat.id}
+      className={isActive ? "active" : undefined}
+      sx={(theme) => ({
+        marginTop: 1,
+        "&:hover, &.active": {
+          backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1],
+        },
+      })}
+    >
+      <Link to={`/chats/${chat.id}`} style={{ flex: 1 }}>
+        <MainLink
+          icon={chat.pinned ? <IconPinned size="1rem" /> : <IconMessages size="1rem" />}
+          color="teal"
+          chat={chat}
+          label={chat.description}
+        />
+      </Link>
+      <Menu shadow="md" width={200} keepMounted>
+        <Menu.Target>
+          <ActionIcon sx={{ height: "auto" }}>
+            <IconDotsVertical size={20} />
+          </ActionIcon>
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item
+            icon={chat.pinned ? <IconPinnedOff size="1rem" /> : <IconPin size="1rem" />}
+            onClick={(event) => toggleChatPin(chat.id, event)}
+          >
+            {chat.pinned ? "Remove pin" : "Pin chat"}
+          </Menu.Item>
+          <EditChatModal chat={chat}>
+            <Menu.Item icon={<IconPencil size="1rem" />}>Edit</Menu.Item>
+          </EditChatModal>
+          <DeleteChatModal chat={chat}>
+            <Menu.Item color="red" icon={<IconTrash size="1rem" />}>
+              Delete
+            </Menu.Item>
+          </DeleteChatModal>
+        </Menu.Dropdown>
+      </Menu>
+    </Flex>
+  )
+}
diff --git a/src/components/Chats.tsx b/src/components/Chats.tsx
@@ -1,13 +1,9 @@
-import { ActionIcon, Flex, Menu } from "@mantine/core";
-import { IconDotsVertical, IconMessages } from "@tabler/icons-react";
-import { Link } from "@tanstack/react-location";
+import { Text } from "@mantine/core";
 import { useLiveQuery } from "dexie-react-hooks";
 import { useMemo } from "react";
 import { db } from "../db";
 import { useChatId } from "../hooks/useChatId";
-import { DeleteChatModal } from "./DeleteChatModal";
-import { EditChatModal } from "./EditChatModal";
-import { MainLink } from "./MainLink";
+import { ChatItem } from "./ChatItem";
 
 export function Chats({ search }: { search: string }) {
   const chatId = useChatId();
@@ -23,47 +19,25 @@ export function Chats({ search }: { search: string }) {
     [chats, search]
   );
 
+  const pinnedChats = useMemo(() => filteredChats.filter((chat) => chat.pinned), [filteredChats]);
+  const unpinnedChats = useMemo(() => filteredChats.filter((chat) => !chat.pinned), [filteredChats]);
+
   return (
     <>
-      {filteredChats.map((chat) => (
-        <Flex
-          key={chat.id}
-          className={chatId === chat.id ? "active" : undefined}
-          sx={(theme) => ({
-            marginTop: 1,
-            "&:hover, &.active": {
-              backgroundColor:
-                theme.colorScheme === "dark"
-                  ? theme.colors.dark[6]
-                  : theme.colors.gray[1],
-            },
-          })}
-        >
-          <Link to={`/chats/${chat.id}`} style={{ flex: 1 }}>
-            <MainLink
-              icon={<IconMessages size="1rem" />}
-              color="teal"
-              chat={chat}
-              label={chat.description}
-            />
-          </Link>
-          <Menu shadow="md" width={200} keepMounted>
-            <Menu.Target>
-              <ActionIcon sx={{ height: "auto" }}>
-                <IconDotsVertical size={20} />
-              </ActionIcon>
-            </Menu.Target>
-            <Menu.Dropdown>
-              <EditChatModal chat={chat}>
-                <Menu.Item>Edit</Menu.Item>
-              </EditChatModal>
-              <DeleteChatModal chat={chat}>
-                <Menu.Item>Delete</Menu.Item>
-              </DeleteChatModal>
-            </Menu.Dropdown>
-          </Menu>
-        </Flex>
+      {pinnedChats.length > 0 ? (
+        <>
+          <Text p="xs" fz="xs" fw={700} color="gray" children={"Pinned"} />
+          {pinnedChats.map((chat) => (
+            <ChatItem chat={chat} isActive={chatId === chat.id} />
+          ))}
+
+          {unpinnedChats.length > 0 ? <Text p="xs" fz="xs" fw={700} color="gray" children={"Unpinned"} /> : null}
+        </>
+      ) : null}
+
+      {unpinnedChats.map((chat) => (
+        <ChatItem chat={chat} isActive={chatId === chat.id} />
       ))}
     </>
-  );
+  )
 }
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -140,6 +140,7 @@ export function Layout() {
                       description: "New Chat",
                       totalTokens: 0,
                       createdAt: new Date(),
+                      pinned: false,
                     });
                     navigate({ to: `/chats/${id}` });
                   }}

diff --git a/src/components/Prompts.tsx b/src/components/Prompts.tsx
@@ -91,6 +91,7 @@ export function Prompts({
                     description: "New Chat",
                     totalTokens: 0,
                     createdAt: new Date(),
+                    pinned: false,
                   });
                   await db.messages.add({
                     id: nanoid(),

diff --git a/src/db/index.ts b/src/db/index.ts
@@ -7,6 +7,7 @@ export interface Chat {
   description: string;
   totalTokens: number;
   createdAt: Date;
+  pinned: boolean;
 }
 
 export interface Message {