Elgato_dark/void
1
0
Fork 0
mirror of https://github.com/voideditor/void synced 2026-05-24 09:58:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update styles

Browse source
This commit is contained in:
Andrew Pareles 2025-03-17 02:19:51 -07:00
parent 35eb93d829
commit f79d438084
4 changed files with 125 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/vs/workbench/contrib/void/browser/chatThreadService.ts
View file

@ -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'>,

2
src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx
View file

@ -296,7 +296,7 @@ const RenderToken = ({ token, inPTag, codeURI, chatMessageLocation, tokenIdx, ..
))}
</>
if (inPTag) return <span className='block my-2'>{contents}</span>
if (inPTag) return <span className='block'>{contents}</span>
return <p>
{contents}

177
src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
View file

@ -952,8 +952,90 @@ const UserMessageComponent = ({ chatMessage, messageIdx, isCommitted }: { chatMe
}
const SmallProseWrapper = ({ children }: { children: React.ReactNode }) => {
return <div className='
text-void-fg-4
prose
prose-sm
break-words
max-w-none
leading-snug
text-[13px]
prose-h1:text-[14px]
prose-h1:my-4
prose-h2:text-[13px]
prose-h2:my-4
prose-h3:text-[13px]
prose-h3:my-3
prose-h4:text-[13px]
prose-h4:my-2
prose-p:my-1
prose-p:leading-snug
prose-ul:my-2
prose-ul:pl-4
prose-ul:list-outside
prose-ul:list-disc
prose-ul:leading-snug
prose-ol:my-2
prose-ol:pl-4
prose-ol:list-outside
prose-ol:list-decimal
prose-ol:leading-snug
marker:text-inherit
prose-blockquote:pl-2
prose-blockquote:my-2
prose-code:text-[12px]
prose-code:before:content-none
prose-code:after:content-none
prose-pre:text-[12px]
prose-pre:p-2
prose-pre:my-2
prose-table:text-[13px]
'>
{children}
</div>
}
const ProseWrapper = ({ children }: { children: React.ReactNode }) => {
return <div className='
text-void-fg-2
prose
prose-sm
break-words
prose-p:block
prose-pre:my-2
marker:text-inherit
prose-ol:list-outside
prose-ol:list-decimal
prose-ul:list-outside
prose-ul:list-disc
prose-li:my-0
prose-code:before:content-none
prose-code:after:content-none
prose-headings:prose-sm
prose-headings:font-bold
prose-p:leading-normal
prose-ol:leading-normal
prose-ul:leading-normal
max-w-none
'
>
{children}
</div>
}
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 <>
<div
className='
text-void-fg-2
prose
prose-sm
break-words
prose-p:block
prose-pre:my-2
marker:text-inherit
prose-ol:list-outside
prose-ol:list-decimal
prose-ul:list-outside
prose-ul:list-disc
prose-li:my-0
prose-code:before:content-none
prose-code:after:content-none
prose-headings:prose-sm
prose-headings:font-bold
prose-p:leading-normal
prose-ol:leading-normal
prose-ul:leading-normal
max-w-none
'
>
{/* reasoning token */}
{hasReasoning && <ReasoningWrapper isDoneReasoning={isDoneReasoning} isStreaming={!isCommitted}>
{/* reasoning token */}
{hasReasoning && <ReasoningWrapper isDoneReasoning={isDoneReasoning} isStreaming={!isCommitted}>
<SmallProseWrapper>
<ChatMarkdownRender
string={reasoningStr}
chatMessageLocation={chatMessageLocation}
isApplyEnabled={false}
isLinkDetectionEnabled={true}
inPTag={true}
/>
</ReasoningWrapper>}
</SmallProseWrapper>
</ReasoningWrapper>}
{/* assistant message */}
{/* assistant message */}
<ProseWrapper>
<ChatMarkdownRender
string={chatMessage.content || ''}
chatMessageLocation={chatMessageLocation}
isApplyEnabled={true}
isLinkDetectionEnabled={true}
/>
{/* loading indicator */}
{!isCommitted && <IconLoading className='opacity-50 text-sm' />}
</div>
</ProseWrapper>
</>
}
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 <ToolHeaderWrapper title='Reasoning' desc1={isWriting ? <IconLoading /> : ''} isOpen={isOpen} onClick={() => setIsOpen(v => !v)}>
<ToolContentsWrapper className='bg-void-bg-3'>
<div className='!select-text cursor-auto'>
{children}
</div>
</ToolContentsWrapper>
</ToolHeaderWrapper>
}
// 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<ToolName, { past: string, proposed: string }> = {
@ -1168,13 +1242,6 @@ const EditToolApplyButton = ({ changeDescription, applyBoxId, uri }: { changeDes
}
const EditToolChildren = ({ uri, changeDescription }: { uri: URI, changeDescription: string }) => {
return <ToolContentsWrapper className='bg-void-bg-3'>
<div className='!select-text cursor-auto my-4'>
<ChatMarkdownRender string={changeDescription} codeURI={uri} chatMessageLocation={undefined} />
</div>
</ToolContentsWrapper>
}
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)}
/>
<div className='!select-text cursor-auto my-4'>
<div className='!select-text cursor-auto'>
{resolveReason.type === 'bgtask' ? 'Result so far:\n' : null}
{result}
{resultStr}
@ -1200,24 +1267,18 @@ const TerminalToolChildren = ({ command, terminalId, result, resolveReason }: {
</ToolContentsWrapper>
}
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 <ToolHeaderWrapper title='Reasoning' desc1={isWriting ? <IconLoading /> : ''} isOpen={isOpen} onClick={() => setIsOpen(v => !v)}>
<ToolContentsWrapper className='bg-void-bg-3 prose-sm'>
<div className='!select-text cursor-auto'>
{children}
</div>
</ToolContentsWrapper>
</ToolHeaderWrapper>
const EditToolChildren = ({ uri, changeDescription }: { uri: URI, changeDescription: string }) => {
return <ToolContentsWrapper className='bg-void-bg-3'>
<div className='!select-text cursor-auto'>
<SmallProseWrapper>
<ChatMarkdownRender string={changeDescription} codeURI={uri} chatMessageLocation={undefined} />
</SmallProseWrapper>
</div>
</ToolContentsWrapper>
}
const toolNameToComponent: { [T in ToolName]: {
requestWrapper: T extends ToolNameWithApproval ? ((props: { toolRequest: ToolRequestApproval<T> }) => React.ReactNode) : null,
resultWrapper: (props: { toolMessage: ToolMessage<T>, messageIdx: number }) => React.ReactNode,

5
src/vs/workbench/contrib/void/browser/react/tailwind.config.js
View file

@ -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',