refactor: make llamacloud selector resuable (#221)

templates/types/streaming/nextjs/app/components/ui/chat/widgets/LlamaCloudSelector.tsx

 import { Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   Select,
   SelectContent,
@@ -35,41 +35,53 @@ type LlamaCloudConfig = {
 };
 
 export interface LlamaCloudSelectorProps {
-  setRequestData: React.Dispatch<any>;
+  setRequestData?: React.Dispatch<any>;
+  onSelect?: (pipeline: PipelineConfig | undefined) => void;
+  defaultPipeline?: PipelineConfig;
+  shouldCheckValid?: boolean;
 }
 
 export function LlamaCloudSelector({
   setRequestData,
+  onSelect,
+  defaultPipeline,
+  shouldCheckValid = true,
 }: LlamaCloudSelectorProps) {
   const { backend } = useClientConfig();
   const [config, setConfig] = useState<LlamaCloudConfig>();
 
+  const updateRequestParams = useCallback(
+    (pipeline?: PipelineConfig) => {
+      if (setRequestData) {
+        setRequestData({
+          llamaCloudPipeline: pipeline,
+        });
+      } else {
+        onSelect?.(pipeline);
+      }
+    },
+    [onSelect, setRequestData],
+  );
+
   useEffect(() => {
     if (process.env.NEXT_PUBLIC_USE_LLAMACLOUD === "true" && !config) {
       fetch(`${backend}/api/chat/config/llamacloud`)
         .then((response) => response.json())
         .then((data) => {
-          setConfig(data);
-          setRequestData({
-            llamaCloudPipeline: data.pipeline,
-          });
+          const pipeline = defaultPipeline ?? data.pipeline; // defaultPipeline will override pipeline in .env
+          setConfig({ ...data, pipeline });
+          updateRequestParams(pipeline);
         })
         .catch((error) => console.error("Error fetching config", error));
     }
-  }, [backend, config, setRequestData]);
+  }, [backend, config, defaultPipeline, updateRequestParams]);
 
   const setPipeline = (pipelineConfig?: PipelineConfig) => {
     setConfig((prevConfig: any) => ({
       ...prevConfig,
       pipeline: pipelineConfig,
     }));
-    setRequestData((prevData: any) => {
-      if (!prevData) return { llamaCloudPipeline: pipelineConfig };
-      return {
-        ...prevData,
-        llamaCloudPipeline: pipelineConfig,
-      };
-    });
+    updateRequestParams(pipelineConfig);
   };
 
   const handlePipelineSelect = async (value: string) => {
@@ -83,7 +95,7 @@ export function LlamaCloudSelector({
       </div>
     );
   }
-  if (!isValid(config)) {
+  if (!isValid(config) && shouldCheckValid) {
     return (
       <p className="text-red-500">
         Invalid LlamaCloud configuration. Check console logs.