Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 5a879a9

Browse files
kylecarbskylecarbs
committed
Add tool invocation stories stuff
1 parent a333c66 commit 5a879a9

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
import CheckCircle from "@mui/icons-material/CheckCircle";
66
import CircularProgress from "@mui/material/CircularProgress";
77
import ErrorIcon from "@mui/icons-material/Error";
8+
import CodeIcon from "@mui/icons-material/Code";
9+
import ArticleIcon from "@mui/icons-material/Article";
810

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

1826
let preview: 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+
<div css={{ display: "flex", alignItems: "center", gap: theme.spacing(1), color: theme.palette.text.secondary }}>
34+
<CircularProgress size={14} color="inherit" />
35+
<span>Fetching workspace details...</span>
36+
</div>
37+
);
2538
break;
2639
case "result":
2740
preview = (
28-
<div css={{ display: "flex", alignItems: "center" }}>
41+
<div css={{ 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+
<div css={{ fontWeight: 500, lineHeight: 1.4 }}>{toolInvocation.result.name}</div>
54+
<div css={{ 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+
<div css={{ display: "flex", alignItems: "center", gap: theme.spacing(1), color: theme.palette.text.secondary }}>
69+
<CircularProgress size={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+
<div css={{ display: 'flex', alignItems: 'center', gap: theme.spacing(1), color: theme.palette.text.secondary }}>
77+
<ArticleIcon sx={{ 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
typeof toolInvocation.result === "object" &&
91+
toolInvocation.result !== null &&
6092
"error" in toolInvocation.result
6193
);
6294
}, [toolInvocation]);
6395
const statusColor = useMemo(() => {
6496
if (toolInvocation.state !== "result") {
65-
return theme.palette.primary.main;
97+
return theme.palette.info.main;
6698
}
6799
return hasError ? theme.palette.error.main : theme.palette.success.main;
68-
}, [toolInvocation, hasError]);
69-
const friendlyName = useMemo(() => {
70-
return toolInvocation.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-
<div css={{ display: "flex", alignItems: "center" }}>
114+
<div css={{ 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+
<div css={{ 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
type ToolInvocation<N extends string, 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)