Skip to content

Commit 7aea535

Browse files
ssdeanxssdeanx
committed
feat: update README and improve ESLint configuration
- Updated the Chat UI-Backend Architecture section in README.md to reflect new message rendering logic. - Enhanced the ESLint configuration by refining ignored files and updating TypeScript ESLint plugin usage. - Changed AccordionTriggerProps and AccordionContentProps from interface to type for consistency in ui/accordion.tsx. - Updated TabsListProps from interface to type for consistency in ui/tabs.tsx.
1 parent 761a2d8 commit 7aea535

4 files changed

Lines changed: 254 additions & 138 deletions

File tree

‎README.md‎

Lines changed: 205 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -143,105 +143,222 @@ graph TB
143143
style UI stroke:#58a6ff
144144
```
145145

146-
## 🔍 **Workflow Architecture**
146+
## 🔍 **Chat UI-Backend Architecture**
147147

148148
```mermaid
149149
%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#58a6ff', 'primaryTextColor': '#c9d1d9', 'primaryBorderColor': '#30363d', 'lineColor': '#58a6ff', 'sectionBkgColor': '#161b22', 'altSectionBkgColor': '#0d1117', 'sectionTextColor': '#c9d1d9', 'gridColor': '#30363d', 'tertiaryColor': '#161b22' }}}%%
150150
sequenceDiagram
151-
participant User
152-
participant Workflow
153-
participant Writer
154-
participant Agent/Tool
155-
participant Logger
156-
157-
User->>Workflow: Execute workflow step
158-
Workflow->>Logger: logStepStart()
159-
160-
Workflow->>Writer: custom({ type: "data-tool-progress" })
161-
Note over Writer: status: "in-progress"<br/>message: "Starting..."<br/>stage: "step-id"
162-
Writer-->>User: Stream progress update
163-
164-
Workflow->>Agent/Tool: Execute operation
165-
Agent/Tool->>Writer: custom({ type: "data-tool-progress" })
166-
Note over Writer: Tool emits progress<br/>with same format
167-
Writer-->>User: Stream tool progress
168-
169-
Agent/Tool-->>Workflow: Return result
170-
171-
Workflow->>Writer: custom({ type: "data-tool-progress" })
172-
Note over Writer: status: "done"<br/>message: "Completed..."<br/>stage: "step-id"
173-
Writer-->>User: Stream completion
174-
175-
Workflow->>Logger: logStepEnd()
176-
Workflow-->>User: Return final output
177-
178-
alt Error occurs
179-
Agent/Tool->>Writer: custom({ type: "data-tool-progress" })
180-
Note over Writer: status: "error"<br/>message: error details
181-
Writer-->>User: Stream error
182-
Workflow->>Logger: logError()
151+
participant UI as ChatUI
152+
participant Msg as MessageItem
153+
participant TG as TypeGuards
154+
participant ADS as AgentDataSection
155+
participant WDS as WorkflowDataSection
156+
participant NDS as NetworkDataSection
157+
participant AT as AgentTool
158+
159+
UI->>Msg: render(message)
160+
Msg->>Msg: compute dataParts via useMemo
161+
162+
loop for each part in dataParts
163+
Msg->>TG: isAgentDataPart(part)
164+
alt part is AgentDataPart
165+
Msg->>ADS: render part
166+
ADS-->>Msg: Agent execution collapsible
167+
else not AgentDataPart
168+
Msg->>TG: isWorkflowDataPart(part)
169+
alt part is WorkflowDataPart
170+
Msg->>WDS: render part
171+
WDS-->>Msg: Workflow execution collapsible
172+
else not WorkflowDataPart
173+
Msg->>TG: isNetworkDataPart(part)
174+
alt part is NetworkDataPart
175+
Msg->>NDS: render part
176+
NDS-->>Msg: Network execution collapsible
177+
else other data-tool-* part
178+
alt part.type startsWith data-tool-
179+
Msg->>AT: render custom tool UI
180+
AT-->>Msg: Tool-specific panel
181+
else generic data-* part
182+
Msg-->>Msg: render generic Collapsible with JSON
183+
end
184+
end
185+
end
186+
end
183187
end
188+
189+
Msg-->>UI: message body with nested sections
184190
```
185191

186192
## 📊 **System Flowchart**
187193

188194
```mermaid
189195
%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#58a6ff', 'primaryTextColor': '#c9d1d9', 'primaryBorderColor': '#30363d', 'lineColor': '#58a6ff', 'sectionBkgColor': '#161b22', 'altSectionBkgColor': '#0d1117', 'sectionTextColor': '#c9d1d9', 'gridColor': '#30363d', 'tertiaryColor': '#161b22' }}}%%
190-
flowchart TD
191-
A[app/chat] -->|components| B[chat-header.tsx]
192-
A -->|components| C[chat-messages.tsx]
193-
A -->|components| D[chat-input.tsx]
194-
A -->|config| E[agents.ts]
195-
A -->|providers| F[chat-context.tsx]
196-
197-
G[app/networks] -->|components| H[network-header.tsx]
198-
G -->|components| I[network-messages.tsx]
199-
G -->|config| J[networks.ts]
200-
G -->|providers| K[network-context.tsx]
201-
202-
L[app/workflows] -->|components| M[workflow-canvas.tsx]
203-
L -->|components| N[workflow-header.tsx]
204-
L -->|config| O[workflows.ts]
205-
L -->|providers| P[workflow-context.tsx]
206-
207-
Q[app/dashboard] -->|components| R[dashboard.tsx]
208-
Q -->|components| S[agent-list.tsx]
209-
Q -->|providers| T[dashboard-context.tsx]
210-
211-
U[lib] -->|hooks| V[use-mastra.ts]
212-
U -->|hooks| W[use-dashboard-queries.ts]
213-
U -->|utils| X[utils.ts]
214-
U -->|client| Y[mastra-client.ts]
215-
216-
Z[src/types] -->|api| AA[mastra-api.ts]
217-
218-
AB[src/mastra/index.ts] -->|imports| AC[agents/*]
219-
AB -->|imports| AD[tools/*]
220-
AB -->|imports| AE[workflows/*]
221-
AB -->|imports| AF[networks/*]
222-
AB -->|imports| AG[config/*]
223-
224-
style A stroke:#64b5f6
225-
style B stroke:#64b5f6
226-
style C stroke:#64b5f6
227-
style D stroke:#64b5f6
228-
style E stroke:#64b5f6
229-
style F stroke:#64b5f6
230-
style G stroke:#64b5f6
231-
style H stroke:#64b5f6
232-
style I stroke:#64b5f6
233-
style J stroke:#64b5f6
234-
style K stroke:#64b5f6
235-
style L stroke:#64b5f6
236-
style M stroke:#64b5f6
237-
style N stroke:#64b5f6
238-
style O stroke:#64b5f6
239-
style P stroke:#64b5f6
240-
style L stroke:#64b5f6
241-
style Q stroke:#64b5f6
242-
style U stroke:#64b5f6
243-
style Z stroke:#64b5f6
244-
style AB stroke:#64b5f6
196+
classDiagram
197+
direction LR
198+
199+
class UIMessage {
200+
+string id
201+
+parts MastraDataPart[]
202+
}
203+
204+
class MastraDataPart {
205+
+string type
206+
+string id
207+
+unknown data
208+
}
209+
210+
class AgentDataPart {
211+
+string type
212+
+string id
213+
+AgentExecutionData data
214+
}
215+
216+
class WorkflowDataPart {
217+
+string type
218+
+string id
219+
+WorkflowExecutionData data
220+
}
221+
222+
class NetworkDataPart {
223+
+string type
224+
+string id
225+
+NetworkExecutionData data
226+
}
227+
228+
class AgentExecutionData {
229+
+string text
230+
+unknown usage
231+
+toolResults unknown[]
232+
}
233+
234+
class WorkflowExecutionData {
235+
+string name
236+
+string status
237+
+WorkflowStepMap steps
238+
+WorkflowOutput output
239+
}
240+
241+
class NetworkExecutionData {
242+
+string name
243+
+string status
244+
+NetworkStep[] steps
245+
+NetworkUsage usage
246+
+unknown output
247+
}
248+
249+
class WorkflowStepMap {
250+
<<map>>
251+
+string key
252+
+WorkflowStep value
253+
}
254+
255+
class WorkflowStep {
256+
+string status
257+
+unknown input
258+
+unknown output
259+
+unknown suspendPayload
260+
}
261+
262+
class NetworkStep {
263+
+string name
264+
+string status
265+
+unknown input
266+
+unknown output
267+
}
268+
269+
class NetworkUsage {
270+
+number inputTokens
271+
+number outputTokens
272+
+number totalTokens
273+
}
274+
275+
class MessageItem {
276+
+UIMessage message
277+
-MastraDataPart[] dataParts
278+
+render()
279+
}
280+
281+
class AgentDataSection {
282+
+AgentDataPart part
283+
+render()
284+
}
285+
286+
class WorkflowDataSection {
287+
+WorkflowDataPart part
288+
+render()
289+
}
290+
291+
class NetworkDataSection {
292+
+NetworkDataPart part
293+
+render()
294+
}
295+
296+
class AgentTool {
297+
+string id
298+
+string type
299+
+unknown data
300+
+render()
301+
}
302+
303+
class TypeGuards {
304+
+bool hasStringType(unknown part)
305+
+bool isAgentDataPart(unknown part)
306+
+bool isWorkflowDataPart(unknown part)
307+
+bool isNetworkDataPart(unknown part)
308+
}
309+
310+
class KeyHelpers {
311+
+string getToolCallId(unknown tool, number fallbackIndex)
312+
}
313+
314+
UIMessage "1" o-- "*" MastraDataPart
315+
MastraDataPart <|-- AgentDataPart
316+
MastraDataPart <|-- WorkflowDataPart
317+
MastraDataPart <|-- NetworkDataPart
318+
319+
MessageItem ..> MastraDataPart : filters dataParts
320+
MessageItem ..> AgentDataPart : uses when isAgentDataPart
321+
MessageItem ..> WorkflowDataPart : uses when isWorkflowDataPart
322+
MessageItem ..> NetworkDataPart : uses when isNetworkDataPart
323+
324+
MessageItem --> AgentDataSection : renders nested agent
325+
MessageItem --> WorkflowDataSection : renders nested workflow
326+
MessageItem --> NetworkDataSection : renders nested network
327+
MessageItem --> AgentTool : renders other data-tool-* parts
328+
329+
MessageItem ..> TypeGuards
330+
MessageItem ..> KeyHelpers
331+
332+
AgentDataSection --> AgentExecutionData
333+
WorkflowDataSection --> WorkflowExecutionData
334+
NetworkDataSection --> NetworkExecutionData
335+
336+
WorkflowExecutionData o-- WorkflowStepMap
337+
WorkflowStepMap o-- WorkflowStep
338+
NetworkExecutionData o-- NetworkStep
339+
NetworkExecutionData o-- NetworkUsage
340+
341+
342+
style UIMessage stroke:#64b5f6
343+
style MastraDataPart stroke:#64b5f6
344+
style AgentDataPart stroke:#64b5f6
345+
style WorkflowDataPart stroke:#64b5f6
346+
style NetworkDataPart stroke:#64b5f6
347+
style AgentExecutionData stroke:#64b5f6
348+
style WorkflowExecutionData stroke:#64b5f6
349+
style NetworkExecutionData stroke:#64b5f6
350+
style MessageItem stroke:#64b5f6
351+
style TypeGuards stroke:#64b5f6
352+
style KeyHelpers stroke:#64b5f6
353+
style AgentDataSection stroke:#64b5f6
354+
style WorkflowDataSection stroke:#64b5f6
355+
style NetworkDataSection stroke:#64b5f6
356+
style AgentTool stroke:#64b5f6
357+
style NetworkUsage stroke:#64b5f6
358+
style NetworkStep stroke:#64b5f6
359+
style WorkflowStep stroke:#64b5f6
360+
style WorkflowStepMap stroke:#64b5f6
361+
style uses when stroke:#64b5f6
245362
```
246363

247364
## 🔄 **RAG Pipeline (Production-Grade)**

0 commit comments

Comments
 (0)