chore: Update form components to handle pasted files

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>
+      )}
+    </>
+  )
+}

src/components/Layouts/Layout.tsx

@@ -12,6 +12,7 @@ import {
   ComputerIcon,
   GithubIcon,
   PanelLeftIcon,
+  SlashIcon,
   SquarePen,
   ZapIcon
 } from "lucide-react"
@@ -21,6 +22,8 @@ import { useTranslation } from "react-i18next"
 import { OllamaIcon } from "../Icons/Ollama"
 import { SelectedKnowledge } from "../Option/Knowledge/SelectedKnwledge"
 import { useStorage } from "@plasmohq/storage/hook"
+import { ModelSelect } from "../Common/ModelSelect"
+import { PromptSelect } from "../Common/PromptSelect"
 
 export default function OptionLayout({
   children
@@ -89,7 +92,7 @@ export default function OptionLayout({
                   <NavLink
                     to="/"
                     className="text-gray-500 items-center dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
-                    <ChevronLeft className="w-6 h-6" />
+                    <ChevronLeft className="w-4 h-4" />
                   </NavLink>
                 </div>
               )}
@@ -103,15 +106,17 @@ export default function OptionLayout({
               <div>
                 <button
                   onClick={clearChat}
-                  className="inline-flex dark:bg-transparent bg-white items-center rounded-lg border  dark:border-gray-700 bg-transparent px-3 py-3 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">
+                  className="inline-flex  dark:bg-transparent bg-white items-center rounded-lg 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">
-                  <SquarePen className="h-4 w-4 mr-3" />
+                  <SquarePen className="h-5 w-5 " />
+                  <span className=" truncate ml-3">
                     {t("newChat")}
+                  </span>
                 </button>
               </div>
               <span className="text-lg font-thin text-zinc-300 dark:text-zinc-600">
                 {"/"}
               </span>
-              <div>
+              <div className="hidden lg:block">
                 <Select
                   value={selectedModel}
                   onChange={(e) => {
@@ -141,10 +146,13 @@ export default function OptionLayout({
                   }))}
                 />
               </div>
+              <div className="lg:hidden">
+                <ModelSelect />
+              </div>
               <span className="text-lg font-thin text-zinc-300 dark:text-zinc-600">
                 {"/"}
               </span>
-              <div>
+              <div className="hidden lg:block">
                 <Select
                   size="large"
                   loading={isPromptLoading}
@@ -177,6 +185,9 @@ export default function OptionLayout({
                   }))}
                 />
               </div>
+              <div className="lg:hidden">
+                <PromptSelect />
+              </div>
               <SelectedKnowledge />
             </div>
             <div className="flex flex-1 justify-end px-4">
@@ -190,7 +201,7 @@ export default function OptionLayout({
                     <a
                       href="https://github.com/n4ze3m/page-assist"
                       target="_blank"
-                      className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
+                      className="!text-gray-500 hidden lg:block dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                       <GithubIcon className="w-6 h-6" />
                     </a>
                   </Tooltip>

src/components/Option/Knowledge/SelectedKnwledge.tsx

@@ -1,5 +1,6 @@
 import { Blocks, XIcon } from "lucide-react"
 import { useMessageOption } from "@/hooks/useMessageOption"
+import { Tooltip } from "antd"
 
 export const SelectedKnowledge = () => {
   const { selectedKnowledge: knowledge, setSelectedKnowledge } =
@@ -13,12 +14,16 @@ export const SelectedKnowledge = () => {
         {"/"}
       </span>
       <div className="border flex  justify-between items-center rounded-full px-2 py-1 gap-2 bg-gray-100 dark:bg-slate-800 dark:border-slate-700">
-        <div className="inline-flex items-center gap-2">
+        <Tooltip
+        title={knowledge.title}
+        >
+        <div className="inline-flex truncate items-center gap-2">
           <Blocks className="h-5  w-5 text-gray-400" />
-          <span className="text-xs font-semibold dark:text-gray-100">
+          <span className="text-xs hidden lg:inline-block  font-semibold dark:text-gray-100">
             {knowledge.title}
           </span>
         </div>
+        </Tooltip>
         <div>
           <button
             onClick={() => setSelectedKnowledge(null)}

src/components/Option/Models/index.tsx

@@ -91,6 +91,9 @@ export const ModelsBody = () => {
         {status === "pending" && <Skeleton paragraph={{ rows: 8 }} />}
 
         {status === "success" && (
+          <div
+          className="overflow-x-auto"
+          >
             <Table
             columns={[
               {
@@ -207,6 +210,7 @@ export const ModelsBody = () => {
             dataSource={data}
             rowKey={(record) => `${record.model}-${record.digest}`}
           />
+          </div>
         )}
       </div>