Skip to content

Commit c644cd6

Browse files
will-lp1will-lp1
committed
Clean up tool design
1 parent fedd5d0 commit c644cd6

File tree

1 file changed

+91
-76
lines changed

1 file changed

+91
-76
lines changed

‎apps/snow-leopard/components/document/document.tsx‎

Lines changed: 91 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ const getActionText = (
1414
) => {
1515
switch (type) {
1616
case 'create':
17-
return tense === 'present' ? 'Creating document' : 'Created';
17+
return tense === 'present' ? 'Creating document' : 'Document created';
1818
case 'stream':
19-
return tense === 'present' ? 'Streaming content for' : 'Streamed';
19+
return tense === 'present' ? 'Streaming content for' : 'Content streamed for';
2020
case 'update':
21-
return tense === 'present' ? 'Updating' : 'Updated';
21+
return tense === 'present' ? 'Proposing update for' : 'Update proposed for';
2222
case 'request-suggestions':
2323
return tense === 'present'
24-
? 'Adding suggestions'
25-
: 'Added suggestions to';
24+
? 'Adding suggestions for'
25+
: 'Suggestions added to';
2626
default:
2727
return null;
2828
}
@@ -74,77 +74,93 @@ function PureDocumentToolResult({
7474

7575
if (result.error) {
7676
return (
77-
<div className="bg-destructive/10 border border-destructive/20 text-destructive text-sm py-2 px-3 rounded-xl w-fit flex flex-col gap-1 items-start">
78-
<span>{`Failed to ${type} document:`}</span>
79-
<span className="text-xs font-mono">{result.error}</span>
77+
<div className="bg-background border border-destructive/50 rounded-xl w-full max-w-md flex flex-row items-center text-sm overflow-hidden p-3 gap-3">
78+
<div className="text-destructive flex-shrink-0">
79+
<MessageIcon size={16} />
80+
</div>
81+
<div className="flex-grow">
82+
<div className="text-destructive font-medium">
83+
{`Failed to ${type} document${result.title ? ` "${result.title}"` : ''}`}
84+
</div>
85+
<div className="text-xs text-destructive/80 mt-0.5">
86+
<span className="font-mono">{result.error}</span>
87+
</div>
88+
</div>
8089
</div>
8190
)
8291
}
8392

84-
if (type === 'create') {
85-
const message = result.content || 'Document initialized successfully.';
93+
if (isUpdateProposal) {
8694
return (
87-
<div className="bg-green-50 border border-green-200 text-green-800 text-sm py-2 px-3 rounded-xl w-fit flex items-center gap-2">
88-
<CheckCircleFillIcon size={16} />
89-
<span>{message}</span>
90-
</div>
91-
);
92-
}
95+
<div className="bg-background border rounded-xl w-full max-w-md flex flex-col items-start text-sm overflow-hidden">
96+
<div className="p-3 flex flex-row gap-3 items-start w-full border-b bg-muted/30">
97+
<div className="text-muted-foreground mt-0.5 flex-shrink-0">
98+
<PencilEditIcon size={16}/>
99+
</div>
100+
<div className="text-left flex-grow text-foreground">
101+
{`${getActionText(type, 'past')} "${result.title ?? 'document'}"`}
102+
{result.status && <span className="text-xs text-muted-foreground ml-1">({result.status})</span>}
103+
</div>
104+
</div>
93105

94-
if (type === 'stream') {
95-
const message = result.content || 'Content generation completed.';
96-
return (
97-
<div className="bg-blue-50 border border-blue-200 text-blue-800 text-sm py-2 px-3 rounded-xl w-fit flex items-center gap-2">
98-
<CheckCircleFillIcon size={16} />
99-
<span>{message}</span>
106+
<div className="p-3 w-full max-h-60 overflow-y-auto text-xs">
107+
<DiffView
108+
oldContent={result.originalContent ?? ''}
109+
newContent={result.newContent ?? ''}
110+
/>
111+
</div>
112+
113+
<div className="p-2 border-t w-full flex justify-end bg-muted/30">
114+
<Button
115+
size="sm"
116+
onClick={handleApplyUpdate}
117+
disabled={isApplied}
118+
className={cn(
119+
"text-xs flex items-center",
120+
isApplied && "bg-green-600 hover:bg-green-700 text-white"
121+
)}
122+
>
123+
<span className="mr-1.5">
124+
<CheckIcon size={14} />
125+
</span>
126+
{isApplied ? 'Applied' : 'Apply Changes'}
127+
</Button>
128+
</div>
100129
</div>
101130
);
102131
}
103132

104-
return (
105-
<div className="bg-background border rounded-xl w-full max-w-md flex flex-col items-start text-sm overflow-hidden">
106-
<div className="p-3 flex flex-row gap-3 items-start w-full border-b bg-muted/30">
107-
<div className="text-muted-foreground mt-0.5">
108-
<PencilEditIcon />
109-
</div>
110-
<div className="text-left flex-grow">
111-
{`Proposed update for "${result.title}"`}
112-
{result.status && <span className="text-xs text-muted-foreground ml-1">({result.status})</span>}
113-
</div>
114-
</div>
133+
const successMessage =
134+
type === 'create'
135+
? (result.content || 'Document initialized successfully.')
136+
: type === 'stream'
137+
? (result.content || 'Content generation completed.')
138+
: 'Operation successful.';
115139

116-
<div className="p-3 w-full max-h-60 overflow-y-auto text-xs">
117-
<DiffView
118-
oldContent={result.originalContent ?? ''}
119-
newContent={result.newContent ?? ''}
120-
/>
121-
</div>
140+
const SuccessIcon = CheckCircleFillIcon;
122141

123-
<div className="p-2 border-t w-full flex justify-end bg-muted/30">
124-
<Button
125-
size="sm"
126-
onClick={handleApplyUpdate}
127-
disabled={isApplied}
128-
className={cn(
129-
"text-xs flex items-center",
130-
isApplied && "bg-green-600 hover:bg-green-700 text-white"
131-
)}
132-
>
133-
<span className="mr-1.5">
134-
<CheckIcon size={14} />
135-
</span>
136-
{isApplied ? 'Applied' : 'Apply Changes'}
137-
</Button>
138-
</div>
142+
return (
143+
<div className="bg-background border rounded-xl w-full max-w-md flex flex-row items-center text-sm overflow-hidden p-3 gap-3">
144+
<div className="text-green-600 flex-shrink-0">
145+
<SuccessIcon size={16}/>
146+
</div>
147+
<div className="flex-grow">
148+
<div className="text-foreground">
149+
{`${getActionText(type, 'past')} ${result.title ? `"${result.title}"` : '(active document)'}`}
150+
</div>
151+
<div className="text-xs text-muted-foreground mt-0.5">
152+
{successMessage}
153+
</div>
154+
</div>
139155
</div>
140156
);
141157
}
142158

143-
export const DocumentToolResult = memo(PureDocumentToolResult, () => true);
159+
export const DocumentToolResult = memo(PureDocumentToolResult);
144160

145161
interface DocumentToolCallProps {
146162
type: 'create' | 'stream' | 'update' | 'request-suggestions';
147-
args: { title: string };
163+
args: { title?: string };
148164
isReadonly: boolean;
149165
}
150166

@@ -153,40 +169,39 @@ function PureDocumentToolCall({
153169
args = { title: '' },
154170
isReadonly,
155171
}: DocumentToolCallProps) {
156-
const { setArtifact, artifact: localArtifact } = useArtifact();
172+
const { artifact: localArtifact } = useArtifact();
157173
const artTitle = localArtifact?.title ?? '';
158174

159175
const titleArg = args.title ?? '';
160176
const displayTitle = type === 'create' && artTitle.trim()
161177
? artTitle
162178
: titleArg.trim();
163179

180+
const CallIcon =
181+
type === 'create' ? FileIcon :
182+
type === 'stream' ? MessageIcon :
183+
type === 'update' ? PencilEditIcon :
184+
type === 'request-suggestions' ? MessageIcon :
185+
LoaderIcon;
186+
164187
return (
165-
<div
166-
className="w-fit border py-2 px-3 rounded-xl flex flex-row items-start justify-between gap-3"
188+
<div
189+
className="bg-background border rounded-xl w-full max-w-md flex flex-row items-center justify-between gap-3 text-sm overflow-hidden"
167190
>
168-
<div className="flex flex-row gap-3 items-start">
169-
<div className="text-zinc-500 mt-1">
170-
{type === 'create' ? (
171-
<FileIcon />
172-
) : type === 'stream' ? (
173-
<LoaderIcon />
174-
) : type === 'update' ? (
175-
<PencilEditIcon />
176-
) : type === 'request-suggestions' ? (
177-
<MessageIcon />
178-
) : null}
191+
<div className="p-3 flex flex-row gap-3 items-center w-full bg-muted/30">
192+
<div className="text-muted-foreground flex-shrink-0">
193+
<CallIcon size={16}/>
179194
</div>
180-
181-
<div className="text-left">
195+
<div className="text-left flex-grow text-foreground">
182196
{`${getActionText(type, 'present')}`}{' '}
183197
{displayTitle ? `"${displayTitle}"` : '(active document)'}
184198
</div>
199+
<div className="animate-spin text-muted-foreground flex-shrink-0">
200+
<LoaderIcon size={16} />
201+
</div>
185202
</div>
186-
187-
<div className="animate-spin mt-1">{<LoaderIcon />}</div>
188203
</div>
189204
);
190205
}
191206

192-
export const DocumentToolCall = memo(PureDocumentToolCall, () => true);
207+
export const DocumentToolCall = memo(PureDocumentToolCall);

0 commit comments

Comments
 (0)