refactor: Update ChatView component to handle different message formats

src/frontend/src/modals/IOModal/components/chatView/index.tsx

@@ -65,10 +65,15 @@ export default function ChatView({
       .filter((output) => output.data.message)
       .map((output, index) => {
         try {
-          const { sender, message, sender_name, stream_url, files } = output
+          console.log("output:", output);
-            .data.message as ChatOutputType;
+          const { sender, message, sender_name, stream_url, files } =
+            output.data.message.message !== "" ||
+            (output.data.message.files ?? []).length > 0
+              ? output.data.message
+              : output.data.artifacts;
 
-          const is_ai = sender === "Machine" || sender === null;
+          const is_ai =
+            sender === "Machine" || sender === null || sender === undefined;
           return {
             isSend: !is_ai,
             message: message,
@@ -131,7 +136,7 @@ export default function ChatView({
   function updateChat(
     chat: ChatMessageType,
     message: string,
-    stream_url?: string
+    stream_url?: string,
   ) {
     // if (message === "") return;
     chat.message = message;
@@ -161,7 +166,7 @@ export default function ChatView({
     setIsDragging,
     setFiles,
     currentFlowId,
-    setErrorData
+    setErrorData,
   );
 
   return (

src/frontend/src/modals/IOModal/index.tsx

@@ -36,25 +36,25 @@ export default function IOModal({
   const allNodes = useFlowStore((state) => state.nodes);
   const setMessages = useMessagesStore((state) => state.setMessages);
   const inputs = useFlowStore((state) => state.inputs).filter(
-    (input) => input.type !== "ChatInput"
+    (input) => input.type !== "ChatInput",
   );
   const chatInput = useFlowStore((state) => state.inputs).find(
-    (input) => input.type === "ChatInput"
+    (input) => input.type === "ChatInput",
   );
   const outputs = useFlowStore((state) => state.outputs).filter(
-    (output) => output.type !== "ChatOutput"
+    (output) => output.type !== "ChatOutput",
   );
   const chatOutput = useFlowStore((state) => state.outputs).find(
-    (output) => output.type === "ChatOutput"
+    (output) => output.type === "ChatOutput",
   );
   const nodes = useFlowStore((state) => state.nodes).filter(
     (node) =>
       inputs.some((input) => input.id === node.id) ||
-      outputs.some((output) => output.id === node.id)
+      outputs.some((output) => output.id === node.id),
   );
   const haveChat = chatInput || chatOutput;
   const [selectedTab, setSelectedTab] = useState(
-    inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
+    inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0,
   );
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -127,7 +127,7 @@ export default function IOModal({
 
   const { handleRemoveSession } = useRemoveSession(
     setSuccessData,
-    setErrorData
+    setErrorData,
   );
 
   useEffect(() => {
@@ -188,7 +188,7 @@ export default function IOModal({
           <div className="flex-max-width h-full">
             <div
               className={cn(
-                "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300"
+                "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300",
               )}
             >
               <Tabs
@@ -217,11 +217,11 @@ export default function IOModal({
                 <TabsContent value={"1"} className="api-modal-tabs-content">
                   {nodes
                     .filter((node) =>
-                      inputs.some((input) => input.id === node.id)
+                      inputs.some((input) => input.id === node.id),
                     )
                     .map((node, index) => {
                       const input = inputs.find(
-                        (input) => input.id === node.id
+                        (input) => input.id === node.id,
                       )!;
                       return (
                         <div
@@ -282,11 +282,11 @@ export default function IOModal({
                 <TabsContent value={"2"} className="api-modal-tabs-content">
                   {nodes
                     .filter((node) =>
-                      outputs.some((output) => output.id === node.id)
+                      outputs.some((output) => output.id === node.id),
                     )
                     .map((node, index) => {
                       const output = outputs.find(
-                        (output) => output.id === node.id
+                        (output) => output.id === node.id,
                       )!;
                       return (
                         <div
@@ -355,7 +355,11 @@ export default function IOModal({
                       >
                         <div className="flex w-full items-center justify-between border-b px-2 py-1 align-middle">
                           <Badge variant="gray" size="md">
-                            {session}
+                            <span className="truncate">
+                              {session === currentFlow?.id
+                                ? "Default Session"
+                                : session}
+                            </span>
                           </Badge>
                           <div className="flex items-center justify-center gap-2 align-middle">
                             <Button
@@ -418,7 +422,7 @@ export default function IOModal({
                 <div
                   className={cn(
                     "flex h-full w-full flex-col items-start gap-4 pt-4",
-                    !selectedViewField ? "hidden" : ""
+                    !selectedViewField ? "hidden" : "",
                   )}
                 >
                   <div className="font-xl flex items-center justify-center gap-3 font-semibold">
@@ -437,7 +441,7 @@ export default function IOModal({
                   </div>
                   <div className="h-full w-full">
                     {inputs.some(
-                      (input) => input.id === selectedViewField.id
+                      (input) => input.id === selectedViewField.id,
                     ) && (
                       <IOFieldView
                         type={InputOutput.INPUT}
@@ -447,7 +451,7 @@ export default function IOModal({
                       />
                     )}
                     {outputs.some(
-                      (output) => output.id === selectedViewField.id
+                      (output) => output.id === selectedViewField.id,
                     ) && (
                       <IOFieldView
                         type={InputOutput.OUTPUT}
@@ -457,12 +461,12 @@ export default function IOModal({
                       />
                     )}
                     {sessions.some(
-                      (session) => session === selectedViewField.id
+                      (session) => session === selectedViewField.id,
                     ) && (
                       <SessionView
                         rows={messages.filter(
                           (message) =>
-                            message.session_id === selectedViewField.id
+                            message.session_id === selectedViewField.id,
                         )}
                       />
                     )}
@@ -472,7 +476,7 @@ export default function IOModal({
               <div
                 className={cn(
                   "flex h-full w-full",
-                  selectedViewField ? "hidden" : ""
+                  selectedViewField ? "hidden" : "",
                 )}
               >
                 {haveChat ? (
@@ -504,7 +508,7 @@ export default function IOModal({
                   "h-4 w-4",
                   isBuilding
                     ? "animate-spin"
-                    : "fill-current text-medium-indigo"
+                    : "fill-current text-medium-indigo",
                 )}
               />
             ),

src/frontend/src/types/api/index.ts

@@ -170,7 +170,7 @@ export type VertexDataTypeAPI = {
   inactive?: boolean;
   timedelta?: number;
   duration?: string;
-  artifacts?: any;
+  artifacts?: any | ChatOutputType | ChatInputType;
   message: ChatOutputType | ChatInputType;
 };