feat: chater

.env.example

@@ -5,3 +5,5 @@
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
 DATABASE_URL=mysql://root:example@host:3306/db
+
+NEXT_PUBLIC_GPT_BASE_URL=//gpt4.cocorobo.cn

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

@@ -1,7 +1,36 @@
-import React from 'react'
+'use client'
+import React, { useEffect, useMemo } from 'react'
+import * as R from 'ramda'
+import { useAtom, useAtomValue } from 'jotai'
+import { asideInstantAtomFamily, asideInstantAtomsAtom, curNodeAtom } from '../store'
+import Agent from './ASideType/Agent'
+import Form from './ASideType/Form'
+import Unsupport from './ASideType/Unsupport'
+
 const ASide = () => {
+  const node = useAtomValue(curNodeAtom)
+
+  const Comp = useMemo(() => {
+    return R.cond([
+      [R.propEq('form_card', 'type'), R.always(Form)],
+      [R.propEq('UserTask', 'type'), R.always(Agent)],
+      [R.T, R.always(Unsupport)],
+    ])(node)
+  }, [node, node?.id])
+
+  // 动态注册当前节点的Atom，并将其放进一个atom集合的atom，方便后续格式化所有节点实例
+  const asideInstantAtom = asideInstantAtomFamily(node?.id)
+  const [, dispatchAsideInstantAtoms] = useAtom(asideInstantAtomsAtom)
+  useEffect(() => {
+    if (node?.id) {
+      dispatchAsideInstantAtoms({ [node.id]: asideInstantAtom })
+    }
+  }, [asideInstantAtom])
+
   return (
-    <div className="shadow-xl rounded-box shrink-0 basis-[350px] p-2">aside</div>
+    <div className="shadow-xl rounded-box shrink-0 basis-[350px] p-2">
+      <Comp key={node?.id} node={node} asideInstantAtom={asideInstantAtom}></Comp>
+    </div>
   )
 }
-export default React.memo(ASide)
+export default React.memo(React.forwardRef(ASide))

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

@@ -0,0 +1,132 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from "react"
+import * as R from 'ramda'
+import markdownit from 'markdown-it'
+import { v4 as uuid4 } from 'uuid'
+import TextareaAutosize from 'react-textarea-autosize';
+import { BsFillSendFill } from "react-icons/bs";
+
+
+import Chater from './Chater'
+import { useReducerAtom } from "jotai/utils"
+import { getChatResponse, template } from "@/lib/utils"
+import { useSession } from "next-auth/react"
+import { useAtomValue } from "jotai"
+import { cardInstantAtomFamily, curStepAtom, instantDataAtom, stepsNodesAtom } from "../../store"
+
+
+const Agent = ({ 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 stepsNodes = useAtomValue(stepsNodesAtom)
+  const curStep = useAtomValue(curStepAtom)
+  const instantData = useAtomValue(instantDataAtom)
+
+  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 }) => {
+    const assistantId = R.path(['properties', 'item', 'assistant_id'], node)
+    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 onFirstSend = async () => {
+    const prevNodes = R.slice(0, curStep, stepsNodes)
+    const prevFormNodes = R.filter(R.propEq('form_card', 'type'), prevNodes)
+    const prevFormInstants = R.map(_node => instantData?.[_node.id], prevFormNodes)
+    const formContext = R.join('\n\n', R.map(
+      formInstant => { return R.join('\n', R.map(fieldInstant => `${fieldInstant.label}: ${fieldInstant.value}`, R.values(formInstant.content ?? {}))) },
+      prevFormInstants
+    ))
+
+    let nodeContext = R.pathOr('', ['properties', 'dispo_desc'], node)
+    const replacementArray = R.pathOr('', ['properties', 'dispo_arr'], node)
+    nodeContext = R.reduce(
+      (prev, { desc, id }: { desc: string, id: string }) => {
+        const to = instantData?.[id]?.content ?? ''
+        return R.replace(`[${desc}]`, to, prev)
+      },
+      nodeContext,
+      replacementArray
+    )
+    const text = `
+    ${formContext}
+    ${nodeContext}
+    `
+    setIsSending(true)
+    const message = await onSend({ text, ignoreQuestionMessage: true })
+    dispatchCardInstantData({ content: markdownit().render(message.content) })
+  }
+
+  let firstMark = true
+  useEffect(() => {
+    if (!messages?.length && firstMark) {
+      firstMark = false
+      onFirstSend()
+    }
+  }, [])
+
+  const onCommit = async () => {
+    const text = input
+    setInput('')
+    setIsSending(true)
+    await onSend({ text })
+  }
+
+  const cardInstantAtom = cardInstantAtomFamily(node.id)
+
+  const dataReducer = (prev, payload) => {
+    return { ...prev, ...payload }
+  }
+
+  const [, dispatchCardInstantData] = useReducerAtom(cardInstantAtom, dataReducer)
+
+  const onAccept = (message) => {
+    const content = markdownit().render(message.content)
+    dispatchCardInstantData({ content })
+  }
+
+  return (
+    <div className="w-full h-full flex relative">
+      <Chater messages={messages} node={node} onAccept={onAccept}></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>
+  )
+}
+
+export default React.memo(React.forwardRef(Agent))

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

@@ -0,0 +1,61 @@
+'use client'
+
+import React, { useMemo } from 'react'
+import Markdown from 'react-markdown'
+import { twMerge } from 'tailwind-merge'
+import * as R from 'ramda'
+
+
+type IMessage = {
+  type: 'md' | 'custom';
+  role: 'user' | 'assistant';
+  content: string;
+  isLoading?: boolean;
+  isError?: boolean;
+  error?: string;
+}
+type IMessages = IMessage[]
+
+const Chater = ({ messages, node, onAccept }: { messages: IMessages }) => {
+  const reversedMessages = useMemo(() => {
+    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>
+            </div>
+            <div className={twMerge("chat-bubble prose prose-sm", message.role === 'assistant' ? "chat-bubble-primary" : "chat-bubble-secondary")}>
+              <Markdown>
+                {message?.content}
+              </Markdown>
+              {
+                ( 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>
+                      </>
+                    )
+                  : null
+              }
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  )
+}
+
+export default React.memo(Chater)

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

@@ -0,0 +1,11 @@
+'use client'
+
+import React from "react"
+
+const Form = ({node, asideInstantAtom}) => {
+  return (
+    <div>aside form</div>
+  )
+}
+
+export default React.memo(React.forwardRef(Form))

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

@@ -0,0 +1,7 @@
+import React from 'react'
+const Unsupport = ({ node }) => {
+  return (
+    <div className="">aside</div>
+  )
+}
+export default React.memo(React.forwardRef(Unsupport))

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

@@ -52,6 +52,7 @@ export default function Header() {
       if (status !== 'authenticated') {//tf &&
         const cookie = await fetch("https://beta.api.cocorobo.cn/api/getcookieuserid", {
           method: "GET",
+          credentials: 'include',
           headers: {
             Origin: "https://edu.cocorobo.cn"
           },
@@ -76,6 +77,9 @@ export default function Header() {
     const intervalId = setInterval(async () => {
       await checkLoginStatus(intervalId);
     }, 5000);
+    return () => {
+      clearInterval(intervalId)
+    }
   }, []);
 
   return (

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

@@ -40,11 +40,9 @@ const NodeRender = () => {
 
   const onNextStep = () => {
     setCurStep(prev => prev + 1)
-    // TODO
   }
 
   const onPrevStep = () => {
-    // TODO
     setCurStep(prev => prev - 1)
   }
 

app/run-agent-flow/components/NodeType/Agent.tsx

@@ -1,7 +1,8 @@
 import { useReducerAtom } from 'jotai/utils'
 import { EditorProvider, EditorContent, useCurrentEditor, BubbleMenu, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
+import { useDebounce } from 'react-use';
 
 
 const MenuBar = ({ editor }) => {
@@ -145,10 +146,6 @@ const Agent = ({ node, cardInstantAtom }) => {
 
   const [cardInstantData, dispatchCardInstantData] = useReducerAtom(cardInstantAtom, dataReducer)
 
-  const content = useMemo(() => {
-    return cardInstantData?.content
-  }, [cardInstantData, cardInstantData?.content])
-
   const editor = useEditor({
     extensions: [
       StarterKit,
@@ -158,12 +155,18 @@ const Agent = ({ node, cardInstantAtom }) => {
         class: 'prose prose-sm sm:prose mx-auto focus:outline-none',
       },
     },
-    content,
+    content: cardInstantData?.content ?? '',
     onUpdate: () => {
       dispatchCardInstantData({ content: editor?.getHTML() })
     }
   })
 
+  useEffect(() => {
+    if (!editor?.isFocused) {
+      editor?.commands.setContent(cardInstantData?.content)
+    }
+  }, [cardInstantData, cardInstantData?.content])
+
   if (!editor) {
     return null;
   }

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

@@ -14,6 +14,16 @@ const Form = ({ node, cardInstantAtom }) => {
 
   const [cardInstantData, dispatchCardInstantData] = useReducerAtom(cardInstantAtom, dataReducer)
 
+  const onChange = (value, field) => {
+    const content = cardInstantData.content ?? {}
+    content[field.id] = {
+      ...content[field.id],
+      label: field.value,
+      value
+    }
+    dispatchCardInstantData({ content })
+  }
+
   return (
     <div className="flex flex-col items-center w-full">
       {fields.map((field, i) => (
@@ -21,7 +31,7 @@ const Form = ({ node, cardInstantAtom }) => {
           <div className="label">
             <span className="label-text">{field.value}</span>
           </div>
-          <input type="text" placeholder={field.value} className="input input-bordered w-full max-w-xs" value={cardInstantData?.[field.value]} onChange={(e) => dispatchCardInstantData({ [field.value]: e.target.value })} />
+          <input type="text" placeholder={field.value} className="input input-bordered w-full max-w-xs" value={cardInstantData?.[field.value]} onChange={(e) => onChange(e.target.value, field)} />
         </label>
       ))}
     </div>

app/run-agent-flow/page.tsx

@@ -30,7 +30,7 @@ const RunAgentFlow = () => {
   return (
     <main className="flex h-screen overflow-hidden flex-col items-stretch justify-between p-2 gap-2">
       <Header></Header>
-      <div className="flex align-stretch flex-1 gap-2">
+      <div className="flex align-stretch flex-1 gap-2 overflow-hidden">
         <div className="flex-1 flex flex-col align-stretch min-w-0 gap-2">
           <Flow></Flow>
           <NodeRender></NodeRender>

app/run-agent-flow/store.tsx

@@ -95,14 +95,15 @@ export const arrowStateAtom = atom(get => {
 arrowStateAtom.debugLabel = 'arrowStateAtom'
 
 
-export const cardInstantAtomFamily = atomFamily((cardId) => atom({ id: cardId }))
+// node render下相关的状态
+export const cardInstantAtomFamily = atomFamily((id) => atom({ id }))
 
 export const cardInstantAtomsAtom = atomWithReducer({}, (prev, payload: { id: string; } & { [K in any]?: any }) => {
   return { ...prev, ...payload }
 })
 cardInstantAtomsAtom.debugLabel = 'cardInstantAtomsAtom'
 
-// TODO
+// Readonly
 export const instantDataAtom = atom(get => {
   const cardInstantAtoms = get(cardInstantAtomsAtom)
   const cardInstant = R.map((at) => get(at), cardInstantAtoms)
@@ -110,3 +111,11 @@ export const instantDataAtom = atom(get => {
 })
 instantDataAtom.debugLabel = 'instantDataAtom'
 
+
+// aside下相关的状态
+export const asideInstantAtomFamily = atomFamily((id) => atom({ id }))
+
+export const asideInstantAtomsAtom = atomWithReducer({}, (prev, payload: { id: string; } & { [K in any]?: any }) => {
+  return { ...prev, ...payload }
+})
+asideInstantAtomsAtom.debugLabel = 'asideInstantAtomsAtom'

lib/utils.ts

@@ -0,0 +1,107 @@
+import { v4 as uuid4 } from "uuid";
+
+// 模板字符串装饰器
+// @See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
+export function template(strings, ...keys) {
+  return (...values) => {
+    const dict = values[values.length - 1] || {};
+    const result = [strings[0]];
+    keys.forEach((key, i) => {
+      const value = Number.isInteger(key) ? values[key] : dict[key];
+      result.push(value, strings[i + 1]);
+    });
+    return result.join("");
+  };
+}
+
+export function getChatResponse({
+  text,
+  assistantId,
+  userId,
+  sessionName,
+  model = "gpt-4o",
+}) {
+  if (!sessionName) {
+    sessionName = uuid4();
+  }
+  const data = {
+    assistant_id: assistantId,
+    userId,
+    message: text,
+    session_name: sessionName,
+    model,
+  };
+  const uid = uuid4();
+  const ctrl = new AbortController();
+  async function* generator() {
+    const queue = [];
+    let resolveQueuePromise: (value?: unknown) => void;
+    let queuePromise = new Promise(
+      (resolve) => (resolveQueuePromise = resolve)
+    );
+    let done = false;
+    let error;
+    let timer;
+
+    // 创建 EventSource 实例
+    const eventSource = new EventSource(
+      `${process.env.NEXT_PUBLIC_GPT_BASE_URL}/question/${uid}`
+    );
+
+    // 处理消息事件
+    eventSource.onmessage = (ev) => {
+      const content = JSON.parse(ev.data)?.content;
+      if (content === "[DONE]") {
+        done = true;
+        resolveQueuePromise?.();
+        eventSource.close(); // 关闭连接
+        return;
+      }
+      queue.push(content);
+      resolveQueuePromise();
+      queuePromise = new Promise((resolve) => (resolveQueuePromise = resolve));
+    };
+
+    // 处理错误事件
+    eventSource.onerror = () => {
+      done = true;
+      resolveQueuePromise();
+      eventSource.close(); // 关闭连接
+    };
+
+    ctrl.signal.addEventListener("abort", () => {
+      done = true;
+      resolveQueuePromise();
+      eventSource.close();
+    });
+    fetch(
+      `${process.env.NEXT_PUBLIC_GPT_BASE_URL}/ai_agent_park_chat_new`,
+      {
+        method: "POST",
+        body: JSON.stringify({ ...data, uid }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    while (!done || queue.length > 0) {
+      if (error) {
+        throw error;
+      }
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        ctrl.abort();
+        error = new Error("SSE timeout aborted.");
+        resolveQueuePromise();
+      }, 30000);
+      if (queue.length > 0) {
+        yield queue.shift();
+      } else {
+        await queuePromise;
+      }
+    }
+    clearTimeout(timer);
+  }
+  return [generator(), ctrl];
+}

package.json

@@ -19,8 +19,9 @@
     "@trpc/react-query": "^11.0.0-rc.482",
     "@trpc/server": "^11.0.0-rc.482",
     "jotai": "^2.9.3",
-    "js-cookie": "^3.0.5",
     "jotai-devtools": "^0.10.1",
+    "js-cookie": "^3.0.5",
+    "markdown-it": "^14.1.0",
     "next": "14.2.5",
     "next-auth": "^4.24.7",
     "ramda": "^0.30.1",
@@ -28,8 +29,11 @@
     "react-dom": "^18",
     "react-hook-form": "^7.52.2",
     "react-icons": "^5.3.0",
+    "react-markdown": "^9.0.1",
+    "react-textarea-autosize": "^8.5.3",
     "react-use": "^17.5.1",
     "tailwind-merge": "^2.5.2",
+    "uuid": "^10.0.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -39,6 +43,7 @@
     "@types/ramda": "^0.30.1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/uuid": "^10.0.0",
     "daisyui": "^4.12.10",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
@@ -47,4 +52,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}