feat: able to change config from UI

run-llama · Aug 1, 2024 · 6cad0df · 6cad0df
1 parent 8ef9f62
commit 6cad0df
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 21 deletions.
diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/hooks/use-config.ts b/templates/types/streaming/nextjs/app/components/ui/chat/hooks/use-config.ts
@@ -2,32 +2,38 @@
 
 import { useEffect, useMemo, useState } from "react";
 
+export interface LLamaCloudPipeline {
+  id: string;
+  name: string;
+  project_id: string;
+}
+
 export interface LLamaCloudProject {
   id: string;
   organization_id: string;
   name: string;
   is_default: boolean;
+  pipelines: LLamaCloudPipeline[];
 }
 
-export interface LLamaCloudPipeline {
-  id: string;
-  name: string;
-  project_id: string;
+export interface LlamaCloudConfig {
+  project: string; // project name
+  pipeline: string; // pipeline name
 }
 
 export interface ChatConfig {
   backend?: string;
   starterQuestions?: string[];
   llamaCloud?: {
-    projects: Array<
-      LLamaCloudProject & {
-        pipelines: LLamaCloudPipeline[];
-      }
-    >;
+    projects: LLamaCloudProject[];
+    config?: LlamaCloudConfig;
   };
+  updateLlamaCloudConfig: (config: LlamaCloudConfig) => Promise<void>;
 }
 
-export function useClientConfig(): ChatConfig {
+export function useClientConfig(opts?: {
+  shouldFetchConfig: boolean;
+}): ChatConfig {
   const chatAPI = process.env.NEXT_PUBLIC_CHAT_API;
   const [config, setConfig] = useState<ChatConfig>();
 
@@ -37,16 +43,35 @@ export function useClientConfig(): ChatConfig {
 
   const configAPI = `${backendOrigin}/api/chat/config`;
 
+  // control whether to call the config API to reduce unnecessary requests
+  const shouldFetchConfig = opts?.shouldFetchConfig ?? false;
+
   useEffect(() => {
-    fetch(configAPI)
-      .then((response) => response.json())
-      .then((data) => setConfig({ ...data, chatAPI }))
-      .catch((error) => console.error("Error fetching config", error));
-  }, [chatAPI, configAPI]);
+    if (shouldFetchConfig) {
+      fetch(configAPI)
+        .then((response) => response.json())
+        .then((data) => setConfig({ ...data, chatAPI }))
+        .catch((error) => console.error("Error fetching config", error));
+    }
+  }, [chatAPI, configAPI, shouldFetchConfig]);
+
+  const updateLlamaCloudConfig = async (config: LlamaCloudConfig) => {
+    const response = await fetch(configAPI, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(config),
+    });
+    if (!response.ok) {
+      throw new Error("Failed to update LlamaCloud config");
+    }
+  };
 
   return {
     backend: backendOrigin,
     starterQuestions: config?.starterQuestions,
     llamaCloud: config?.llamaCloud,
+    updateLlamaCloudConfig,
   };
 }
diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/widgets/LlamaCloudSelector.tsx b/templates/types/streaming/nextjs/app/components/ui/chat/widgets/LlamaCloudSelector.tsx
@@ -7,15 +7,36 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../select";
-import { useClientConfig } from "../hooks/use-config";
+import { LlamaCloudConfig, useClientConfig } from "../hooks/use-config";
+
+// stringify the config to store in the select value
+const toSelectValue = (llamaCloudConfig?: LlamaCloudConfig) => {
+  if (!llamaCloudConfig) return undefined;
+  return JSON.stringify(llamaCloudConfig);
+};
 
 export function LlamaCloudSelector() {
-  const { llamaCloud } = useClientConfig();
+  const { llamaCloud, updateLlamaCloudConfig } = useClientConfig({
+    shouldFetchConfig: true,
+  });
   if (!llamaCloud?.projects.length) return null;
+
+  const handlePipelineSelect = async (value: string) => {
+    try {
+      const { project, pipeline } = JSON.parse(value) as LlamaCloudConfig;
+      await updateLlamaCloudConfig({ project, pipeline });
+    } catch (error) {
+      console.error("Failed to update LlamaCloud config", error);
+    }
+  };
+
   return (
-    <Select>
-      <SelectTrigger className="w-[180px]">
-        <SelectValue placeholder="Select a pipeline" />
+    <Select
+      onValueChange={handlePipelineSelect}
+      defaultValue={toSelectValue(llamaCloud.config)}
+    >
+      <SelectTrigger className="w-[280px]">
+        <SelectValue placeholder="Default " />
       </SelectTrigger>
       <SelectContent>
         {llamaCloud.projects.map((project) => (
@@ -24,7 +45,15 @@ export function LlamaCloudSelector() {
               Project: {project.name}
             </SelectLabel>
             {project.pipelines.map((pipeline) => (
-              <SelectItem key={pipeline.id} value={pipeline.id}>
+              <SelectItem
+                key={pipeline.id}
+                value={
+                  toSelectValue({
+                    project: project.name,
+                    pipeline: pipeline.name,
+                  })!
+                }
+              >
                 {pipeline.name}
               </SelectItem>
             ))}