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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy