Plutopulp/chat app integration (#420)

* return pipeline extras field in pipeline container get route

* add all chat functionality to micro frontend

* build frontend

* restore notifications

* BPV

* define chat_model in llama-2 chat example

examples/text-to-text/llama2-13b-chat-vllm/pipeline.yaml

@@ -18,4 +18,5 @@ pipeline_graph: new_pipeline:my_new_pipeline
 pipeline_name: llama2-13b-chat-vllm
 description: null
 readme: null
-extras: {}
+extras:
+  model_type: "chat"

pipeline/cloud/schemas/pipelines.py

@@ -65,6 +65,7 @@ class Pipeline(BaseModel):
 
     input_variables: t.List[IOVariable]
     output_variables: t.List[IOVariable]
+    extras: t.Optional[dict]
 
 
 class PipelineGet(Pipeline):

pipeline/container/frontend/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slider": "^1.1.2",

pipeline/container/frontend/src/components/play/PipelinePlayWrapper.tsx

@@ -12,12 +12,16 @@ import {
 import { EmptyResourceCard } from "../ui/Cards/EmptyResourceCard";
 import { PipelineRunOutput } from "./PipelineRunOutput";
 import { Code } from "../ui/Code/Code";
+import ChatApp from "./chat-app/ChatApp";
+import { ButtonToggle } from "../ui/Buttons/ButtonToggle";
+import { Button } from "../ui/Buttons/Button";
 
 export default function PipelinePlayWrapper(): JSX.Element {
   const [loading, setLoading] = useState<boolean>(false);
   const [runOutputs, setRunOuputs] = useState<RunOutput[] | null>(null);
   const [runErrors, setRunError] = useState<RunError | null>(null);
   const [activeScreen, setActiveScreen] = useState<"form" | "example">("form");
+  const [chatAvailable, setChatAvailable] = useState<boolean>(false);
 
   const { data: pipeline, isLoading: isPipelineLoading } = useGetPipeline();
 
@@ -51,6 +55,14 @@ export default function PipelinePlayWrapper(): JSX.Element {
     handleErrorResult(null);
     setLoading(false);
   }
+  console.log(chatAvailable);
+  // Effects
+  React.useEffect(() => {
+    if (pipeline && pipeline?.extras?.model_type === "chat") {
+      setChatAvailable(true);
+      setActiveScreen("example");
+    }
+  }, [isPipelineLoading]);
 
   // Loading skeleton
   if (isPipelineLoading) {
@@ -68,7 +80,36 @@ export default function PipelinePlayWrapper(): JSX.Element {
   return (
     <div className="flex flex-col gap-8">
       <div className="flex flex-col gap-6">
+        {chatAvailable ? (
+          <>
+            <ButtonToggle>
+              <Button
+                colorVariant={
+                  activeScreen === "example" ? "secondary" : "muted"
+                }
+                active={activeScreen === "example"}
+                onClick={() => setActiveScreen("example")}
+                size="sm"
+              >
+                Chat mode
+              </Button>
+              <Button
+                colorVariant={activeScreen === "form" ? "secondary" : "muted"}
+                active={activeScreen === "form"}
+                onClick={() => setActiveScreen("form")}
+                size="sm"
+              >
+                Request builder
+              </Button>
+            </ButtonToggle>
+          </>
+        ) : null}
         <div className="flex flex-col gap-8 lg:flex-row max-w-full ">
+          {pipeline && activeScreen === "example" ? (
+            <div className="w-full vcol2:min-w-vcol2 vcol2:w-vcol2 max-w-full vcol2:max-w-vcol2">
+              <ChatApp pipeline={pipeline} />
+            </div>
+          ) : null}
           {activeScreen === "form" ? (
             <div className="vcol-row vcol-row-2 shadow-sm">
               <PipelinePlayColumn title="Inputs" className="vcol-col-first">