Refactor form components and add search functionality to Select inputs

n4ze3m · Dec 24, 2023 · 6f297c4 · 6f297c4
1 parent 19aa2cc
commit 6f297c4
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 19 deletions.
diff --git a/app/ui/src/components/Bot/Settings/SettingsCard.tsx b/app/ui/src/components/Bot/Settings/SettingsCard.tsx
@@ -169,7 +169,21 @@ export const SettingsCard: React.FC<BotSettings> = ({
                     },
                   ]}
                 >
-                  <Select options={chatModel} />
+                  <Select
+                    showSearch
+                    filterOption={(input, option) =>
+                      (option?.label
+                        ? option?.label?.toLowerCase()
+                        : ""
+                      ).includes(input?.toLowerCase())
+                    }
+                    filterSort={(optionA, optionB) =>
+                      (optionA?.label ?? "")
+                        .toLowerCase()
+                        .localeCompare((optionB?.label ?? "").toLowerCase())
+                    }
+                    options={chatModel}
+                  />
                 </Form.Item>
 
                 <Form.Item
@@ -211,10 +225,7 @@ export const SettingsCard: React.FC<BotSettings> = ({
                   />
                 </Form.Item>
 
-                <Form.Item
-                  label={"Embedding Method"}
-                  name="embedding"
-                >
+                <Form.Item label={"Embedding Method"} name="embedding">
                   <Select
                     disabled
                     placeholder="Select an embedding method"
@@ -232,11 +243,7 @@ export const SettingsCard: React.FC<BotSettings> = ({
                     },
                   ]}
                 >
-                  <Input.TextArea
-                   size="large"
-                    rows={5}
-                    placeholder=""
-                  />
+                  <Input.TextArea size="large" rows={5} placeholder="" />
                 </Form.Item>
                 <div className="flex flex-row justify-start gap-4">
                   <button
@@ -273,10 +280,7 @@ export const SettingsCard: React.FC<BotSettings> = ({
                     },
                   ]}
                 >
-                  <Input.TextArea
-                    size="large"
-                    rows={5}
-                  />
+                  <Input.TextArea size="large" rows={5} />
                 </Form.Item>
 
                 <Form.Item

diff --git a/app/ui/src/components/Common/BotForm.tsx b/app/ui/src/components/Common/BotForm.tsx
@@ -467,8 +467,12 @@ export const BotForm = ({
                   value={source}
                   className={({ checked, active }) =>
                     classNames(
-                      checked ? "border-transparent" : "border-gray-300 dark:border-gray-700",
-                      active ? "border-indigo-500 ring-0 ring-indigo-500 dark:border-gray-700 dark:ring-gray-900" : "",
+                      checked
+                        ? "border-transparent"
+                        : "border-gray-300 dark:border-gray-700",
+                      active
+                        ? "border-indigo-500 ring-0 ring-indigo-500 dark:border-gray-700 dark:ring-gray-900"
+                        : "",
                       "relative  items-center justify-center flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none dark:bg-[#141414]"
                     )
                   }
@@ -543,6 +547,17 @@ export const BotForm = ({
             name="model"
           >
             <Select
+              showSearch
+              filterOption={(input, option) =>
+                (option?.label ? option?.label?.toLowerCase() : "").includes(
+                  input?.toLowerCase()
+                )
+              }
+              filterSort={(optionA, optionB) =>
+                (optionA?.label ?? "")
+                  .toLowerCase()
+                  .localeCompare((optionB?.label ?? "").toLowerCase())
+              }
               placeholder="Select a chat model"
               options={botConfig.chatModel}
             />
@@ -557,7 +572,15 @@ export const BotForm = ({
             name="embedding"
           >
             <Select
-              placeholder="Select an embedding method"
+              showSearch
+              filterOption={(input, option) =>
+                (option?.label ?? "").includes(input)
+              }
+              filterSort={(optionA, optionB) =>
+                (optionA?.label ?? "")
+                  .toLowerCase()
+                  .localeCompare((optionB?.label ?? "").toLowerCase())
+              }
               options={botConfig.embeddingModel}
             />
           </Form.Item>

diff --git a/app/ui/src/index.css b/app/ui/src/index.css
@@ -2,7 +2,6 @@
 
 * {
   font-family: "Inter", sans-serif !important;
-
 }
 
 @tailwind base;
@@ -46,7 +45,13 @@ pre:has(div.code) {
   margin: 0;
 }
 
-markdown-processing { 
+markdown-processing {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
+
+/* make focus 0 without any border */
+.ant-select-selection-search-input {
+  border: none !important;
+  box-shadow: none !important;
+}