v1.9.0

app/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "app",
   "private": true,
-  "version": "1.8.6",
+  "version": "1.9.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -23,6 +23,7 @@
     "d3": "^7.8.5",
     "dayjs": "^1.11.10",
     "eventsource-parser": "^1.0.0",
+    "framer-motion": "^11.3.2",
     "js-cookie": "^3.0.5",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",

app/ui/src/@types/bot.ts

@@ -1,39 +1,40 @@
 export type BotSettings = {
   data: {
     id: string;
-  name: string;
-  model: string;
-  public_id: string;
-  temperature: number;
-  embedding: string; 
-  noOfDocumentsToRetrieve: number;
-  qaPrompt: string;
-  questionGeneratorPrompt: string;
-  streaming: boolean;
-  showRef: boolean;
-  use_hybrid_search: boolean;
-  bot_protect: boolean;
-  use_rag: boolean;
-  bot_model_api_key: string;
-  noOfChatHistoryInContext: number;
-  semanticSearchSimilarityScore: string
-  },
+    name: string;
+    model: string;
+    public_id: string;
+    temperature: number;
+    embedding: string;
+    noOfDocumentsToRetrieve: number;
+    qaPrompt: string;
+    questionGeneratorPrompt: string;
+    streaming: boolean;
+    showRef: boolean;
+    use_hybrid_search: boolean;
+    publicBotPwdProtected: boolean;
+    publicBotPwd: string;
+    bot_protect: boolean;
+    use_rag: boolean;
+    bot_model_api_key: string;
+    noOfChatHistoryInContext: number;
+    semanticSearchSimilarityScore: string;
+  };
   chatModel: {
     label: string;
     value: string;
     stream: boolean;
-  }[],
+  }[];
   embeddingModel: {
     label: string;
     value: string;
-  }[],
+  }[];
 };
 
-
 export type BotIntegrationAPI = {
   is_api_enabled: boolean;
   data: {
     public_url: string | null;
     api_key: string | null;
   };
-}
+};

app/ui/src/components/Bot/Playground/HistoryList.tsx

@@ -7,6 +7,7 @@ import React from "react";
 import { useMessage } from "../../../hooks/useMessage";
 import { Empty, Skeleton } from "antd";
 import { useStoreMessage } from "../../../store";
+import { motion } from "framer-motion";
 
 export const PlaygroundHistoryList = () => {
   const params = useParams<{ id: string; history_id?: string }>();
@@ -72,9 +73,16 @@ export const PlaygroundHistoryList = () => {
               </div>
             )}
             <div className="flex flex-col gap-2 overflow-hidden text-gray-100 text-sm dark:text-gray-400">
-              {data.history.map((item, index) => {
-                return <PlaygroundHistoryCard key={index} item={item} />;
-              })}
+              {data.history.map((item, index) => (
+                <motion.div
+                  key={item.id || index}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.3, delay: index * 0.1 }}
+                >
+                  <PlaygroundHistoryCard item={item} />
+                </motion.div>
+              ))}
             </div>
           </div>
         )}

app/ui/src/components/Bot/Settings/SettingPwdP.tsx

@@ -0,0 +1,110 @@
+import { Form, Switch, Input, notification } from "antd";
+import { useParams } from "react-router-dom";
+import api from "../../../services/api";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+
+type Props = {
+  publicBotPwdProtected: boolean;
+  publicBotPwd: string;
+};
+
+export const SettingsPwdP: React.FC<Props> = ({
+  publicBotPwd,
+  publicBotPwdProtected,
+}) => {
+  const params = useParams<{ id: string }>();
+  const [form] = Form.useForm();
+  const isEnabled = Form.useWatch("publicBotPwdProtected", form);
+  const client = useQueryClient();
+  const onFinish = async (values: any) => {
+    const response = await api.put(`/bot/${params.id}/password`, values);
+    return response.data;
+  };
+
+  const { mutate, isLoading } = useMutation(onFinish, {
+    onSuccess: () => {
+      client.invalidateQueries(["getBotSettings", params.id]);
+
+      notification.success({
+        message: "Bot settings updated successfully",
+      });
+    },
+    onError: (error: any) => {
+      if (axios.isAxiosError(error)) {
+        const message = error.response?.data?.message || "Something went wrong";
+        notification.error({
+          message,
+        });
+        return;
+      }
+      notification.error({
+        message: "Something went wrong",
+      });
+    },
+  });
+  return (
+    <Form
+      form={form}
+      initialValues={{
+        publicBotPwdProtected,
+        publicBotPwd,
+      }}
+      layout="vertical"
+      onFinish={mutate}
+    >
+      <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">
+              Password Protection
+            </h3>
+            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+              Proctect bot's public access with a password.
+            </p>
+          </div>
+          <div className="mt-5 space-y-6 md:col-span-2 md:mt-0">
+            <Form.Item
+              name="publicBotPwdProtected"
+              valuePropName="checked"
+              label="Enable Password Protection"
+            >
+              <Switch />
+            </Form.Item>
+
+            <Form.Item
+              name="publicBotPwd"
+              label="Password"
+              rules={[
+                {
+                  required: isEnabled,
+                  message: "Please input your password!",
+                },
+              ]}
+            >
+              <Input.Password
+                placeholder="Password"
+                disabled={!isEnabled}
+                size="large"
+              />
+            </Form.Item>
+
+            <div className="text-sm text-gray-500 dark:text-gray-400">
+              This feature is in preview and only works with web interface for
+              now
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-3 text-right">
+          <button
+            type="submit"
+            className="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white  hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          >
+            {isLoading ? "Saving..." : "Save"}
+          </button>
+        </div>
+      </div>
+    </Form>
+  );
+};

