Skip to content

Commit 7f99514

Browse files
g-dannag-danna
committed
ui improvements for markdown, spacing, visual hirerachy and emphasis removal of taiwlind colors in response parts in favour of vs code theme tokens
1 parent 7e003cb commit 7f99514

File tree

4 files changed

+66
-88
lines changed

4 files changed

+66
-88
lines changed

‎src/model.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,7 @@ export enum ToolType {
212212
AskFollowupQuestions = 'AskFollowupQuestions',
213213
AttemptCompletion = 'AttemptCompletion',
214214
RepoMapGeneration = 'RepoMapGeneration',
215+
TerminalCommand = 'TerminalCommand',
215216
}
216217

217218
export type ToolTypeType = `${ToolType}`;

‎src/webviews/components/exchange/response.tsx‎

Lines changed: 50 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
11
import * as React from 'react';
2-
import { Response, ResponsePart, ToolParameter, ToolParameterType } from '../../../model';
2+
import { Response, ResponsePart, ToolParameter, ToolParameterType, ToolType } from '../../../model';
33
import MarkdownRenderer from '../markdown-renderer';
44
import { ContextSummary } from '../context-summary';
55
import { Exchange, ExchangeContent, ExchangeHeader } from './exchange-base';
66
import FileIcon from 'components/fileicon';
77

