fix not display

Author: leehuwuj

templates/components/agents/python/blog/app/workflows/writer.py

@@ -45,7 +45,7 @@ def create_workflow(
     return WriterWorkflow(
         index=index,
         chat_history=chat_history,
-        **kwargs,
+        timeout=120.0,
     )
 
 

templates/types/streaming/nextjs/app/components/ui/chat/chat-message-content.tsx

@@ -25,7 +25,7 @@ export function ChatMessageContent() {
     },
     // add the writer card
     {
-      position: ContentPosition.AFTER_EVENTS,
+      position: ContentPosition.CHAT_EVENTS,
       component: <WriterCard message={message} />,
     },
     {

templates/types/streaming/nextjs/app/components/ui/chat/custom/writer-card.tsx

@@ -100,6 +100,13 @@ const updateState = (state: WriterState, event: WriterEvent): WriterState => {
   }
 };
 
+const stateIcon: Record<EventState, React.ReactNode> = {
+  pending: <Clock className="w-4 h-4 text-yellow-500" />,
+  inprogress: <CircleDashed className="w-4 h-4 text-blue-500 animate-spin" />,
+  done: <CheckCircle2 className="w-4 h-4 text-green-500" />,
+  error: <AlertCircle className="w-4 h-4 text-red-500" />,
+};
+
 export function WriterCard({ message }: { message: Message }) {
   const [state, setState] = useState<WriterState>({
     retrieve: { state: null },
@@ -116,21 +123,6 @@ export function WriterCard({ message }: { message: Message }) {
     }
   }, [writerEvents]);
 
-  const getStateIcon = (state: EventState | null) => {
-    switch (state) {
-      case "pending":
-        return <Clock className="w-4 h-4 text-yellow-500" />;
-      case "inprogress":
-        return <CircleDashed className="w-4 h-4 text-blue-500 animate-spin" />;
-      case "done":
-        return <CheckCircle2 className="w-4 h-4 text-green-500" />;
-      case "error":
-        return <AlertCircle className="w-4 h-4 text-red-500" />;
-      default:
-        return null;
-    }
-  };
-
   if (!writerEvents?.length) {
     return null;
   }
@@ -167,7 +159,7 @@ export function WriterCard({ message }: { message: Message }) {
                   <CollapsibleTrigger className="w-full">
                     <div className="flex items-center gap-2 p-3 hover:bg-gray-50 transition-colors rounded-lg border border-gray-200">
                       <div className="flex-shrink-0">
-                        {getStateIcon(question.state)}
+                        {stateIcon[question.state]}
                       </div>
                       <span className="font-medium text-left flex-1">
                         {question.question}