Skip to content

Commit a44d649

Browse files
alexcheng1982alexcheng1982
committed
feat: support reasoning
1 parent ed86f90 commit a44d649

File tree

13 files changed

+563
-139
lines changed

13 files changed

+563
-139
lines changed

‎chat-agent-ui/components.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,15 @@
1010
"cssVariables": true,
1111
"prefix": ""
1212
},
13+
"iconLibrary": "lucide",
1314
"aliases": {
1415
"components": "@/components",
1516
"utils": "@/lib/utils",
1617
"ui": "@/components/ui",
1718
"lib": "@/lib",
1819
"hooks": "@/hooks"
1920
},
20-
"iconLibrary": "lucide"
21-
}
21+
"registries": {
22+
"@assistant-ui": "https://r.assistant-ui.com/{name}.json"
23+
}
24+
}

‎chat-agent-ui/components/AgentRuntimeProvider.tsx‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
"use client";
22

33
import type {ReactNode} from "react";
4-
import {AssistantRuntimeProvider, type ChatModelAdapter, useLocalRuntime,} from "@assistant-ui/react";
4+
import {
5+
AssistantRuntimeProvider,
6+
type ChatModelAdapter,
7+
type ThreadAssistantMessagePart,
8+
useLocalRuntime,
9+
} from "@assistant-ui/react";
510
import {EventSourceParserStream} from 'eventsource-parser/stream'
611