8-
type ToolType =
9-
| 'ListFiles'
10-
| 'SearchFileContentWithRegex'
11-
| 'OpenFile'
12-
| 'CodeEditing'
13-
| 'LSPDiagnostics'
14-
| 'AskFollowupQuestions'
15-
| 'AttemptCompletion'
16-
| 'RepoMapGeneration';
17-
18-
const toolIcons: Record<ToolType, string> = {
19-
ListFiles: 'codicon-search',
20-
SearchFileContentWithRegex: 'codicon-regex',
21-
OpenFile: 'codicon-folder-opened',
22-
CodeEditing: 'codicon-code',
23-
LSPDiagnostics: 'codicon-checklist',
24-
AskFollowupQuestions: 'codicon-comment-discussion',
25-
AttemptCompletion: 'codicon-wand',
26-
RepoMapGeneration: 'codicon-folder-library',
8+
const toolTypesInfo: Record<ToolType, { label: string; codiconId: string }> = {
9+
[ToolType.AskFollowupQuestions]: { label: 'Follow up question', codiconId: 'comment-discussion' },
10+
[ToolType.ListFiles]: { label: 'List files', codiconId: 'search' },
11+
[ToolType.OpenFile]: { label: 'Reading', codiconId: 'folder-opened' },
12+
[ToolType.SearchFileContentWithRegex]: {
13+
label: 'Search content file with regex',
14+
codiconId: 'regex',
15+
},
16+
[ToolType.TerminalCommand]: { label: 'Terminal command', codiconId: 'terminal' },
17+
[ToolType.CodeEditing]: { label: 'Editing', codiconId: 'code' },
18+
[ToolType.LSPDiagnostics]: { label: 'LSP Diagnostics', codiconId: 'checklist' },
19+
[ToolType.AttemptCompletion]: { label: 'Attempt completion', codiconId: 'wand' },
20+
[ToolType.RepoMapGeneration]: { label: 'Repo map generation', codiconId: 'folder-library' },
2721
};
2822

2923
const Spinner = () => (
@@ -88,76 +82,61 @@ function ParameterContent({
8882

8983
case ToolParameter.Command:
9084
return (
91-
<div className="bg-sideBarSectionHeader-background border-sideBarSectionHeader-border rounded border text-xs">
92-
<div className="text-editorHint-foreground border-sideBarSectionHeader-border flex gap-2 border-b px-2 py-2">
93-
<span aria-hidden className="codicon codicon-terminal flex-shrink-0 translate-y-0.5" />
94-
<span>Terminal commands</span>
95-
</div>
96-
<div className="space-y-1 px-2 py-2 font-mono">
85+
<div className="flex-flex-col relative isolate bg-terminal-background p-2 text-xs text-terminal-foreground">
86+
<div className="absolute inset-0 -z-10 rounded-xs border border-terminal-border opacity-50" />
87+
<pre className="-mt-0.5 flex flex-col space-y-1">
9788
{content.split('\n').map((line, i) => (
98-
<div
99-
key={i}
100-
className={
101-
line === delta ? 'text-editor-selectionForeground' : 'text-editor-foreground'
102-
}
103-
>
104-
<span className="text-editor-foreground">$</span> {line}
105-
</div>
89+
<p key={i} className="overflow-auto">
90+
<span className="opacity-80">$</span> {line}
91+
</p>
10692
))}
107-
</div>
93+
</pre>
10894
</div>
10995
);
11096

11197
case ToolParameter.Question:
11298
return (
113-
<div className="rounded border border-l-4 border-blue-500 bg-blue-500/10 p-4">
114-
<div className="mb-2 flex gap-2 text-blue-400">
115-
<span
116-
aria-hidden
117-
className="codicon codicon-comment-discussion flex-shrink-0 translate-y-0.5"
118-
/>
119-
<span className="font-medium">Question</span>
120-
</div>
121-
<div className="text-zinc-300">{content}</div>
99+
<div className="relative isolate p-2">
100+
<div className="bg-accent absolute inset-0 -z-10 opacity-10" />
101+
<div className="border-accent absolute inset-0 -z-10 border-l-2 opacity-50" />
102+
<div className="text-foreground">{content}</div>
122103
</div>
123104
);
124105

125106
case ToolParameter.Result:
126107
return (
127-
<div className="rounded border border-green-600/30 bg-green-950/30 px-3 py-2">
128-
<div className="mb-2 flex gap-2 text-green-400">
129-
<span aria-hidden className="codicon codicon-check flex-shrink translate-y-0.5" />
130-
<span className="font-medium">Result</span>
131-
</div>
108+
<div className="relative isolate p-3 text-foreground">
109+
<div className="bg-success absolute inset-0 -z-10 opacity-10" />
110+
<div className="border-success absolute inset-0 -z-10 border-l-2 opacity-50" />
132111
<MarkdownRenderer rawMarkdown={content} />
133112
</div>
134113
);
135114

136115
case ToolParameter.RegexPattern:
137116
case ToolParameter.FilePattern:
138117
return (
139-
<div className="rounded-xs bg-input-background p-3 font-mono text-xs">
118+
<pre className="relative isolate rounded-xs bg-input-background p-2 text-xs">
119+
<div className="absolute inset-0 -z-10 rounded-xs border border-input-border opacity-50" />
140120
{content.split('\n').map((line, i) => (
141-
<div key={i}>{line}</div>
121+
<p key={i}>{line}</p>
142122
))}
143-
</div>
123+
</pre>
144124
);
145125

146126
case ToolParameter.Recursive:
147127
return (
148-
<div className="text-sm">
149-
<span>
150-
<span className="text-description">Recursive: </span>
151-
{content === 'true' ? 'Yes' : 'No'}
152-
</span>
128+
<div className="relative isolate rounded-xs p-2 text-xs">
129+
<div className="absolute inset-0 -z-10 rounded-xs bg-terminal-background opacity-50" />
130+
<span className="text-description">Recursive: </span>
131+
{content === 'true' ? 'Yes' : 'No'}
153132
</div>
154133
);
155134

156135
default:
157136
return (
158-
<div className="p-3 font-mono text-sm">
137+
<div className="p-2 text-sm">
159138
{content.split('\n').map((line, i) => (
160-
<div key={i}>{line}</div>
139+
<p key={i}>{line}</p>
161140
))}
162141
</div>
163142
);
@@ -209,12 +188,12 @@ function renderPart(part: ResponsePart, index: number, allParts: ResponsePart[])
209188
return (
210189
<div className="flex flex-wrap gap-2">
211190
{part.commands.map((command) => (
212-
<button
191+
<pre // Why was this a button?
213192
key={command.command}
214-
className="flex gap-2 rounded px-2 py-1.5 text-start text-xs text-link-foreground transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-focus-border"
193+
className="flex gap-2 rounded-xs border border-terminal-border bg-terminal-background px-2 py-1.5"
215194
>
216195
{command.title}
217-
</button>
196+
</pre>
218197
))}
219198
</div>
220199
);
@@ -231,36 +210,19 @@ function renderPart(part: ResponsePart, index: number, allParts: ResponsePart[])
231210
</div>
232211
</div>
233212
);
234-
case 'toolType':
235-
const icon = (
236-
<span
237-
aria-hidden
238-
className={`codicon flex-shrink-0 translate-y-0.5 ${toolIcons[part.toolType as ToolType] || 'codicon-question'}`}
239-
/>
240-
);
241-
242-
let label = part.toolType as string;
243-
244-
const toolTypeLabels = {
245-
AskFollowupQuestions: 'Follow up question',
246-
CodeEditing: 'Editing',
247-
LSPDiagnostics: 'LSP Diagnostics',
248-
RepoMapGeneration: 'Repo map generation',
249-
AttemptCompletion: 'Attempt completion',
250-
ListFiles: 'List files',
251-
OpenFile: 'Reading',
252-
SearchFileContentWithRegex: 'Search content file with regex',
253-
TerminalCommand: 'Terminal command',
254-
};
255-
256-
label = toolTypeLabels[part.toolType] || 'Unknown tool type';
213+
case 'toolType': {
214+
const { label, codiconId } = toolTypesInfo[part.toolType];
257215

258216
return (
259-
<div className="flex gap-2">
260-
{icon}
261-
<span className="text-sm">{label}</span>
217+
<div className="mt-4 flex gap-1 pr-2 text-description">
218+
<span
219+
aria-hidden
220+
className={`codicon flex-shrink-0 translate-y-0.5 opacity-60 codicon-${codiconId}`}
221+
/>
222+
<span className="text-sm opacity-75">{label}</span>
262223
</div>
263224
);
225+
}
264226
default:
265227
return null;
266228
}

‎src/webviews/style.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,16 @@ body {
5151
.markdown-content pre.shiki code {
5252
@apply inline-block min-w-full rounded-none p-2;
5353
}
54+
55+
.markdown-content {
56+
@apply space-y-2;
57+
}
58+
59+
.markdown-content :is(ol, ul) {
60+
@apply pl-4;
61+
}
62+
63+
.markdown-content li::before {
64+
content: '•';
65+
@apply -ml-1 mr-2 opacity-75;
66+
}

‎tailwind.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ export default {
1818
'error-foreground': 'var(--vscode-errorForeground)',
1919
current: 'currentColor',
2020
'disabled-foreground': 'var(--vscode-disabledForeground)',
21+
success: 'var(--vscode-terminal-ansiBrightGreen)',
22+
accent: 'var(--vscode-terminal-ansiBrightBlue)',
2123
widget: {
2224
border: 'var(--vscode-widget-border)',
2325
},

0 commit comments

Comments
 (0)