From f79d4380844df1a8e708955d0c00835b2a78b0c0 Mon Sep 17 00:00:00 2001 From: Andrew Pareles Date: Mon, 17 Mar 2025 02:19:51 -0700 Subject: [PATCH] update styles --- .../contrib/void/browser/chatThreadService.ts | 6 +- .../react/src/markdown/ChatMarkdownRender.tsx | 2 +- .../react/src/sidebar-tsx/SidebarChat.tsx | 177 ++++++++++++------ .../void/browser/react/tailwind.config.js | 5 +- 4 files changed, 125 insertions(+), 65 deletions(-) diff --git a/src/vs/workbench/contrib/void/browser/chatThreadService.ts b/src/vs/workbench/contrib/void/browser/chatThreadService.ts index 537da98e..b42a8591 100644 --- a/src/vs/workbench/contrib/void/browser/chatThreadService.ts +++ b/src/vs/workbench/contrib/void/browser/chatThreadService.ts @@ -364,15 +364,15 @@ class ChatThreadService extends Disposable implements IChatThreadService { content: 'Successfully edited the file at /Users/username/Project/main.js', result: { type: 'success', - params: { uri: URI.file('/Users/username/Project/main.js'), changeDescription: 'Add console.log statement' }, + params: { uri: URI.file('/Users/username/Project/main.js'), changeDescription: 'I think we should do this:\n```typescript\n//Add console.log statement\n for i in ...\n\t\tdo:\nabc\n```' }, value: {} }, } satisfies ToolMessage<'edit'>, { role: 'tool_request', name: 'edit', - params: { uri: URI.file('/Users/username/Project/main.js'), changeDescription: 'Add console.log statement' }, - paramsStr: '{"uri": "/Users/username/Project/main.js", "changeDescription": "Add console.log statement"}', + params: { uri: URI.file('/Users/username/Project/main.js'), changeDescription: 'I think we should do this:\n```typescript\n//Add console.log statement\n for i in ...\n\t\tdo:\nabc\n```' }, + paramsStr: '{"uri": "/Users/username/Project/main.js", "changeDescription": "I think we should do this:```Add console.log statement\n for i in ...\n\t\tdo:\nabc```"}', id: 'request-5', } satisfies ToolRequestApproval<'edit'>, diff --git a/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx b/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx index e644f191..f1c5072e 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx @@ -296,7 +296,7 @@ const RenderToken = ({ token, inPTag, codeURI, chatMessageLocation, tokenIdx, .. ))} - if (inPTag) return {contents} + if (inPTag) return {contents} return

{contents} diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx index 87e73e63..ecc73f98 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx @@ -952,8 +952,90 @@ const UserMessageComponent = ({ chatMessage, messageIdx, isCommitted }: { chatMe } +const SmallProseWrapper = ({ children }: { children: React.ReactNode }) => { + return

+ {children} +
+} + +const ProseWrapper = ({ children }: { children: React.ReactNode }) => { + return
+ {children} +
+} const AssistantMessageComponent = ({ chatMessage, isCommitted, messageIdx, isLast }: { chatMessage: ChatMessage & { role: 'assistant' }, messageIdx: number, isCommitted: boolean, isLast: boolean, }) => { const accessor = useAccessor() @@ -976,59 +1058,51 @@ const AssistantMessageComponent = ({ chatMessage, isCommitted, messageIdx, isLas if (isEmpty && !isLastAndLoading) return null return <> -
- - {/* reasoning token */} - {hasReasoning && + {/* reasoning token */} + {hasReasoning && + - } + + } - {/* assistant message */} + {/* assistant message */} + - {/* loading indicator */} {!isCommitted && } -
+ } +const ReasoningWrapper = ({ isDoneReasoning, isStreaming, children }: { isDoneReasoning: boolean, isStreaming: boolean, children: React.ReactNode }) => { + const isDone = isDoneReasoning || !isStreaming + const isWriting = !isDone + const [isOpen, setIsOpen] = useState(isWriting) + useEffect(() => { + if (!isWriting) setIsOpen(false) // if just finished reasoning, close + }, [isWriting]) + return : ''} isOpen={isOpen} onClick={() => setIsOpen(v => !v)}> + +
+ {children} +
+ + +} + + + // should either be past or "-ing" tense, not present tense. Eg. when the LLM searches for something, the user expects it to say "I searched for X" or "I am searching for X". Not "I search X". const toolNameToTitle: Record = { @@ -1168,13 +1242,6 @@ const EditToolApplyButton = ({ changeDescription, applyBoxId, uri }: { changeDes } -const EditToolChildren = ({ uri, changeDescription }: { uri: URI, changeDescription: string }) => { - return -
- -
- -} const TerminalToolChildren = ({ command, terminalId, result, resolveReason }: { command: string, terminalId: string, result: string, resolveReason: ResolveReason }) => { const accessor = useAccessor() const terminalToolsService = accessor.get('ITerminalToolService') @@ -1192,7 +1259,7 @@ const TerminalToolChildren = ({ command, terminalId, result, resolveReason }: { className='w-full overflow-auto py-1' onClick={() => terminalToolsService.openTerminal(terminalId)} /> -
+
{resolveReason.type === 'bgtask' ? 'Result so far:\n' : null} {result} {resultStr} @@ -1200,24 +1267,18 @@ const TerminalToolChildren = ({ command, terminalId, result, resolveReason }: { } - - -const ReasoningWrapper = ({ isDoneReasoning, isStreaming, children }: { isDoneReasoning: boolean, isStreaming: boolean, children: React.ReactNode }) => { - const isDone = isDoneReasoning || !isStreaming - const isWriting = !isDone - const [isOpen, setIsOpen] = useState(isWriting) - useEffect(() => { - if (!isWriting) setIsOpen(false) // if just finished reasoning, close - }, [isWriting]) - return : ''} isOpen={isOpen} onClick={() => setIsOpen(v => !v)}> - -
- {children} -
- - +const EditToolChildren = ({ uri, changeDescription }: { uri: URI, changeDescription: string }) => { + return +
+ + + +
+ } + + const toolNameToComponent: { [T in ToolName]: { requestWrapper: T extends ToolNameWithApproval ? ((props: { toolRequest: ToolRequestApproval }) => React.ReactNode) : null, resultWrapper: (props: { toolMessage: ToolMessage, messageIdx: number }) => React.ReactNode, diff --git a/src/vs/workbench/contrib/void/browser/react/tailwind.config.js b/src/vs/workbench/contrib/void/browser/react/tailwind.config.js index be4f9a13..95586bb3 100644 --- a/src/vs/workbench/contrib/void/browser/react/tailwind.config.js +++ b/src/vs/workbench/contrib/void/browser/react/tailwind.config.js @@ -9,7 +9,7 @@ module.exports = { content: ['./src2/**/*.{jsx,tsx}'], // uses these files to decide how to transform the css file theme: { extend: { - typography: { + typography: theme => ({ DEFAULT: { css: { '--tw-prose-body': 'var(--void-fg-1)', @@ -30,8 +30,7 @@ module.exports = { '--tw-prose-td-borders': 'var(--void-border-4)', }, }, - - }, + }), fontSize: { xs: '10px', sm: '11px',