fix: random

app/run-agent-flow/components/ASideType/Chater.tsx

@@ -21,18 +21,21 @@ const Chater = ({ messages, node, onAccept }: { messages: IMessages }) => {
     return R.reverse(messages)
   }, [messages])
 
- 
 
   return (
     <div className="flex flex-col-reverse w-full overflow-auto pb-[80px]">
       {
         reversedMessages.map((message, i) => (
           <div key={i} className={twMerge("chat ", message.role === 'assistant' ? "chat-start" : 'chat-end')}>
-            <div className="chat-image avatar">
-              <div className="w-10 rounded-full">
-                <img
-                  alt="avatar"
-                  src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+            <div className="chat-image avatar placeholder">
+              <div className="w-10 rounded-full bg-neutral text-neutral-content">
+                {message.role === 'assistant'
+                  ? (
+                    <img
+                      alt="avatar"
+                      src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                  )
+                  : <span className="text-xl">我</span>}
               </div>
             </div>
             <div className={twMerge("chat-bubble prose prose-sm", message.role === 'assistant' ? "chat-bubble-primary" : "chat-bubble-secondary")}>
@@ -40,12 +43,12 @@ const Chater = ({ messages, node, onAccept }: { messages: IMessages }) => {
                 {message?.content}
               </Markdown>
               {
-                ( node.type === 'UserTask' && message.role === 'assistant' )
+                (node.type === 'UserTask' && message.role === 'assistant')
                   ? message?.isLoading
                     ? <span className="loading loading-dots loading-sm"></span>
                     : (
                       <>
-                        <button className="btn btn-xs btn-neutral" onClick={() => onAccept(message)}>采纳</button>
+                        <button className="btn btn-xs btn-neutral" onClick={() => onAccept?.(message)}>采纳</button>
                       </>
                     )
                   : null

app/run-agent-flow/components/ASideType/Form.tsx

@@ -1,10 +1,73 @@
 'use client'
 
-import React from "react"
+import React, { useEffect, useState } from "react"
+import { v4 as uuid4 } from 'uuid'
+import { useReducerAtom } from "jotai/utils";
+import { useSession } from "next-auth/react";
+import TextareaAutosize from 'react-textarea-autosize';
+import Chater from "./Chater";
+import { getChatResponse } from "@/lib/utils";
+import { BsFillSendFill } from "react-icons/bs";
+import * as R from 'ramda'
+
+const Form = ({ node, asideInstantAtom }) => {
+  const { data: session } = useSession()
+  const [asideInstant, dispatchAsideInstant] = useReducerAtom(asideInstantAtom, (prev, payload) => ({ ...prev, ...payload }))
+  const [messages, setMessages] = useState(asideInstant?.messages ?? [])
+  // const messageItem = useRef<unknown>(null)
+  const [sessionName, setSessionName] = useState(asideInstant?.sessionName ?? uuid4())
+
+  const [input, setInput] = useState('')
+  const [isSending, setIsSending] = useState(false)
+
+  useEffect(() => {
+    dispatchAsideInstant({ messages, sessionName })
+  }, [messages, sessionName])
+
+  const onSend = async ({ text, ignoreQuestionMessage = false }: { text: string, ignoreQuestionMessage?: boolean }) => {
+    // FIXME fixed assi id
+    const assistantId = "8dcff108-64e8-11ef-826e-12e77c4cb76b"
+    const newMessages = messages
+    if (!ignoreQuestionMessage) {
+      newMessages.push({ type: 'md', role: 'user', content: text })
+    }
+    const message = { type: 'md', role: 'assistant', content: '', isLoading: true }
+    newMessages.push(message)
+    setMessages(() => [...newMessages])
+    // messageItem.current = message
+    const [chunks, ctrl] = getChatResponse({
+      text,
+      assistantId,
+      sessionName,
+      // userId: session?.user?.id,
+      // FIXME
+      userId: '1c9dc4b-d95f-11ea-af4c-52540005ab01'
+    })
+    for await (const chunk of chunks) {
+      message.content += chunk;
+      setMessages(() => [...newMessages])
+    }
+    message.isLoading = false
+    setMessages(() => [...newMessages])
+    setIsSending(false)
+    return message
+  }
+
+  const onCommit = async () => {
+    const text = input
+    setInput('')
+    setIsSending(true)
+    await onSend({ text })
+  }
 
-const Form = ({node, asideInstantAtom}) => {
   return (
-    <div>aside form</div>
+    <div className="w-full h-full flex relative">
+      <Chater messages={messages} node={node}></Chater>
+      <div className="absolute flex inset-x-2.5 bottom-2.5 w-auto">
+        <TextareaAutosize className="textarea textarea-bordered pr-12 w-full resize-none" value={input} onChange={ev => setInput(ev.target.value)} maxRows={4} />
+        <button className="btn btn-active btn-primary btn-sm absolute right-[8px] bottom-[8px] w-[2rem] px-0" disabled={isSending} onClick={onCommit}><BsFillSendFill size={18} /></button>
+      </div>
+    </div>
   )
 }
 

app/run-agent-flow/components/Flow.tsx

@@ -1,13 +1,45 @@
 'use client';
-import React from 'react'
+import React, { useCallback } from 'react'
+import { curStepAtom, stepsNodesAtom, viewedStepAtom } from '../store';
+import { useAtomValue } from 'jotai';
+import { twMerge } from 'tailwind-merge';
+import * as R from 'ramda'
+
+
 const Flow = () => {
+  const stepsNodes = useAtomValue(stepsNodesAtom)
+  const curStep = useAtomValue(curStepAtom)
+  const viewedStep = useAtomValue(viewedStepAtom)
+
+  const getNodeName = useCallback((node) => {
+    return R.cond([
+      // Form Node
+      [R.propEq('form_card', 'type'), R.always('表单卡片')],
+      // Agent Node
+      [R.propEq('UserTask', 'type'), R.path(['properties', 'item', 'assistantName'])],
+      [R.T, R.prop('type')]
+    ])(node)
+  }, [])
   return (
-    <div className="shadow-xl rounded-box min-h-[150px] p-2">
+    <div className="flex justify-center items-center shadow-xl rounded-box min-h-[150px] p-2">
       <ul className="steps">
-        <li className="step step-primary">Register</li>
+        {stepsNodes.map((stepNode, i) => (
+          <li
+            key={i}
+            className={twMerge(
+              "step",
+              i <= curStep ? "step-primary" : '',
+            )}
+
+            {...(i === curStep ? { 'data-content': '★' } : {})}
+          >
+            {getNodeName(stepNode)}
+          </li>
+        ))}
+        {/* <li className="step step-primary">Register</li>
         <li className="step step-primary">Choose plan</li>
         <li className="step">Purchase</li>
-        <li className="step">Receive Product</li>
+        <li className="step">Receive Product</li> */}
       </ul>
     </div>
   )