fix: missing fields from API Keys section

frontend/src/components/Dropdown.tsx

@@ -14,8 +14,6 @@ function Dropdown({
   showDelete,
   onDelete,
   placeholder,
-  fullWidth,
-  alignMidddle,
 }: {
   options:
     | string[]
@@ -33,8 +31,6 @@ function Dropdown({
   showDelete?: boolean;
   onDelete?: (value: string) => void;
   placeholder?: string;
-  fullWidth?: boolean;
-  alignMidddle?: boolean;
 }) {
   const [isOpen, setIsOpen] = React.useState(false);
   return (
@@ -58,9 +54,7 @@ function Dropdown({
           </span>
         ) : (
           <span
-            className={`${
-              alignMidddle && 'flex-1'
-            } overflow-hidden text-ellipsis dark:text-bright-gray ${
+            className={`overflow-hidden text-ellipsis dark:text-bright-gray ${
               !selectedValue && 'text-silver dark:text-gray-400'
             }`}
           >
@@ -91,7 +85,7 @@ function Dropdown({
                   onSelect(option);
                   setIsOpen(false);
                 }}
-                className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray"
+                className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray"
               >
                 {typeof option === 'string'
                   ? option

frontend/src/models/misc.ts

@@ -30,7 +30,12 @@ export type DocumentsProps = {
 
 export type CreateAPIKeyModalProps = {
   close: () => void;
-  createAPIKey: (payload: { name: string; source: string }) => void;
+  createAPIKey: (payload: {
+    name: string;
+    source: string;
+    prompt_id: string;
+    chunks: string;
+  }) => void;
 };
 
 export type SaveAPIKeyModalProps = {

frontend/src/preferences/PromptsModal.tsx

@@ -1,4 +1,5 @@
 import { ActiveState } from '../models/misc';
+import Exit from '../assets/exit.svg';
 
 function AddPrompt({
   setModalState,
@@ -16,50 +17,54 @@ function AddPrompt({
   setNewPromptContent: (content: string) => void;
 }) {
   return (
-    <div className="rounded-3xl px-4 py-2">
-      <p className="mb-1 text-xl text-jet dark:text-bright-gray">Add Prompt</p>
-      <p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]">
-        Add your custom prompt and save it to DocsGPT
-      </p>
-      <div>
-        <input
-          placeholder="Prompt Name"
-          type="text"
-          className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
-          value={newPromptName}
-          onChange={(e) => setNewPromptName(e.target.value)}
-        ></input>
-        <div className="relative bottom-12 left-3 mt-[-3.00px]">
-          <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
-            Prompt Name
-          </span>
+    <div className="relative">
+      <button
+        className="absolute top-3 right-4 m-2 w-3"
+        onClick={() => {
+          setModalState('INACTIVE');
+        }}
+      >
+        <img className="filter dark:invert" src={Exit} />
+      </button>
+      <div className="p-8">
+        <p className="mb-1 text-xl text-jet dark:text-bright-gray">
+          Add Prompt
+        </p>
+        <p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]">
+          Add your custom prompt and save it to DocsGPT
+        </p>
+        <div>
+          <input
+            placeholder="Prompt Name"
+            type="text"
+            className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+            value={newPromptName}
+            onChange={(e) => setNewPromptName(e.target.value)}
+          ></input>
+          <div className="relative bottom-12 left-3 mt-[-3.00px]">
+            <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
+              Prompt Name
+            </span>
+          </div>
+          <div className="relative top-[7px] left-3">
+            <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
+              Prompt Text
+            </span>
+          </div>
+          <textarea
+            className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:bg-transparent dark:text-silver"
+            value={newPromptContent}
+            onChange={(e) => setNewPromptContent(e.target.value)}
+          ></textarea>
         </div>
-        <div className="relative top-[7px] left-3">
-          <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
-            Prompt Text
-          </span>
+        <div className="mt-6 flex flex-row-reverse">
+          <button
+            onClick={handleAddPrompt}
+            className="rounded-3xl bg-purple-30 px-6 py-3 text-sm text-white transition-all hover:opacity-90"
+          >
+            Save
+          </button>
         </div>
-        <textarea
-          className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:bg-transparent dark:text-silver"
-          value={newPromptContent}
-          onChange={(e) => setNewPromptContent(e.target.value)}
-        ></textarea>
-      </div>
-      <div className="mt-6 flex flex-row-reverse gap-4">
-        <button
-          onClick={handleAddPrompt}
-          className="rounded-3xl bg-purple-30 px-5 py-2 text-white transition-all hover:opacity-90"
-        >
-          Save
-        </button>
-        <button
-          onClick={() => {
-            setModalState('INACTIVE');
-          }}
-          className="cursor-pointer font-medium dark:text-light-gray"
-        >
-          Cancel
-        </button>
       </div>
     </div>
   );
@@ -83,58 +88,62 @@ function EditPrompt({
   currentPromptEdit: { name: string; id: string; type: string };
 }) {
   return (
-    <div className="rounded-3xl px-4 py-2">
-      <p className="mb-1 text-xl text-jet dark:text-bright-gray">Edit Prompt</p>
-      <p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]">
-        Edit your custom prompt and save it to DocsGPT
-      </p>
-      <div>
-        <input
-          placeholder="Prompt Name"
-          type="text"
-          className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
-          value={editPromptName}
-          onChange={(e) => setEditPromptName(e.target.value)}
-        ></input>
-        <div className="relative bottom-12 left-3 mt-[-3.00px]">
-          <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
-            Prompt Name
-          </span>
+    <div className="relative">
+      <button
+        className="absolute top-3 right-4 m-2 w-3"
+        onClick={() => {
+          setModalState('INACTIVE');
+        }}
+      >
+        <img className="filter dark:invert" src={Exit} />
+      </button>
+      <div className="p-8">
+        <p className="mb-1 text-xl text-jet dark:text-bright-gray">
+          Edit Prompt
+        </p>
+        <p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]">
+          Edit your custom prompt and save it to DocsGPT
+        </p>
+        <div>
+          <input
+            placeholder="Prompt Name"
+            type="text"
+            className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+            value={editPromptName}
+            onChange={(e) => setEditPromptName(e.target.value)}
+          ></input>
+          <div className="relative bottom-12 left-3 mt-[-3.00px]">
+            <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
+              Prompt Name
+            </span>
+          </div>
+          <div className="relative top-[7px] left-3">
+            <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
+              Prompt Text
+            </span>
+          </div>
+          <textarea
+            className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:bg-transparent dark:text-silver"
+            value={editPromptContent}
+            onChange={(e) => setEditPromptContent(e.target.value)}
+          ></textarea>
         </div>
-        <div className="relative top-[7px] left-3">
-          <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
-            Prompt Text
-          </span>
+        <div className="mt-6 flex flex-row-reverse gap-4">
+          <button
+            className={`rounded-3xl bg-purple-30 px-6 py-3 text-sm text-white transition-all ${
+              currentPromptEdit.type === 'public'
+                ? 'cursor-not-allowed opacity-50'
+                : 'hover:opacity-90'
+            }`}
+            onClick={() => {
+              handleEditPrompt &&
+                handleEditPrompt(currentPromptEdit.id, currentPromptEdit.type);
+            }}
+            disabled={currentPromptEdit.type === 'public'}
+          >
+            Save
+          </button>
         </div>
-        <textarea
-          className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:bg-transparent dark:text-silver"
-          value={editPromptContent}
-          onChange={(e) => setEditPromptContent(e.target.value)}
-        ></textarea>
-      </div>
-      <div className="mt-6 flex flex-row-reverse gap-4">
-        <button
-          className={`rounded-3xl bg-purple-30 px-5 py-2 text-white transition-all ${
-            currentPromptEdit.type === 'public'
-              ? 'cursor-not-allowed opacity-50'
-              : 'hover:opacity-90'
-          }`}
-          onClick={() => {
-            handleEditPrompt &&
-              handleEditPrompt(currentPromptEdit.id, currentPromptEdit.type);
-          }}
-          disabled={currentPromptEdit.type === 'public'}
-        >
-          Save
-        </button>
-        <button
-          onClick={() => {
-            setModalState('INACTIVE');
-          }}
-          className="cursor-pointer font-medium dark:text-light-gray"
-        >
-          Cancel
-        </button>
       </div>
     </div>
   );
@@ -205,7 +214,7 @@ export default function PromptsModal({
         modalState === 'ACTIVE' ? 'visible' : 'hidden'
       } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha`}
     >
-      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg dark:bg-outer-space">
+      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-outer-space">
         {view}
       </article>
     </article>

frontend/src/settings/APIKeys.tsx

@@ -59,7 +59,12 @@ const APIKeys: React.FC = () => {
       console.log(error);
     }
   };
-  const createAPIKey = (payload: { name: string; source: string }) => {
+  const createAPIKey = (payload: {
+    name: string;
+    source: string;
+    prompt_id: string;
+    chunks: string;
+  }) => {
     fetch(`${apiHost}/api/create_api_key`, {
       method: 'POST',
       headers: {
@@ -75,9 +80,9 @@ const APIKeys: React.FC = () => {
       })
       .then((data) => {
         setApiKeys([...apiKeys, data]);
-        setCreateModal(false); //close the create key modal
+        setCreateModal(false);
         setNewKey(data.key);
-        setSaveKeyModal(true); // render the newly created key
+        setSaveKeyModal(true);
         fetchAPIKeys();
       })
       .catch((error) => {
@@ -90,9 +95,9 @@ const APIKeys: React.FC = () => {
         <div className="flex justify-end">
           <button
             onClick={() => setCreateModal(true)}
-            className="rounded-full bg-purple-30 px-4 py-3 text-sm text-white hover:bg-[#7E66B1]"
+            className="rounded-full bg-purple-30 px-4 py-3 text-sm text-white hover:opacity-90"
           >
-            Create New
+            Create new
           </button>
         </div>
         {isCreateModalOpen && (
@@ -155,7 +160,33 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
     label: string;
     value: string;
   } | null>(null);
+
+  const chunkOptions = ['0', '2', '4', '6', '8', '10'];
+  const [chunk, setChunk] = React.useState<string>('2');
+  const [activePrompts, setActivePrompts] = React.useState<
+    { name: string; id: string; type: string }[]
+  >([]);
+  const [prompt, setPrompt] = React.useState<{
+    name: string;
+    id: string;
+    type: string;
+  } | null>(null);
   const docs = useSelector(selectSourceDocs);
+  React.useEffect(() => {
+    const fetchPrompts = async () => {
+      try {
+        const response = await fetch(`${apiHost}/api/get_prompts`);
+        if (!response.ok) {
+          throw new Error('Failed to fetch prompts');
+        }
+        const promptsData = await response.json();
+        setActivePrompts(promptsData);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    fetchPrompts();
+  }, []);
   const extractDocPaths = () =>
     docs
       ? docs
@@ -188,14 +219,14 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
 
   return (
     <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
-      <div className="relative w-11/12 rounded-lg bg-white p-5 dark:bg-outer-space sm:w-[512px]">
-        <button className="absolute top-2 right-2 m-2 w-4" onClick={close}>
+      <div className="relative w-11/12 rounded-2xl bg-white px-8 py-8 dark:bg-outer-space sm:w-[512px]">
+        <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
           <img className="filter dark:invert" src={Exit} />
         </button>
-        <span className="mb-4 text-xl font-bold text-jet dark:text-bright-gray">
+        <span className="text-xl text-jet dark:text-bright-gray">
           Create New API Key
         </span>
-        <div className="relative my-4">
+        <div className="relative mt-5 mb-4">
           <span className="absolute left-2 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
             API Key Name
           </span>
@@ -208,21 +239,51 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
         </div>
         <div className="my-4">
           <Dropdown
-            placeholder="Select the source doc"
+            placeholder="Source document"
             selectedValue={sourcePath}
             onSelect={(selection: { label: string; value: string }) =>
               setSourcePath(selection)
             }
             options={extractDocPaths()}
+            size="w-full"
+            rounded="xl"
+          />
+        </div>
+        <div className="my-4">
+          <Dropdown
+            options={activePrompts}
+            selectedValue={prompt ? prompt.name : null}
+            placeholder="Select active prompt"
+            onSelect={(value: { name: string; id: string; type: string }) =>
+              setPrompt(value)
+            }
+            size="w-full"
+          />
+        </div>
+        <div className="my-4">
+          <p className="mb-2 ml-2 font-bold text-jet dark:text-bright-gray">
+            Chunks processed per query
+          </p>
+          <Dropdown
+            options={chunkOptions}
+            selectedValue={chunk}
+            onSelect={(value: string) => setChunk(value)}
+            size="w-full"
           />
         </div>
         <button
-          disabled={sourcePath === null || APIKeyName.length === 0}
+          disabled={!sourcePath || APIKeyName.length === 0 || !prompt}
           onClick={() =>
             sourcePath &&
-            createAPIKey({ name: APIKeyName, source: sourcePath.value })
+            prompt &&
+            createAPIKey({
+              name: APIKeyName,
+              source: sourcePath.value,
+              prompt_id: prompt.id,
+              chunks: chunk,
+            })
           }
-          className="float-right my-4 rounded-full bg-purple-30 px-4 py-3 text-white disabled:opacity-50"
+          className="float-right mt-4 rounded-full bg-purple-30 px-4 py-3 text-white disabled:opacity-50"
         >
           Create
         </button>
@@ -239,8 +300,8 @@ const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
   };
   return (
     <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
-      <div className="relative w-11/12 rounded-md bg-white p-5 dark:bg-outer-space dark:text-bright-gray sm:w-[512px]">
-        <button className="absolute top-4 right-4 w-4" onClick={close}>
+      <div className="relative w-11/12 rounded-3xl bg-white px-6 py-8 dark:bg-outer-space dark:text-bright-gray sm:w-[512px]">
+        <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
           <img className="filter dark:invert" src={Exit} />
         </button>
         <h1 className="my-0 text-xl font-medium">Please save your Key</h1>
@@ -253,7 +314,7 @@ const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
             <span className="text-sm font-normal leading-7 ">{apiKey}</span>
           </div>
           <button
-            className="my-1 h-10 w-20 rounded-full border border-purple-30 p-2 text-sm text-purple-30 dark:border-purple-500 dark:text-purple-500"
+            className="my-1 h-10 w-20 rounded-full border border-purple-30 p-2 text-sm text-purple-30 hover:bg-purple-30 hover:text-white dark:border-purple-500 dark:text-purple-500"
             onClick={handleCopyKey}
           >
             {isCopied ? 'Copied' : 'Copy'}

frontend/src/upload/Upload.tsx

@@ -302,14 +302,13 @@ export default function Upload({
         {activeTab === 'remote' && (
           <>
             <Dropdown
-              fullWidth
               options={urlOptions}
               selectedValue={urlType}
               onSelect={(value: { label: string; value: string }) =>
                 setUrlType(value)
               }
               size="w-full"
-              rounded="3xl"
+              rounded="xl"
             />
             {urlType.label !== 'Reddit' ? (
               <>