feat: directly edit chat name

src/components/ChatHeader.tsx

@@ -0,0 +1,79 @@
+import { ActionIcon, Box, Header, TextInput, Tooltip } from "@mantine/core";
+import { IconAdjustments } from "@tabler/icons-react";
+import { EditChatModal } from "./EditChatModal";
+import { Chat, detaDB } from "../db";
+import { useEffect, useRef, useState } from "react";
+import { useChat, useChats } from "../hooks/contexts";
+import { useDebouncedValue } from "@mantine/hooks";
+import { notifications } from "@mantine/notifications";
+
+export function ChatHeader() {
+    const [title, setTitle] = useState('')
+    const [debounced] = useDebouncedValue(title, 800);
+
+    const { chat, setChat } = useChat()
+    const { setChats } = useChats()
+
+    useEffect(() => {
+        if (chat?.description) setTitle(chat.description)
+    }, [chat])
+
+    useEffect(() => {
+        const save = async () => {
+            if (!chat || !debounced || debounced === chat.description) return
+            await detaDB.chats.update({ description: title }, chat!.key)
+            setChat(current => ({ ...(current as Chat), description: title }))
+            setChats(current => (current || []).map(item => {
+                if (item.key === chat.key) {
+                    return { ...item, description: title };
+                }
+          
+                return item;
+            }))
+
+            notifications.show({
+                title: "Saved",
+                message: "Chat name updated.",
+            });
+        }
+
+        save()
+    }, [debounced])
+
+    const ref = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (title && ref.current) {
+            ref.current.size = Math.max(title.length - 1, 8)
+        }
+    }, [title])
+
+    return (
+        <Header height={60} p="xs" className="app-region-drag">
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <div></div>
+
+            <TextInput
+                id="chat-name"
+                ref={ref}
+                placeholder="Chat Name"
+                variant="unstyled"
+                value={title}
+                onChange={(event) => setTitle(event.currentTarget.value)}
+                styles={{ input: { fontSize: '1rem', textAlign: 'center' } }}
+                autoComplete="off"
+                data-lpignore="true"
+                data-form-type="other"
+            />
+
+            <EditChatModal chat={chat!}>
+            <Tooltip label="Chat Settings">
+                <ActionIcon size="xl">
+                <IconAdjustments size={20} />
+                </ActionIcon>
+            </Tooltip>
+            </EditChatModal>
+        </Box>
+    </Header>
+    )
+}

src/components/CreatePromptModal.tsx

@@ -117,6 +117,9 @@ export function CreatePromptModal({ content, title: titleProp, open: openProp }:
               onChange={(event) => setTitle(event.currentTarget.value)}
               formNoValidate
               data-autofocus
+              autoComplete="off"
+              data-lpignore="true"
+              data-form-type="other"
             />
             <SimpleGrid
               spacing="xs"

src/components/EditChatModal.tsx

@@ -139,6 +139,9 @@ export function EditChatModal({
               onChange={(event) => setValue(event.currentTarget.value)}
               formNoValidate
               data-autofocus
+              autoComplete="off"
+              data-lpignore="true"
+              data-form-type="other"
             />
             <Select
               value={promptKey}

src/components/EditPromptModal.tsx

@@ -102,6 +102,9 @@ export function EditPromptModal({ prompt }: { prompt: Prompt }) {
               onChange={(event) => setTitle(event.currentTarget.value)}
               formNoValidate
               data-autofocus
+              autoComplete="off"
+              data-lpignore="true"
+              data-form-type="other"
             />
             <SimpleGrid
               spacing="xs"

src/components/Layout.tsx

@@ -4,7 +4,6 @@ import {
   Box,
   Burger,
   Button,
-  Header,
   MediaQuery,
   Navbar,
   rem,
@@ -16,7 +15,6 @@ import {
   useMantineTheme,
 } from "@mantine/core";
 import {
-  IconAdjustments,
   IconPlus,
   IconSearch,
   IconSettings,
@@ -33,7 +31,7 @@ import { Prompts } from "./Prompts";
 import { SettingsModal } from "./SettingsModal";
 import { config } from "../utils/config";
 import { ChatContext, ChatsContext, PromptsContext, SettingsContext } from "../hooks/contexts";
-import { EditChatModal } from "./EditChatModal";
+import { ChatHeader } from "./ChatHeader";
 
 declare global {
   interface Window {
@@ -344,29 +342,7 @@ export function Layout() {
               }
               header={
                 chat ? (
-                  <Header height={60} p="xs" className="app-region-drag">
-                    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                      <div></div>
-                      <div
-                        style={{
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          height: "100%",
-                        }}
-                      >
-                        {chat.description}
-                      </div>
-
-                      <EditChatModal chat={chat}>
-                        <Tooltip label="Chat Settings">
-                          <ActionIcon size="xl">
-                            <IconAdjustments size={20} />
-                          </ActionIcon>
-                        </Tooltip>
-                      </EditChatModal>
-                    </Box>
-                  </Header>
+                  <ChatHeader />
                 ) : undefined
               }
               layout="alt"