712
const AgentModelAdapter: ChatModelAdapter = {
@@ -32,6 +37,7 @@ const AgentModelAdapter: ChatModelAdapter = {
3237
.getReader();
3338

3439
let text = "";
40+
let reasoning = "";
3541

3642
for (; ;) {
3743
const {done, value} = await eventStream.read();
@@ -40,12 +46,27 @@ const AgentModelAdapter: ChatModelAdapter = {
4046
continue;
4147
}
4248
const {content} = JSON.parse(value.data);
43-
if (!content || content.length == 0 || content[0].type !== "text" || !content[0].text) {
49+
if (!content || content.length == 0) {
4450
continue;
4551
}
46-
text += content[0].text;
52+
for (const item of content) {
53+
if (item.type === "text") {
54+
text += item.text;
55+
} else if (item.type === "reasoning") {
56+
reasoning += item.text;
57+
}
58+
}
59+
60+
const result: ThreadAssistantMessagePart[] = [];
61+
if (text) {
62+
result.push({type: "text", text});
63+
}
64+
if (reasoning) {
65+
result.push({type: "reasoning", text: reasoning});
66+
}
67+
4768
yield {
48-
content: [{type: "text", text}],
69+
content: result,
4970
};
5071
} else {
5172
break;

‎chat-agent-ui/components/assistant-ui/markdown-text.tsx‎

Lines changed: 116 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,10 @@ const CodeHeader: FC<CodeHeaderProps> = ({language, code}) => {
3636

3737
return (
3838
<div
39-
className="flex items-center justify-between gap-4 mt-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
40-
<span className="lowercase [&>span]:text-xs">{language}</span>
39+
className="aui-code-header-root mt-4 flex items-center justify-between gap-4 rounded-t-lg bg-muted-foreground/15 px-4 py-2 font-semibold text-foreground text-sm dark:bg-muted-foreground/20">
40+
<span className="aui-code-header-language lowercase [&>span]:text-xs">
41+
{language}
42+
</span>
4143
<TooltipIconButton tooltip="Copy" onClick={onCopy}>
4244
{!isCopied && <CopyIcon/>}
4345
{isCopied && <CheckIcon/>}
@@ -67,65 +69,158 @@ const useCopyToClipboard = ({
6769

6870
const defaultComponents = memoizeMarkdownComponents({
6971
h1: ({className, ...props}) => (
70-
<h1 className={cn("mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0", className)} {...props} />
72+
<h1
73+
className={cn(
74+
"aui-md-h1 mb-8 scroll-m-20 font-extrabold text-4xl tracking-tight last:mb-0",
75+
className,
76+
)}
77+
{...props}
78+
/>
7179
),
7280
h2: ({className, ...props}) => (
73-
<h2 className={cn("mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0", className)} {...props} />
81+
<h2
82+
className={cn(
83+
"aui-md-h2 mt-8 mb-4 scroll-m-20 font-semibold text-3xl tracking-tight first:mt-0 last:mb-0",
84+
className,
85+
)}
86+
{...props}
87+
/>
7488
),
7589
h3: ({className, ...props}) => (
76-
<h3 className={cn("mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0", className)} {...props} />
90+
<h3
91+
className={cn(
92+
"aui-md-h3 mt-6 mb-4 scroll-m-20 font-semibold text-2xl tracking-tight first:mt-0 last:mb-0",
93+
className,
94+
)}
95+
{...props}
96+
/>
7797
),
7898
h4: ({className, ...props}) => (
79-
<h4 className={cn("mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0", className)} {...props} />
99+
<h4
100+
className={cn(
101+
"aui-md-h4 mt-6 mb-4 scroll-m-20 font-semibold text-xl tracking-tight first:mt-0 last:mb-0",
102+
className,
103+
)}
104+
{...props}
105+
/>
80106
),
81107
h5: ({className, ...props}) => (
82-
<h5 className={cn("my-4 text-lg font-semibold first:mt-0 last:mb-0", className)} {...props} />
108+
<h5
109+
className={cn(
110+
"aui-md-h5 my-4 font-semibold text-lg first:mt-0 last:mb-0",
111+
className,
112+
)}
113+
{...props}
114+
/>
83115
),
84116
h6: ({className, ...props}) => (
85-
<h6 className={cn("my-4 font-semibold first:mt-0 last:mb-0", className)} {...props} />
117+
<h6
118+
className={cn(
119+
"aui-md-h6 my-4 font-semibold first:mt-0 last:mb-0",
120+
className,
121+
)}
122+
{...props}
123+
/>
86124
),
87125
p: ({className, ...props}) => (
88-
<p className={cn("mb-5 mt-5 leading-7 first:mt-0 last:mb-0", className)} {...props} />
126+
<p
127+
className={cn(
128+
"aui-md-p mt-5 mb-5 leading-7 first:mt-0 last:mb-0",
129+
className,
130+
)}
131+
{...props}
132+
/>
89133
),
90134
a: ({className, ...props}) => (
91-
<a className={cn("text-primary font-medium underline underline-offset-4", className)} {...props} />
135+
<a
136+
className={cn(
137+
"aui-md-a font-medium text-primary underline underline-offset-4",
138+
className,
139+
)}
140+
{...props}
141+
/>
92142
),
93143
blockquote: ({className, ...props}) => (
94-
<blockquote className={cn("border-l-2 pl-6 italic", className)} {...props} />
144+
<blockquote
145+
className={cn("aui-md-blockquote border-l-2 pl-6 italic", className)}
146+
{...props}
147+
/>
95148
),
96149
ul: ({className, ...props}) => (
97-
<ul className={cn("my-5 ml-6 list-disc [&>li]:mt-2", className)} {...props} />
150+
<ul
151+
className={cn("aui-md-ul my-5 ml-6 list-disc [&>li]:mt-2", className)}
152+
{...props}
153+
/>
98154
),
99155
ol: ({className, ...props}) => (
100-
<ol className={cn("my-5 ml-6 list-decimal [&>li]:mt-2", className)} {...props} />
156+
<ol
157+
className={cn("aui-md-ol my-5 ml-6 list-decimal [&>li]:mt-2", className)}
158+
{...props}
159+
/>
101160
),
102161
hr: ({className, ...props}) => (
103-
<hr className={cn("my-5 border-b", className)} {...props} />
162+
<hr className={cn("aui-md-hr my-5 border-b", className)} {...props} />
104163
),
105164
table: ({className, ...props}) => (
106-
<table className={cn("my-5 w-full border-separate border-spacing-0 overflow-y-auto", className)} {...props} />
165+
<table
166+
className={cn(
167+
"aui-md-table my-5 w-full border-separate border-spacing-0 overflow-y-auto",
168+
className,
169+
)}
170+
{...props}
171+
/>
107172
),
108173
th: ({className, ...props}) => (
109-
<th className={cn("bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right", className)} {...props} />
174+
<th
175+
className={cn(
176+
"aui-md-th bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [[align=center]]:text-center [[align=right]]:text-right",
177+
className,
178+
)}
179+
{...props}
180+
/>
110181
),
111182
td: ({className, ...props}) => (
112-
<td className={cn("border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right", className)} {...props} />
183+
<td
184+
className={cn(
185+
"aui-md-td border-b border-l px-4 py-2 text-left last:border-r [[align=center]]:text-center [[align=right]]:text-right",
186+
className,
187+
)}
188+
{...props}
189+
/>
113190
),
114191
tr: ({className, ...props}) => (
115-
<tr className={cn("m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg", className)} {...props} />
192+
<tr
193+
className={cn(
194+
"aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
195+
className,
196+
)}
197+
{...props}
198+
/>
116199
),
117200
sup: ({className, ...props}) => (
118-
<sup className={cn("[&>a]:text-xs [&>a]:no-underline", className)} {...props} />
201+
<sup
202+
className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)}
203+
{...props}
204+
/>
119205
),
120206
pre: ({className, ...props}) => (
121207
<pre
122-
className={cn("overflow-x-auto rounded-b-lg !rounded-t-none bg-black p-4 text-white", className)} {...props} />
208+
className={cn(
209+
"aui-md-pre overflow-x-auto rounded-t-none! rounded-b-lg bg-black p-4 text-white",
210+
className,
211+
)}
212+
{...props}
213+
/>
123214
),
124215
code: function Code({className, ...props}) {
125216
const isCodeBlock = useIsMarkdownCodeBlock();
126217
return (
127218
<code
128-
className={cn(!isCodeBlock && "bg-muted rounded border font-semibold", className)}
219+
className={cn(
220+
!isCodeBlock &&
221+
"aui-md-inline-code rounded border bg-muted font-semibold",
222+
className,
223+
)}
129224
{...props}
130225
/>
131226
);

0 commit comments

Comments
 (0)