fix(ui): transforms pipeline config from backend to match schema

paisley-rag · Aug 5, 2024 · 5ea13f2 · 5ea13f2
1 parent ec3bf76
commit 5ea13f2
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 28 deletions.
diff --git a/ui/src/components/CardChatbot.tsx b/ui/src/components/CardChatbot.tsx
@@ -1,7 +1,8 @@
 import { Link } from "wouter";
+import { ClientPipelineConfig } from "../services/chatbot-service";
 
 interface CardChatbotProps {
-  chatbot: any;
+  chatbot: ClientPipelineConfig;
 }
 
 export function CardChatbot({ chatbot }: CardChatbotProps) {

diff --git a/ui/src/components/ChatbotConfiguration.tsx b/ui/src/components/ChatbotConfiguration.tsx
@@ -62,8 +62,8 @@ export function ChatbotConfiguration({ id }: ChatbotConfigurationProps) {
   useEffect(() => {
     if (chatbot && !isChatbotLoading) {
       form.reset(chatbot);
-      setDisplayCutoff(chatbot.similarity.on);
-      setDisplayTopN(chatbot.colbert_rerank.on);
+      setDisplayCutoff(!!chatbot.similarity?.on);
+      setDisplayTopN(!!chatbot.colbert_rerank?.on);
     }
   }, [chatbot, isChatbotLoading, form]);
 
@@ -80,7 +80,7 @@ export function ChatbotConfiguration({ id }: ChatbotConfigurationProps) {
   if (knowledgeBasesError) return <div>Error loading knowledge bases</div>;
   if (chatbotError) return <div>Error loading chatbot</div>;
 
-  if (knowledgeBases && chatbot)
+  if (knowledgeBases && chatbot) {
     return (
       <Card className="h-full flex flex-col px-6">
         <header className="flex justify-between items-baseline">
@@ -118,4 +118,5 @@ export function ChatbotConfiguration({ id }: ChatbotConfigurationProps) {
         </Form>
       </Card>
     );
+  }
 }
diff --git a/ui/src/components/pages/PageChatbots.tsx b/ui/src/components/pages/PageChatbots.tsx
@@ -6,7 +6,7 @@ import { CardChatbot } from "../CardChatbot";
 
 import {
   chatbotService,
-  ServerPipelineConfig,
+  ClientPipelineConfig,
 } from "../../services/chatbot-service";
 
 export function PageChatbots() {
@@ -19,21 +19,22 @@ export function PageChatbots() {
     return <div>Loading...</div>;
   }
 
-  return (
-    <>
-      <header className="flex justify-between items-baseline mb-8">
-        <Typography variant="h3">Chatbots</Typography>
-        <Button variant="default">Create new chatbot</Button>
-      </header>
-      {chatbots ? (
-        <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {chatbots.map((chatbot: ServerPipelineConfig) => (
-            <CardChatbot key={chatbot.id} chatbot={chatbot} />
-          ))}
-        </ul>
-      ) : (
-        <p>No chatbots found</p>
-      )}
-    </>
-  );
+  if (chatbots)
+    return (
+      <>
+        <header className="flex justify-between items-baseline mb-8">
+          <Typography variant="h3">Chatbots</Typography>
+          <Button variant="default">Create new chatbot</Button>
+        </header>
+        {chatbots ? (
+          <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {chatbots.map((chatbot: ClientPipelineConfig) => (
+              <CardChatbot key={chatbot.id} chatbot={chatbot} />
+            ))}
+          </ul>
+        ) : (
+          <p>No chatbots found</p>
+        )}
+      </>
+    );
 }
diff --git a/ui/src/services/chatbot-service.ts b/ui/src/services/chatbot-service.ts
@@ -20,22 +20,85 @@ export const clientPipelineConfigSchema = z.object({
   prompt: z.string(),
 });
 
+// temp, schema must be refactored on the backend
+export const serverPipelineConfigSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  generative_model: z.string(),
+  knowledgebases: z.array(z.string()),
+  postprocessing: z.object({
+    similarity: z.object({
+      on: z.string(),
+      cutoff: z.number().optional(),
+    }),
+    colbertRerank: z.object({
+      on: z.string(),
+      top_n: z.number().optional(),
+    }),
+    longContextReorder: z.object({
+      on: z.string(),
+    }),
+  }),
+});
+
+const serverPipelinesConfigSchema = z.array(serverPipelineConfigSchema);
+
 export type ClientPipelineConfig = z.infer<typeof clientPipelineConfigSchema>;
-export type ServerPipelineConfig = ClientPipelineConfig;
+export type ServerPipelineConfig = z.infer<typeof serverPipelineConfigSchema>;
 
 async function updateChatbot(id: string, data: ClientPipelineConfig) {
-  const response = await axios.put(`/api/chatbots?id=${id}`, data);
-  return response.data;
+  const response = await axios.put(`/api/chatbots/${id}`, data);
+  return serverPipelineConfigSchema.parse(JSON.parse(response.data));
 }
 
 async function fetchChatbots() {
   const response = await axios.get(`/api/chatbots`);
-  return response.data;
+  const chatbots = serverPipelinesConfigSchema.parse(JSON.parse(response.data));
+  const clientChatbots: ClientPipelineConfig[] = chatbots.map((chatbot) => ({
+    id: chatbot.id,
+    name: chatbot.name,
+    knowledge_bases: chatbot.knowledgebases,
+    generative_model: chatbot.generative_model,
+    similarity: {
+      on: chatbot.postprocessing.similarity.on === "True",
+      cutoff: chatbot.postprocessing.similarity.cutoff,
+    },
+    colbert_rerank: {
+      on: chatbot.postprocessing.colbertRerank.on === "True",
+      top_n: chatbot.postprocessing.colbertRerank.top_n,
+    },
+    long_context_reorder: {
+      on: chatbot.postprocessing.longContextReorder.on === "True",
+    },
+    prompt: "",
+  }));
+  return clientChatbots;
 }
 
 async function fetchChatbotById(id: string) {
-  const response = await axios.get(`/api/chatbots?id=${id}`);
-  return response.data[0];
+  const response = await axios.get(`/api/chatbots/${id}`);
+  const chatbot = serverPipelineConfigSchema.parse(JSON.parse(response.data));
+  console.log(chatbot);
+  const clientChatbot: ClientPipelineConfig = {
+    id: chatbot.id,
+    name: chatbot.name,
+    knowledge_bases: chatbot.knowledgebases,
+    generative_model: chatbot.generative_model,
+    similarity: {
+      on: chatbot.postprocessing.similarity.on === "True",
+      cutoff: chatbot.postprocessing.similarity.cutoff,
+    },
+    colbert_rerank: {
+      on: chatbot.postprocessing.colbertRerank.on === "True",
+      top_n: chatbot.postprocessing.colbertRerank.top_n,
+    },
+    long_context_reorder: {
+      on: chatbot.postprocessing.longContextReorder.on === "True",
+    },
+    prompt: "",
+  };
+
+  return clientChatbot;
 }
 
 export const chatbotService = {