chore: Update form components to handle pasted files

2024-05-18 20:54:43 +05:30
parent e623cc5ead
commit 8662fd0693
4 changed files with 123 additions and 13 deletions
--- a/src/components/Common/PromptSelect.tsx
+++ b/src/components/Common/PromptSelect.tsx
@@ -0,0 +1,90 @@
+import { useQuery } from "@tanstack/react-query"
+import { Dropdown, Empty, Tooltip } from "antd"
+import { BookIcon, ComputerIcon, ZapIcon } from "lucide-react"
+import React from "react"
+import { useTranslation } from "react-i18next"
+import { getAllPrompts } from "@/db"
+import { useMessageOption } from "@/hooks/useMessageOption"
+
+export const PromptSelect: React.FC = () => {
+  const { t } = useTranslation("option")
+  const {
+    selectedSystemPrompt,
+    setSelectedQuickPrompt,
+    setSelectedSystemPrompt
+  } = useMessageOption()
+
+  const { data } = useQuery({
+    queryKey: ["getAllPromptsForSelect"],
+    queryFn: getAllPrompts
+  })
+  const handlePromptChange = (value?: string) => {
+    if (!value) {
+      setSelectedSystemPrompt(undefined)
+      setSelectedQuickPrompt(undefined)
+      return
+    }
+    const prompt = data?.find((prompt) => prompt.id === value)
+    if (prompt?.is_system) {
+      setSelectedSystemPrompt(prompt.id)
+    } else {
+      setSelectedSystemPrompt(undefined)
+      setSelectedQuickPrompt(prompt!.content)
+    }
+  }
+  return (
+    <>
+      {data && (
+        <Dropdown
+          menu={{
+            items:
+              data.length > 0
+                ? data?.map((prompt) => ({
+                    key: prompt.id,
+                    label: (
+                      <div className="w-52 gap-2 text-lg truncate inline-flex line-clamp-3  items-center  dark:border-gray-700">
+                        <span
+                          key={prompt.title}
+                          className="flex flex-row gap-3 items-center">
+                          {prompt.is_system ? (
+                            <ComputerIcon className="w-4 h-4" />
+                          ) : (
+                            <ZapIcon className="w-4 h-4" />
+                          )}
+                          {prompt.title}
+                        </span>
+                      </div>
+                    ),
+                    onClick: () => {
+                      if (selectedSystemPrompt === prompt.id) {
+                        setSelectedSystemPrompt(undefined)
+                      } else {
+                        handlePromptChange(prompt.id)
+                      }
+                    }
+                  }))
+                : [
+                    {
+                      key: "empty",
+                      label: <Empty />
+                    }
+                  ],
+            style: {
+              maxHeight: 500,
+              overflowY: "scroll"
+            },
+            className: "no-scrollbar",
+            activeKey: selectedSystemPrompt
+          }}
+          placement={"topLeft"}
+          trigger={["click"]}>
+          <Tooltip title={t("selectAPrompt")}>
+            <button type="button" className="dark:text-gray-300">
+              <BookIcon className="h-5 w-5" />
+            </button>
+          </Tooltip>
+        </Dropdown>
+      )}
+    </>
+  )
+}