feat: Introduce temporary chat mode

Adds a new "Temporary Chat" mode for quick, non-persistent conversations. The new mode is available in the header bar and will trigger a visually distinct chat experience with a temporary background color. Temporary chats do not save to the chat history and are meant for short, one-off interactions. This feature enhances flexibility and provides a more convenient option for users who need to quickly interact with the AI without committing the conversation to their history.
2024-11-09 19:10:34 +05:30
parent 8fbdfc35d3
commit f8791a0707
21 changed files with 167 additions and 52 deletions
--- a/src/components/Layouts/NewChat.tsx
+++ b/src/components/Layouts/NewChat.tsx
@@ -0,0 +1,57 @@
+import { SquarePen, MoreHorizontal, TimerReset } from "lucide-react"
+import { useTranslation } from "react-i18next"
+import { Dropdown, Switch } from "antd"
+import type { MenuProps } from "antd"
+import { useMessageOption } from "@/hooks/useMessageOption"
+
+type Props = {
+  clearChat: () => void
+}
+
+export const NewChat: React.FC<Props> = ({ clearChat }) => {
+  const { t } = useTranslation(["option", "common"])
+
+  const { temporaryChat, setTemporaryChat, messages } = useMessageOption()
+
+  const items: MenuProps["items"] = [
+    {
+      key: "1",
+      label: (
+        <label className="flex items-center gap-6 justify-between px-1 py-0.5 cursor-pointer w-full">
+          <div className="flex items-center gap-2">
+            <TimerReset className="h-4 w-4 text-gray-600" />
+            <span>
+                {t("temporaryChat")}
+            </span>
+          </div>
+          <Switch
+            checked={temporaryChat}
+            onChange={(checked) => {
+              setTemporaryChat(checked)
+              // just like chatgpt
+              if (messages.length > 0) {
+                clearChat()
+              }
+            }}
+            size="small"
+          />
+        </label>
+      )
+    }
+  ]
+  return (
+    <div className="flex items-center justify-between">
+      <button
+        onClick={clearChat}
+        className="inline-flex dark:bg-transparent  bg-white items-center rounded-r-none rounded-lg border dark:border-gray-700 bg-transparent px-3 py-2.5 pr-6 text-xs lg:text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 ease-in-out transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white">
+        <SquarePen className="h-5 w-5" />
+        <span className="truncate ml-3">{t("newChat")}</span>
+      </button>
+      <Dropdown menu={{ items }} trigger={["click"]}>
+        <button className="inline-flex dark:bg-transparent bg-white items-center rounded-lg border-l-0 rounded-l-none border dark:border-gray-700 bg-transparent px-3 py-2.5 text-xs lg:text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 ease-in-out transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white">
+          <MoreHorizontal className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+        </button>
+      </Dropdown>
+    </div>
+  )
+}