Update appearance styles in LLMForm, AppearanceBody, DsTable, Setting…

…sCard, and IntegrationCard
n4ze3m · Feb 23, 2024 · 689c3e4 · 689c3e4
1 parent 94f067c
commit 689c3e4
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 90 deletions.
diff --git a/app/ui/src/components/Bot/Appearance/AppearanceBody.tsx b/app/ui/src/components/Bot/Appearance/AppearanceBody.tsx
@@ -30,7 +30,7 @@ export const AppearanceBody = (props: Props) => {
         <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-8">
           <div className="grid grid-cols-1 gap-4 lg:col-span-2">
             <section aria-labelledby="section-1-title">
-              <div className="overflow-hidden rounded-lg bg-white border dark:bg-[#262626] dark:border-gray-700">
+              <div className="overflow-hidden rounded-lg bg-white border dark:bg-[#1e1e1e] dark:border-gray-600">
                 <div className="p-6">
                   <AppearanceForm initialData={props} form={form} />
                 </div>

diff --git a/app/ui/src/components/Bot/DS/DsTable.tsx b/app/ui/src/components/Bot/DS/DsTable.tsx
@@ -133,7 +133,7 @@ export const DsTable = ({
               )}
               {data.length > 0 && (
                 <table className="min-w-full divide-y divide-gray-300">
-                  <thead className="bg-gray-50 dark:bg-[#141414]">
+                  <thead className="bg-gray-50 dark:bg-[#292828]">
                     <tr>
                       <th
                         scope="col"
@@ -163,7 +163,7 @@ export const DsTable = ({
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-gray-200 bg-white dark:bg-[#0a0a0a] dark:divide-gray-800">
+                  <tbody className="divide-y divide-gray-200 bg-white dark:bg-[#1e1e1e] dark:divide-gray-800">
                     {data.map((source) => (
                       <tr key={source.id}>
                         <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">

diff --git a/app/ui/src/components/Bot/Integration/IntegrationCard.tsx b/app/ui/src/components/Bot/Integration/IntegrationCard.tsx
@@ -26,7 +26,7 @@ export const IntegrationCard: React.FC<Prosp> = ({
   const { mode } = useDarkMode();
 
   return !href ? (
-    <div className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#262626] dark:border-gray-600  dark:hover:bg-[#242424]  hover:bg-gray-50">
+    <div className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#1e1e1e] dark:border-gray-600  dark:hover:bg-[#242424]  hover:bg-gray-50">
       <button onClick={onClick}>
         <div className="mb-4">
           <div className="flex items-center justify-between">
@@ -66,7 +66,7 @@ export const IntegrationCard: React.FC<Prosp> = ({
   ) : (
     <Link
       to={href}
-      className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#262626] dark:border-gray-600  dark:hover:bg-[#242424]  hover:bg-gray-50"
+      className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#1e1e1e] dark:border-gray-600  dark:hover:bg-[#242424]  hover:bg-gray-50"
     >
       <div>
         <div className="mb-4">

diff --git a/app/ui/src/components/Bot/Playground/Message.tsx b/app/ui/src/components/Bot/Playground/Message.tsx
@@ -23,14 +23,6 @@ type Props = Message & {
 export const PlaygroundMessage = (props: Props) => {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false);
 
-  React.useEffect(() => {
-    if (isBtnPressed) {
-      setTimeout(() => {
-        setIsBtnPressed(false);
-      }, 4000);
-    }
-  }, [isBtnPressed]);
-
   const { speak, cancel, speaking: isWebSpeaking } = useSpeechSynthesis();
   const {
     speak: speakElevenLabs,
@@ -40,9 +32,7 @@ export const PlaygroundMessage = (props: Props) => {
   } = useElevenLabsTTS();
 
   return (
-    <div
-      className={`group w-full text-gray-800 dark:text-gray-100 `}
-    >
+    <div className={`group w-full text-gray-800 dark:text-gray-100 `}>
       <div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
         <div className="flex flex-row gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 lg:px-0 m-auto w-full">
           <div className="w-8 flex flex-col relative items-end">
@@ -93,13 +83,16 @@ export const PlaygroundMessage = (props: Props) => {
                   onClick={() => {
                     navigator.clipboard.writeText(props.message);
                     setIsBtnPressed(true);
+                    setTimeout(() => {
+                      setIsBtnPressed(false);
+                    }, 4000);
                   }}
-                  className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+                  className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
                 >
                   {!isBtnPressed ? (
-                    <ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                    <ClipboardIcon className="w-4 h-4 text-gray-400 group-hover:text-gray-500" />
                   ) : (
-                    <CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
+                    <CheckIcon className="w-4 h-4 text-green-400 group-hover:text-green-500" />
                   )}
                 </button>
               )}

diff --git a/app/ui/src/components/Bot/Settings/SettingsCard.tsx b/app/ui/src/components/Bot/Settings/SettingsCard.tsx
@@ -135,7 +135,7 @@ export const SettingsCard: React.FC<BotSettings> = ({
           layout="vertical"
           className="space-y-6 mb-6 "
         >
-          <div className="px-4 py-5 bg-white  border sm:rounded-lg sm:p-6 dark:bg-[#262626] dark:border-gray-700">
+          <div className="px-4 py-5 bg-white  border sm:rounded-lg sm:p-6 dark:bg-[#1e1e1e] dark:border-gray-700">
             <div className="md:grid md:grid-cols-3 md:gap-6">
               <div className="md:col-span-1">
                 <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-white">
@@ -325,7 +325,7 @@ export const SettingsCard: React.FC<BotSettings> = ({
           </div>
         </Form>
 
-        <div className="bg-white border sm:rounded-lg dark:bg-[#262626] dark:border-gray-700">
+        <div className="bg-white border sm:rounded-lg dark:bg-[#1e1e1e] dark:border-gray-700">
           <div className="px-4 py-5 sm:p-6">
             <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-white">
               Delete your bot

diff --git a/app/ui/src/components/Settings/Model/EMForm.tsx b/app/ui/src/components/Settings/Model/EMForm.tsx
@@ -11,18 +11,64 @@ export const EMForm: React.FC<Props> = ({ setOpenAddEmbeddingModel }) => {
   const client = useQueryClient();
 
   const [embeddingForm] = Form.useForm();
+  const [embeddingOllamaForm] = Form.useForm();
+  const [embeddingOllamaSaveForm] = Form.useForm();
   const [embeddingType, setEmbeddingType] = React.useState<
     "openai" | "ollama" | "transformer"
   >("openai");
 
-  const saveEmbeddingModelApi = async (values: any) => {
-    const response = await api.post("/admin/models/embedding", {
-      ...values,
-      url: embeddingForm.getFieldValue("url"),
-      api_key: embeddingForm.getFieldValue("api_key"),
-      api_type: embeddingType,
+  const [ollamaMode, setOllamaMode] = React.useState<"fetch" | "save">("fetch");
+  const [localModels, setLocalModels] = React.useState<
+    { id: string; object: string }[]
+  >([]);
+
+  const fetchLocalModels = async (body: { url?: string }) => {
+    const response = await api.post("/admin/models/fetch", {
+      ollama_url: body.url,
+      api_type: "ollama",
     });
-    return response.data;
+    return response.data as {
+      data: {
+        id: string;
+        object: string;
+      }[];
+    };
+  };
+
+  const { isLoading: isFetchModel, mutate: fetchModel } = useMutation(
+    fetchLocalModels,
+    {
+      onSuccess: (data) => {
+        setLocalModels(data.data);
+        setOllamaMode("save");
+      },
+      onError: (e: any) => {
+        const message = e?.response?.data?.message || "Something went wrong";
+        notification.error({
+          message,
+        });
+      },
+    }
+  );
+
+  const saveEmbeddingModelApi = async (values: any) => {
+    if (embeddingType !== "ollama") {
+      const response = await api.post("/admin/models/embedding", {
+        ...values,
+        url: embeddingForm.getFieldValue("url"),
+        api_key: embeddingForm.getFieldValue("api_key"),
+        api_type: embeddingType,
+      });
+      return response.data;
+    } else {
+      console.log("saving ollama model");
+      const response = await api.post("/admin/models/embedding", {
+        ...values,
+        url: embeddingOllamaForm.getFieldValue("url"),
+        api_type: embeddingType,
+      });
+      return response.data;
+    }
   };
 
   const { mutate: saveEmbeddingModel, isLoading: isSaveEmeddingModel } =
@@ -34,7 +80,10 @@ export const EMForm: React.FC<Props> = ({ setOpenAddEmbeddingModel }) => {
         client.invalidateQueries(["fetchAllModels"]);
         setOpenAddEmbeddingModel(false);
         embeddingForm.resetFields();
+        embeddingOllamaForm.resetFields();
+        embeddingOllamaSaveForm.resetFields();
         setEmbeddingType("openai");
+        setOllamaMode("fetch");
       },
       onError: (e: any) => {
         const message = e?.response?.data?.message || "Something went wrong";
@@ -75,7 +124,7 @@ export const EMForm: React.FC<Props> = ({ setOpenAddEmbeddingModel }) => {
         {embeddingType === "openai" && (
           <Form
             onFinish={(value) => {
-              saveEmbeddingModel(value);
+              fetchLocalModels(value);
             }}
             form={embeddingForm}
             layout="vertical"
@@ -141,68 +190,109 @@ export const EMForm: React.FC<Props> = ({ setOpenAddEmbeddingModel }) => {
         )}
 
         {embeddingType === "ollama" && (
-          <Form
-            onFinish={(value) => {
-              saveEmbeddingModel(value);
-            }}
-            form={embeddingForm}
-            layout="vertical"
-            initialValues={{
-              url: "http://host.docker.internal:11434",
-            }}
-          >
-            <Form.Item
-              name="url"
-              label="URL"
-              rules={[
-                {
-                  required: true,
-                  message: "Please enter Ollama URL",
-                },
-              ]}
-            >
-              <Input
-                size="large"
-                type="url"
-                placeholder="http://localhost:11434"
-              />
-            </Form.Item>
+          <>
+            {ollamaMode === "fetch" && (
+              <Form
+                onFinish={(value) => {
+                  fetchModel(value);
+                }}
+                form={embeddingOllamaForm}
+                layout="vertical"
+                initialValues={{
+                  url: "http://host.docker.internal:11434",
+                }}
+              >
+                <Form.Item
+                  name="url"
+                  label="URL"
+                  rules={[
+                    {
+                      required: true,
+                      message: "Please enter Ollama URL",
+                    },
+                  ]}
+                >
+                  <Input
+                    size="large"
+                    type="url"
+                    placeholder="http://localhost:11434"
+                  />
+                </Form.Item>
+                <button
+                  type="submit"
+                  disabled={isSaveEmeddingModel}
+                  className="flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                >
+                  {!isFetchModel ? "Fetch Ollama Models" : "Fetching Models..."}
+                </button>
+              </Form>
+            )}
+            {ollamaMode === "save" && (
+              <Form
+                onFinish={(value) => {
+                  saveEmbeddingModel(value);
+                }}
+                form={embeddingOllamaSaveForm}
+                layout="vertical"
+              >
+                <Form.Item
+                  rules={[
+                    {
+                      required: true,
+                      message: "Please enter a model name",
+                    },
+                  ]}
+                  name="model_name"
+                  label="Model Name"
+                >
+                  <Input
+                    size="large"
+                    placeholder="Enter a model name"
+                    autoComplete="off"
+                  />
+                </Form.Item>
 
-            <Form.Item
-              rules={[
-                {
-                  required: true,
-                  message: "Please enter a model name",
-                },
-              ]}
-              name="model_name"
-              label="Model Name"
-            >
-              <Input size="large" placeholder="Enter a model name" />
-            </Form.Item>
+                <Form.Item
+                  rules={[
+                    {
+                      required: true,
+                      message: "Please select a model",
+                    },
+                  ]}
+                  name="model_id"
+                  label="Model ID"
+                >
+                  <Select
+                    placeholder="Select a model"
+                    size="large"
+                    showSearch
+                    filterOption={(input, option) =>
+                      (option?.label ?? "").includes(input)
+                    }
+                    filterSort={(optionA, optionB) =>
+                      (optionA?.label ?? "")
+                        .toLowerCase()
+                        .localeCompare((optionB?.label ?? "").toLowerCase())
+                    }
+                    options={localModels.map((item) => {
+                      return {
+                        label: item.id,
+                        value: item.id,
+                      };
+                    })}
+                  />
+                </Form.Item>
 
-            <Form.Item
-              help={<p className="text-sm mb-6 text-gray-500">{"llama2"}</p>}
-              rules={[
-                {
-                  required: true,
-                  message: "Please enter a model ID",
-                },
-              ]}
-              name="model_id"
-              label="Model ID"
-            >
-              <Input size="large" placeholder="Enter a model ID" />
-            </Form.Item>
-
-            <button
-              type="submit"
-              disabled={isSaveEmeddingModel}
-              className="flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-            >
-              {!isSaveEmeddingModel ? "Save Model" : "Saving Model..."}
-            </button>
-          </Form>
+                <button
+                  type="submit"
+                  disabled={isSaveEmeddingModel}
+                  className="flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                >
+                  {!isSaveEmeddingModel ? "Save Model" : "Saving Model..."}
+                </button>
+              </Form>
+            )}
+          </>
         )}
 
         {embeddingType === "transformer" && (

diff --git a/app/ui/src/components/Settings/Model/LLMForm.tsx b/app/ui/src/components/Settings/Model/LLMForm.tsx
@@ -309,7 +309,11 @@ export const LLMForm: React.FC<Props> = ({ setOpenAddModel }) => {
             name="name"
             label="Model Name"
           >
-            <Input size="large" placeholder="Enter a model name" />
+            <Input
+              size="large"
+              placeholder="Enter a model name"
+              autoComplete="off"
+            />
           </Form.Item>
 
           <Form.Item