add prompt,chunks in create key

frontend/src/Setting.tsx

@@ -205,6 +205,7 @@ const General: React.FC = () => {
       <div className="mb-4">
         <p className="font-bold text-jet dark:text-bright-gray">Select Theme</p>
         <Dropdown
+          alignMidddle
           options={themes}
           selectedValue={selectedTheme}
           onSelect={(option: string) => {
@@ -218,6 +219,7 @@ const General: React.FC = () => {
           Select Language
         </p>
         <Dropdown
+          alignMidddle
           options={languages}
           selectedValue={selectedLanguage}
           onSelect={setSelectedLanguage}
@@ -228,6 +230,7 @@ const General: React.FC = () => {
           Chunks processed per query
         </p>
         <Dropdown
+          alignMidddle
           options={chunks}
           selectedValue={selectedChunks}
           onSelect={(value: string) => dispatch(setChunks(value))}
@@ -677,7 +680,13 @@ 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: {
@@ -808,7 +817,12 @@ const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
 
 type CreateAPIKeyModalProps = {
   close: () => void;
-  createAPIKey: (payload: { name: string; source: string }) => void;
+  createAPIKey: (payload: {
+    name: string;
+    source: string;
+    prompt_id: string;
+    chunks: string;
+  }) => void;
 };
 const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
   close,
@@ -819,7 +833,33 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
     label: string;
     value: string;
   } | null>(null);
+
+  const chunkOptions = ['0', '2', '4', '6', '8', '10'];
+  const [chunk, setChunk] = useState<string>('2');
+  const [activePrompts, setActivePrompts] = useState<
+    { name: string; id: string; type: string }[]
+  >([]);
+  const [prompt, setPrompt] = useState<{
+    name: string;
+    id: string;
+    type: string;
+  } | null>(null);
   const docs = useSelector(selectSourceDocs);
+  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
@@ -872,7 +912,7 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
         </div>
         <div className="my-4">
           <Dropdown
-            className="mt-2 w-full"
+            fullWidth
             placeholder="Select the source doc"
             selectedValue={sourcePath}
             onSelect={(selection: { label: string; value: string }) =>
@@ -881,11 +921,41 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
             options={extractDocPaths()}
           />
         </div>
+
+        <div className="my-4">
+          <Dropdown
+            fullWidth
+            options={activePrompts}
+            selectedValue={prompt ? prompt.name : null}
+            placeholder="Select Active Prompt"
+            onSelect={(value: { name: string; id: string; type: string }) =>
+              setPrompt(value)
+            }
+          />
+        </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
+            fullWidth
+            alignMidddle
+            options={chunkOptions}
+            selectedValue={chunk}
+            onSelect={(value: string) => setChunk(value)}
+          />
+        </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"
         >

frontend/src/components/Dropdown.tsx

@@ -8,6 +8,8 @@ function Dropdown({
   showDelete,
   onDelete,
   placeholder,
+  fullWidth,
+  alignMidddle,
 }: {
   options:
     | string[]
@@ -21,37 +23,31 @@ function Dropdown({
   showDelete?: boolean;
   onDelete?: (value: string) => void;
   placeholder?: string;
-  className?: string;
-  width?: string;
+  fullWidth?: boolean;
+  alignMidddle?: boolean;
 }) {
   const [isOpen, setIsOpen] = useState(false);
   return (
-    <div
-      className={
-        typeof selectedValue === 'string'
-          ? 'relative mt-2 w-32'
-          : 'relative w-full align-middle'
-      }
-    >
+    <div className={fullWidth ? 'relative w-full' : 'relative mt-2 w-32'}>
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={`flex w-full cursor-pointer items-center justify-between border-2 border-silver bg-white p-3 dark:border-chinese-silver dark:bg-transparent ${
-          isOpen
-            ? typeof selectedValue === 'string'
-              ? 'rounded-t-xl'
-              : 'rounded-t-3xl'
-            : typeof selectedValue === 'string'
-            ? 'rounded-xl'
-            : 'rounded-3xl'
+          isOpen ? 'rounded-t-3xl' : 'rounded-3xl'
         }`}
       >
         {typeof selectedValue === 'string' ? (
-          <span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
+          <span
+            className={`${
+              alignMidddle && 'flex-1'
+            } overflow-hidden text-ellipsis dark:text-bright-gray`}
+          >
             {selectedValue}
           </span>
         ) : (
           <span
-            className={`overflow-hidden text-ellipsis dark:text-bright-gray ${
+            className={`${
+              alignMidddle && 'flex-1'
+            } overflow-hidden text-ellipsis dark:text-bright-gray ${
               !selectedValue && 'text-silver dark:text-gray-400'
             }`}
           >

frontend/src/upload/Upload.tsx

@@ -302,6 +302,7 @@ export default function Upload({
         {activeTab === 'remote' && (
           <>
             <Dropdown
+              fullWidth
               options={urlOptions}
               selectedValue={urlType}
               onSelect={(value: { label: string; value: string }) =>