Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit4b57200

Browse files
kylecarbsjohnstcn
authored andcommitted
Add tools
1 parentf406721 commit4b57200

File tree

5 files changed

+275
-54
lines changed

5 files changed

+275
-54
lines changed

‎site/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"update-emojis":"cp -rf ./node_modules/emoji-datasource-apple/img/apple/64/* ./static/emojis"
3636
},
3737
"dependencies": {
38+
"@ai-sdk/provider-utils":"2.2.6",
3839
"@ai-sdk/react":"1.2.6",
3940
"@ai-sdk/ui-utils":"1.2.7",
4041
"@emoji-mart/data":"1.2.1",

‎site/pnpm-lock.yaml‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎site/src/pages/ChatPage/ChatMessages.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { Loader } from "components/Loader/Loader";
1717
importReactMarkdownfrom"react-markdown";
1818
importremarkGfmfrom"remark-gfm";
1919
importrehypeRawfrom"rehype-raw";
20+
import{ChatToolInvocation}from"./ChatToolInvocation";
2021

2122
constfadeIn=keyframes`
2223
from {
@@ -259,7 +260,7 @@ const MessageBubble: FC<MessageBubbleProps> = memo(({ message }) => {
259260
case"tool-invocation":
260261
return(
261262
<divkey={partIndex}>
262-
{renderToolInvocation(part.toolInvocation,theme)}
263+
<ChatToolInvocationtoolInvocation={part.toolInvocationasany}/>
263264
</div>
264265
);
265266
case"reasoning":
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import{Meta,StoryObj}from"@storybook/react";
2+
import{ChatToolInvocation}from"./ChatToolInvocation";
3+
import{MockWorkspace}from"testHelpers/entities";
4+
5+
constmeta:Meta<typeofChatToolInvocation>={
6+
title:"pages/ChatPage/ChatToolInvocation",
7+
component:ChatToolInvocation,
8+
};
9+
10+
exportdefaultmeta;
11+
typeStory=StoryObj<typeofChatToolInvocation>;
12+
13+
exportconstGetWorkspace:Story={
14+
args:{
15+
toolInvocation:{
16+
toolName:"coder_get_workspace",
17+
args:{
18+
id:MockWorkspace.id,
19+
},
20+
result:MockWorkspace,
21+
state:"result",
22+
toolCallId:"some-id",
23+
},
24+
},
25+
};
26+
27+
exportconstCreateWorkspace:Story={
28+
args:{
29+
toolInvocation:{
30+
toolName:"coder_create_workspace",
31+
args:{
32+
name:MockWorkspace.name,
33+
rich_parameters:{},
34+
template_version_id:MockWorkspace.template_active_version_id,
35+
user:MockWorkspace.owner_name,
36+
},
37+
result:MockWorkspace,
38+
state:"result",
39+
toolCallId:"some-id",
40+
},
41+
},
42+
};
Lines changed: 227 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,252 @@
1-
import{FC}from"react";
2-
importtype{ToolInvocation}from"@ai-sdk/ui-utils";
1+
import{FC,useMemo}from"react";
32
import{useTheme}from"@emotion/react";
3+
importtype{ToolCall,ToolResult}from"@ai-sdk/provider-utils";
4+
import*asTypesGenfrom"api/typesGenerated";
5+
importCheckCirclefrom"@mui/icons-material/CheckCircle";
6+
importCircularProgressfrom"@mui/material/CircularProgress";
7+
importErrorIconfrom"@mui/icons-material/Error";
48

59
interfaceChatToolInvocationProps{
6-
toolInvocation:ToolInvocation;
10+
toolInvocation:ChatToolInvocations;
711
}
812

913
exportconstChatToolInvocation:FC<ChatToolInvocationProps>=({
1014
toolInvocation,
1115
})=>{
1216
consttheme=useTheme();
17+
18+
letpreview:React.ReactNode;
19+
switch(toolInvocation.toolName){
20+
case"coder_get_workspace":
21+
switch(toolInvocation.state){
22+
case"partial-call":
23+
case"call":
24+
preview=<div>Getting Workspace By ID...</div>;
25+
break;
26+
case"result":
27+
preview=(
28+
<divcss={{display:"flex",alignItems:"center"}}>
29+
<img
30+
src={toolInvocation.result.template_icon||"/icon/code.svg"}
31+
alt={toolInvocation.result.name}
32+
/>
33+
<div>
34+
<div>{toolInvocation.result.name}</div>
35+
<div>{toolInvocation.result.template_display_name}</div>
36+
</div>
37+
</div>
38+
);
39+
break;
40+
}
41+
break;
42+
default:
43+
switch(toolInvocation.state){
44+
case"partial-call":
45+
case"call":
46+
preview=<div>Running Tool...</div>;
47+
break;
48+
case"result":
49+
preview=<pre>{JSON.stringify(toolInvocation.result,null,2)}</pre>;
50+
break;
51+
}
52+
}
53+
54+
consthasError=useMemo(()=>{
55+
if(toolInvocation.state!=="result"){
56+
returnfalse;
57+
}
58+
return(
59+
typeoftoolInvocation.result==="object"&&
60+
"error"intoolInvocation.result
61+
);
62+
},[toolInvocation]);
63+
conststatusColor=useMemo(()=>{
64+
if(toolInvocation.state!=="result"){
65+
returntheme.palette.primary.main;
66+
}
67+
returnhasError ?theme.palette.error.main :theme.palette.success.main;
68+
},[toolInvocation,hasError]);
69+
constfriendlyName=useMemo(()=>{
70+
returntoolInvocation.toolName
71+
.replace("coder_","")
72+
.replace("_"," ")
73+
.replace(/\b\w/g,(char)=>char.toUpperCase());
74+
},[toolInvocation.toolName]);
75+
1376
return(
1477
<div
1578
css={{
1679
marginTop:theme.spacing(1),
1780
marginLeft:theme.spacing(2),
1881
borderLeft:`2px solid${theme.palette.info.light}`,
1982
paddingLeft:theme.spacing(1.5),
20-
fontSize:"0.875em",
21-
fontFamily:"monospace",
83+
display:"flex",
84+
flexDirection:"column",
85+
gap:theme.spacing(1),
2286
}}
2387
>
24-
<div
25-
css={{
26-
color:theme.palette.info.light,
27-
fontStyle:"italic",
28-
fontWeight:500,
29-
marginBottom:theme.spacing(0.5),
30-
}}
31-
>
32-
🛠️ Tool Call:{toolInvocation.toolName}
33-
</div>
34-
<div
35-
css={{
36-
backgroundColor:theme.palette.action.hover,
37-
padding:theme.spacing(1.5),
38-
borderRadius:"6px",
39-
marginTop:theme.spacing(0.5),
40-
color:theme.palette.text.secondary,
41-
}}
42-
>
43-
<divcss={{marginBottom:theme.spacing(1)}}>
44-
Arguments:
45-
<div
88+
<divcss={{display:"flex",alignItems:"center"}}>
89+
{toolInvocation.state!=="result"&&(
90+
<CircularProgress
91+
size={16}
4692
css={{
47-
marginTop:theme.spacing(0.5),
48-
fontFamily:"monospace",
49-
whiteSpace:"pre-wrap",
50-
wordBreak:"break-all",
51-
fontSize:"0.9em",
52-
color:theme.palette.text.primary,
93+
color:statusColor,
5394
}}
54-
>
55-
{JSON.stringify(toolInvocation.args,null,2)}
56-
</div>
57-
</div>
58-
{"result"intoolInvocation&&(
59-
<div>
60-
Result:
61-
<div
62-
css={{
63-
marginTop:theme.spacing(0.5),
64-
fontFamily:"monospace",
65-
whiteSpace:"pre-wrap",
66-
wordBreak:"break-all",
67-
fontSize:"0.9em",
68-
color:theme.palette.text.primary,
69-
}}
70-
>
71-
{JSON.stringify(toolInvocation.result,null,2)}
72-
</div>
73-
</div>
95+
/>
7496
)}
97+
{toolInvocation.state==="result" ?(
98+
hasError ?(
99+
<ErrorIconsx={{color:statusColor,fontSize:16}}/>
100+
) :(
101+
<CheckCirclesx={{color:statusColor,fontSize:16}}/>
102+
)
103+
) :null}
104+
<div
105+
css={{
106+
flex:1,
107+
}}
108+
>
109+
{friendlyName}
110+
</div>
75111
</div>
112+
<div>{preview}</div>
76113
</div>
77114
);
78115
};
116+
117+
exporttypeChatToolInvocations=
118+
|ToolInvocation<
119+
"coder_get_workspace",
120+
{
121+
id:string;
122+
},
123+
TypesGen.Workspace
124+
>
125+
|ToolInvocation<
126+
"coder_create_workspace",
127+
{
128+
user:string;
129+
template_version_id:string;
130+
name:string;
131+
rich_parameters:Record<string,any>;
132+
},
133+
TypesGen.Workspace
134+
>
135+
|ToolInvocation<
136+
"coder_list_workspaces",
137+
{
138+
owner:string;
139+
},
140+
Pick<
141+
TypesGen.Workspace,
142+
|"id"
143+
|"name"
144+
|"template_id"
145+
|"template_name"
146+
|"template_display_name"
147+
|"template_icon"
148+
|"template_active_version_id"
149+
|"outdated"
150+
>[]
151+
>
152+
|ToolInvocation<
153+
"coder_list_templates",
154+
{},
155+
Pick<
156+
TypesGen.Template,
157+
|"id"
158+
|"name"
159+
|"description"
160+
|"active_version_id"
161+
|"active_user_count"
162+
>[]
163+
>
164+
|ToolInvocation<
165+
"coder_template_version_parameters",
166+
{
167+
template_version_id:string;
168+
},
169+
TypesGen.TemplateVersionParameter[]
170+
>
171+
|ToolInvocation<"coder_get_authenticated_user",{},TypesGen.User>
172+
|ToolInvocation<
173+
"coder_create_workspace_build",
174+
{
175+
workspace_id:string;
176+
transition:"start"|"stop"|"delete";
177+
},
178+
TypesGen.WorkspaceBuild
179+
>
180+
|ToolInvocation<
181+
"coder_create_template_version",
182+
{
183+
template_id?:string;
184+
file_id:string;
185+
},
186+
TypesGen.TemplateVersion
187+
>
188+
|ToolInvocation<
189+
"coder_get_workspace_agent_logs",
190+
{
191+
workspace_agent_id:string;
192+
},
193+
string[]
194+
>
195+
|ToolInvocation<
196+
"coder_get_workspace_build_logs",
197+
{
198+
workspace_build_id:string;
199+
},
200+
string[]
201+
>
202+
|ToolInvocation<
203+
"coder_get_template_version_logs",
204+
{
205+
template_version_id:string;
206+
},
207+
string[]
208+
>
209+
|ToolInvocation<
210+
"coder_update_template_active_version",
211+
{
212+
template_id:string;
213+
template_version_id:string;
214+
},
215+
string
216+
>
217+
|ToolInvocation<
218+
"coder_upload_tar_file",
219+
{
220+
mime_type:string;
221+
files:Record<string,string>;
222+
},
223+
TypesGen.UploadResponse
224+
>
225+
|ToolInvocation<
226+
"coder_create_template",
227+
{
228+
name:string;
229+
},
230+
TypesGen.Template
231+
>
232+
|ToolInvocation<
233+
"coder_delete_template",
234+
{
235+
template_id:string;
236+
},
237+
string
238+
>;
239+
240+
typeToolInvocation<Nextendsstring,A,R>=
241+
|({
242+
state:"partial-call";
243+
step?:number;
244+
}&ToolCall<N,A>)
245+
|({
246+
state:"call";
247+
step?:number;
248+
}&ToolCall<N,A>)
249+
|({
250+
state:"result";
251+
step?:number;
252+
}&ToolResult<N,A,R>);

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp