Chat UI #1012
Chat UI #1012
Conversation
…eme syntax highlighting
|
| timeout?: number | ||
| } | ||
|
|
||
| export function useClipboard({ timeout = 2000 }: UseClipboardProps = {}) { |
There was a problem hiding this comment.
We have a similar hook that I'll deprecate in favor of this.
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
| timeout?: number | ||
| } | ||
|
|
||
| export function useClipboard({ timeout = 2000 }: UseClipboardProps = {}) { |
There was a problem hiding this comment.
This hook duplicates existing functionality. Consider using the existing useCopyToClipboard hook instead.
- function useCopyToClipboard (clipboard.ts)
| const { input, setInput, append, isLoading } = useChatUI() | ||
| const isDisabled = isLoading || !input.trim() | ||
|
|
||
| const submit = async () => { |
There was a problem hiding this comment.
Consider adding try/catch error handling for the async 'submit' function to manage possible rejections from append. This ensures errors are handled gracefully.
| return | ||
| } | ||
|
|
||
| navigator.clipboard.writeText(value).then(() => { |
There was a problem hiding this comment.
Consider handling errors in the navigator.clipboard.writeText promise. Adding a catch block can help ensure clipboard failures are gracefully managed.
| */ | ||
|
|
||
| .custom-markdown > pre { | ||
| background-color: transparent !important; |
There was a problem hiding this comment.
VSCode webviews automatically add a background color to all pre tags, but we don't want this when rendering code snippets without our Markdown component.
| }, | ||
| define: { | ||
| "process.platform": JSON.stringify(process.platform), | ||
| "process.env.VSCODE_TEXTMATE_DEBUG": JSON.stringify(process.env.VSCODE_TEXTMATE_DEBUG), |
There was a problem hiding this comment.
Shiki (https://github.com/shikijs/shiki) uses this ENV var for debugging, so we need pass it through or it complains.
Description
Composable + reusable chat interface using @shadcn/ui and Tailwind, with Markdown support + VSCode theme syntax highlighting. Based on https://github.com/run-llama/chat-ui.
Type of change
How Has This Been Tested?
Checklist:
Additional context
Related Issues
Reviewers
Important
Introduces a new chat UI component with markdown support and syntax highlighting, including various chat-related components, providers, hooks, and Storybook integration.
webview-ui/src/components/ui/chat/Chat.tsx.react-markdown,remark-gfm, andshiki.ChatInput.tsx: Handles user input with autosizing textarea and submit button.ChatMessage.tsx: Displays individual chat messages with optional badges and copy-to-clipboard functionality.ChatMessages.tsx: Manages the list of chat messages with smooth scrolling.ChatProvider.ts: Context provider for chat state management.useChatUI.ts,useChatInput.ts,useChatMessage.ts: Custom hooks for accessing chat context.Markdown.tsx: Renders markdown content with custom components for blockquotes and code blocks.CodeBlock.tsx: Highlights code usingshikiand provides copy functionality.react-markdown,remark-gfm, andshikitopackage.jsonfor markdown and syntax highlighting.index.cssfor custom markdown styles and VSCode theme integration.Chat.stories.tsxfor Storybook integration to demonstrate the chat component.This description was created by
for 81565ec. It will automatically update as commits are pushed.