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

Commit579a8ec

Browse files
kylecarbsjohnstcn
authored andcommitted
Add tool invocation stories stuff
1 parent4b57200 commit579a8ec

File tree

1 file changed

+67
-37
lines changed

1 file changed

+67
-37
lines changed

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

Lines changed: 67 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import * as TypesGen from "api/typesGenerated";
55
importCheckCirclefrom"@mui/icons-material/CheckCircle";
66
importCircularProgressfrom"@mui/material/CircularProgress";
77
importErrorIconfrom"@mui/icons-material/Error";
8+
importCodeIconfrom"@mui/icons-material/Code";
9+
importArticleIconfrom"@mui/icons-material/Article";
810

911
interfaceChatToolInvocationProps{
1012
toolInvocation:ChatToolInvocations;
@@ -14,25 +16,44 @@ export const ChatToolInvocation: FC<ChatToolInvocationProps> = ({
1416
toolInvocation,
1517
})=>{
1618
consttheme=useTheme();
19+
constfriendlyName=useMemo(()=>{
20+
returntoolInvocation.toolName
21+
.replace("coder_","")
22+
.replace(/_/g," ")
23+
.replace(/\b\w/g,(char)=>char.toUpperCase());
24+
},[toolInvocation.toolName]);
1725

1826
letpreview:React.ReactNode;
1927
switch(toolInvocation.toolName){
2028
case"coder_get_workspace":
2129
switch(toolInvocation.state){
2230
case"partial-call":
2331
case"call":
24-
preview=<div>Getting Workspace By ID...</div>;
32+
preview=(
33+
<divcss={{display:"flex",alignItems:"center",gap:theme.spacing(1),color:theme.palette.text.secondary}}>
34+
<CircularProgresssize={14}color="inherit"/>
35+
<span>Fetching workspace details...</span>
36+
</div>
37+
);
2538
break;
2639
case"result":
2740
preview=(
28-
<divcss={{display:"flex",alignItems:"center"}}>
41+
<divcss={{display:"flex",alignItems:"center",gap:theme.spacing(1.5)}}>
2942
<img
3043
src={toolInvocation.result.template_icon||"/icon/code.svg"}
31-
alt={toolInvocation.result.name}
44+
alt={toolInvocation.result.template_display_name||"Template"}
45+
css={{
46+
width:32,
47+
height:32,
48+
borderRadius:theme.shape.borderRadius/2,
49+
objectFit:"contain",
50+
}}
3251
/>
3352
<div>
34-
<div>{toolInvocation.result.name}</div>
35-
<div>{toolInvocation.result.template_display_name}</div>
53+
<divcss={{fontWeight:500,lineHeight:1.4}}>{toolInvocation.result.name}</div>
54+
<divcss={{fontSize:"0.875rem",color:theme.palette.text.secondary,lineHeight:1.4}}>
55+
{toolInvocation.result.template_display_name}
56+
</div>
3657
</div>
3758
</div>
3859
);
@@ -43,10 +64,20 @@ export const ChatToolInvocation: FC<ChatToolInvocationProps> = ({
4364
switch(toolInvocation.state){
4465
case"partial-call":
4566
case"call":
46-
preview=<div>Running Tool...</div>;
67+
preview=(
68+
<divcss={{display:"flex",alignItems:"center",gap:theme.spacing(1),color:theme.palette.text.secondary}}>
69+
<CircularProgresssize={14}color="inherit"/>
70+
<span>Executing{friendlyName}...</span>
71+
</div>
72+
);
4773
break;
4874
case"result":
49-
preview=<pre>{JSON.stringify(toolInvocation.result,null,2)}</pre>;
75+
preview=(
76+
<divcss={{display:'flex',alignItems:'center',gap:theme.spacing(1),color:theme.palette.text.secondary}}>
77+
<ArticleIconsx={{fontSize:16}}/>
78+
<span>{friendlyName} result received.</span>
79+
</div>
80+
);
5081
break;
5182
}
5283
}
@@ -57,35 +88,30 @@ export const ChatToolInvocation: FC<ChatToolInvocationProps> = ({
5788
}
5889
return(
5990
typeoftoolInvocation.result==="object"&&
91+
toolInvocation.result!==null&&
6092
"error"intoolInvocation.result
6193
);
6294
},[toolInvocation]);
6395
conststatusColor=useMemo(()=>{
6496
if(toolInvocation.state!=="result"){
65-
returntheme.palette.primary.main;
97+
returntheme.palette.info.main;
6698
}
6799
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]);
100+
},[toolInvocation,hasError,theme]);
75101

76102
return(
77103
<div
78104
css={{
79105
marginTop:theme.spacing(1),
80-
marginLeft:theme.spacing(2),
81-
borderLeft:`2px solid${theme.palette.info.light}`,
106+
marginLeft:theme.spacing(3),
107+
borderLeft:`2px solid${theme.palette.divider}`,
82108
paddingLeft:theme.spacing(1.5),
83109
display:"flex",
84110
flexDirection:"column",
85-
gap:theme.spacing(1),
111+
gap:theme.spacing(0.75),
86112
}}
87113
>
88-
<divcss={{display:"flex",alignItems:"center"}}>
114+
<divcss={{display:"flex",alignItems:"center",gap:theme.spacing(1)}}>
89115
{toolInvocation.state!=="result"&&(
90116
<CircularProgress
91117
size={16}
@@ -104,12 +130,15 @@ export const ChatToolInvocation: FC<ChatToolInvocationProps> = ({
104130
<div
105131
css={{
106132
flex:1,
133+
fontSize:'0.9rem',
134+
fontWeight:500,
135+
color:theme.palette.text.primary,
107136
}}
108137
>
109138
{friendlyName}
110139
</div>
111140
</div>
112-
<div>{preview}</div>
141+
<divcss={{paddingLeft:theme.spacing(3)}}>{preview}</div>
113142
</div>
114143
);
115144
};
@@ -120,7 +149,7 @@ export type ChatToolInvocations =
120149
{
121150
id:string;
122151
},
123-
TypesGen.Workspace
152+
TypesGen.Workspace&{error?:any}
124153
>
125154
|ToolInvocation<
126155
"coder_create_workspace",
@@ -130,7 +159,7 @@ export type ChatToolInvocations =
130159
name:string;
131160
rich_parameters:Record<string,any>;
132161
},
133-
TypesGen.Workspace
162+
TypesGen.Workspace&{error?:any}
134163
>
135164
|ToolInvocation<
136165
"coder_list_workspaces",
@@ -147,7 +176,7 @@ export type ChatToolInvocations =
147176
|"template_icon"
148177
|"template_active_version_id"
149178
|"outdated"
150-
>[]
179+
>[]&{error?:any}
151180
>
152181
|ToolInvocation<
153182
"coder_list_templates",
@@ -159,83 +188,84 @@ export type ChatToolInvocations =
159188
|"description"
160189
|"active_version_id"
161190
|"active_user_count"
162-
>[]
191+
>[]&{error?:any}
163192
>
164193
|ToolInvocation<
165194
"coder_template_version_parameters",
166195
{
167196
template_version_id:string;
168197
},
169-
TypesGen.TemplateVersionParameter[]
198+
TypesGen.TemplateVersionParameter[]&{error?:any}
170199
>
171-
|ToolInvocation<"coder_get_authenticated_user",{},TypesGen.User>
200+
|ToolInvocation<"coder_get_authenticated_user",{},TypesGen.User&{error?:any}>
172201
|ToolInvocation<
173202
"coder_create_workspace_build",
174203
{
175204
workspace_id:string;
176205
transition:"start"|"stop"|"delete";
177206
},
178-
TypesGen.WorkspaceBuild
207+
TypesGen.WorkspaceBuild&{error?:any}
179208
>
180209
|ToolInvocation<
181210
"coder_create_template_version",
182211
{
183212
template_id?:string;
184213
file_id:string;
185214
},
186-
TypesGen.TemplateVersion
215+
TypesGen.TemplateVersion&{error?:any}
187216
>
188217
|ToolInvocation<
189218
"coder_get_workspace_agent_logs",
190219
{
191220
workspace_agent_id:string;
192221
},
193-
string[]
222+
string[]&{error?:any}
194223
>
195224
|ToolInvocation<
196225
"coder_get_workspace_build_logs",
197226
{
198227
workspace_build_id:string;
199228
},
200-
string[]
229+
string[]&{error?:any}
201230
>
202231
|ToolInvocation<
203232
"coder_get_template_version_logs",
204233
{
205234
template_version_id:string;
206235
},
207-
string[]
236+
string[]&{error?:any}
208237
>
209238
|ToolInvocation<
210239
"coder_update_template_active_version",
211240
{
212241
template_id:string;
213242
template_version_id:string;
214243
},
215-
string
244+
string&{error?:any}
216245
>
217246
|ToolInvocation<
218247
"coder_upload_tar_file",
219248
{
220249
mime_type:string;
221250
files:Record<string,string>;
222251
},
223-
TypesGen.UploadResponse
252+
TypesGen.UploadResponse&{error?:any}
224253
>
225254
|ToolInvocation<
226255
"coder_create_template",
227256
{
228257
name:string;
229258
},
230-
TypesGen.Template
259+
TypesGen.Template&{error?:any}
231260
>
232261
|ToolInvocation<
233262
"coder_delete_template",
234263
{
235264
template_id:string;
236265
},
237-
string
238-
>;
266+
string&{error?:any}
267+
>
268+
|ToolInvocation<string,Record<string,any>,any&{error?:any}>;
239269

240270
typeToolInvocation<Nextendsstring,A,R>=
241271
|({
@@ -249,4 +279,4 @@ type ToolInvocation<N extends string, A, R> =
249279
|({
250280
state:"result";
251281
step?:number;
252-
}&ToolResult<N,A,R>);
282+
}&ToolResult<N,A,R&{error?:any}>);

0 commit comments

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