app/ui/src/components/Bot/Settings/SettingsCard.tsx → app/ui/src/components/Bot/Settings/SettingsBody.tsx

@@ -17,8 +17,9 @@ import {
   HELPFUL_ASSISTANT_WITHOUT_CONTEXT_PROMPT,
 } from "../../../utils/prompts";
 import { BotSettings } from "../../../@types/bot";
+import { SettingsPwdP } from "./SettingPwdP";
 
-export const SettingsCard: React.FC<BotSettings> = ({
+export const SettingsBody: React.FC<BotSettings> = ({
   data,
   chatModel,
   embeddingModel,
@@ -147,7 +148,6 @@ export const SettingsCard: React.FC<BotSettings> = ({
           </p>
         </div>
       </div>
-      {/* centerize the div */}
       <div className="mt-6 space-y-4">
         <Form
           initialValues={{
@@ -299,9 +299,9 @@ export const SettingsCard: React.FC<BotSettings> = ({
                     placeholder="Enter number of documents to retrieve"
                   />
                 </Form.Item>
-                {/* <Form.Item
+                <Form.Item
                   name="noOfChatHistoryInContext"
-                  label="Number of chat history in context"
+                  label="Number of chat histories in context"
                   rules={[
                     {
                       required: true,
@@ -315,7 +315,7 @@ export const SettingsCard: React.FC<BotSettings> = ({
                     style={{ width: "100%" }}
                     placeholder="Enter number of chat history in context"
                   />
-                </Form.Item> */}
+                </Form.Item>
                 <Form.Item
                   label={"Semantic Search Similarity Score"}
                   name="semanticSearchSimilarityScore"
@@ -439,6 +439,13 @@ export const SettingsCard: React.FC<BotSettings> = ({
           </div>
         </Form>
 
+        <div className="bg-white border sm:rounded-lg dark:bg-[#1e1e1e] dark:border-gray-700">
+          <SettingsPwdP
+            publicBotPwd={data.publicBotPwd}
+            publicBotPwdProtected={data.publicBotPwdProtected}
+          />
+        </div>
+
         <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">

app/ui/src/components/Dashboard/DashboardGrid.tsx

@@ -66,8 +66,8 @@ export const DashboardGrid = () => {
                 </div>
 
                 <div className="px-4 my-3 flex flex-wrap gap-2 text-gray-500 text-xs dark:text-gray-400">
-                  {bot.source.map((source: any) => (
-                    <span title={`${source.type} source`}>
+                  {bot.source.map((source: any, idx: number) => (
+                    <span title={`${source.type} source`} key={idx}>
                       {sources[source.type as keyof typeof sources]}
                     </span>
                   ))}

app/ui/src/routes/bot/settings.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import api from "../../services/api";
 import React from "react";
 import { SkeletonLoading } from "../../components/Common/SkeletonLoading";
-import { SettingsCard } from "../../components/Bot/Settings/SettingsCard";
+import { SettingsBody } from "../../components/Bot/Settings/SettingsBody";
 import { BotSettings } from "../../@types/bot";
 
 export default function BotSettingsRoot() {
@@ -14,8 +14,7 @@ export default function BotSettingsRoot() {
     ["getBotSettings", param.id],
     async () => {
       const response = await api.get(`/bot/${param.id}/settings`);
-      return response.data as BotSettings
-
+      return response.data as BotSettings;
     },
     {
       refetchInterval: 1000,
@@ -28,9 +27,11 @@ export default function BotSettingsRoot() {
     }
   }, [status]);
   return (
-    <div className="mx-auto my-3 w-full max-w-7xl">
-      {status === "loading" && <SkeletonLoading />}
-      {status === "success" && <SettingsCard {...data} />}
+    <div className="flex-1 py-8 md:py-12 px-4 md:px-6">
+      <div className="max-w-6xl mx-auto grid gap-8">
+        {status === "loading" && <SkeletonLoading />}
+        {status === "success" && <SettingsBody {...data} />}
+      </div>
     </div>
   );
 }

app/widget/package.json

@@ -17,6 +17,7 @@
     "antd": "^5.5.2",
     "axios": "^1.4.0",
     "react": "^18.2.0",
+    "react-cookie": "^7.1.4",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.5.0",