-
Notifications
You must be signed in to change notification settings - Fork 369
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(webview): show copy button in web clients (#7310)
CLOSE https://linear.app/sourcegraph/issue/CODY-5193/cody-web-copy-button-is-missing-for-code-blocks This commit refactors the UI for code blocks in chat messages to improve the placement of action buttons (copy, apply, insert) and fixes the issue where copy button is not showing up on web. The cause of the issue is due to the logic where actionsContainer will only be displayed when previewContainer is available, a regression from #7217. The fix is to always append available actionsContainer, but also insert the previewContainer before that when available. Key changes: - Modified CSS styles in `ChatMessageContent.module.css` to adjust padding, borders, and background colors for code blocks and buttons. - Updated `ChatMessageContent.tsx` to insert the preview container (containing file info) before the code block and the actions container after the code block. - Updated `create-buttons.ts` to use the default `buttonsContainer` style instead of `buttonsContainerTransparent` for both preview and action button containers. ## Test plan <!-- Required. See https://docs-legacy.sourcegraph.com/dev/background-information/testing_principles. --> Run Cody Web and confirmed the copy button is now showing up: <img width="2056" alt="image" src="https://github.com/user-attachments/assets/a3b0b21c-33c4-4c72-b62f-e858c8309b17" /> Added storybook to cover this component: <img width="1714" alt="image" src="https://github.com/user-attachments/assets/92c35899-ae84-4006-8f09-dc8272d53db1" />
- Loading branch information
Showing
4 changed files
with
208 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
169 changes: 169 additions & 0 deletions
169
vscode/webviews/chat/ChatMessageContent/ChatMessageContent.story.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
| import { ps } from '@sourcegraph/cody-shared' | ||
| import type { Meta, StoryObj } from '@storybook/react' | ||
| import { VSCodeWebview } from '../../storybook/VSCodeStoryDecorator' | ||
| import { ChatMessageContent } from './ChatMessageContent' | ||
|
|
||
| const meta: Meta<typeof ChatMessageContent> = { | ||
| title: 'chat/ChatMessageContent', | ||
| component: ChatMessageContent, | ||
|
|
||
| args: { | ||
| displayMarkdown: '# Hello\nThis is a test message', | ||
| isMessageLoading: false, | ||
| humanMessage: null, | ||
| copyButtonOnSubmit: () => console.log('Copy button clicked'), | ||
| insertButtonOnSubmit: undefined, | ||
| smartApplyEnabled: false, | ||
| smartApply: undefined, | ||
| guardrails: undefined, | ||
| }, | ||
|
|
||
| decorators: [VSCodeWebview], | ||
| } | ||
|
|
||
| export default meta | ||
|
|
||
| export const Default: StoryObj<typeof meta> = {} | ||
|
|
||
| export const WithCodeBlock: StoryObj<typeof meta> = { | ||
| args: { | ||
| displayMarkdown: 'Code Example\n```javascript\nconsole.log("Hello world");\n```', | ||
| }, | ||
| } | ||
|
|
||
| export const WithCodeBlockNoSmartApply: StoryObj<typeof meta> = { | ||
| args: { | ||
| displayMarkdown: '## Code Example\n```javascript\nconsole.log("Hello world");\n```', | ||
| smartApplyEnabled: false, | ||
| copyButtonOnSubmit: () => console.log('Copy button clicked'), | ||
| insertButtonOnSubmit: () => console.log('Insert button clicked'), | ||
| }, | ||
| name: 'With Code Block - No Smart Apply (Web Client)', | ||
| } | ||
|
|
||
| export const WithCodeBlockWithSmartApply: StoryObj<typeof meta> = { | ||
| args: { | ||
| displayMarkdown: '### Code Example\n```javascript\nconsole.log("Hello world");\n```', | ||
| smartApplyEnabled: true, | ||
| copyButtonOnSubmit: () => console.log('Copy button clicked'), | ||
| insertButtonOnSubmit: () => console.log('Insert button clicked'), | ||
| smartApply: { | ||
| onSubmit: () => console.log('Smart apply submitted'), | ||
| onAccept: () => console.log('Smart apply accepted'), | ||
| onReject: () => console.log('Smart apply rejected'), | ||
| }, | ||
| }, | ||
| name: 'With Code Block - With Smart Apply (VS Code)', | ||
| } | ||
|
|
||
| export const WithMultipleCodeBlocks: StoryObj<typeof meta> = { | ||
| args: { | ||
| displayMarkdown: `# Multiple Code Blocks | ||
| Here's the first code block: | ||
| \`\`\`javascript | ||
| function hello() { | ||
| console.log("Hello world"); | ||
| } | ||
| \`\`\` | ||
| And here's the second one: | ||
| \`\`\`python | ||
| def hello(): | ||
| print("Hello world") | ||
| \`\`\``, | ||
| copyButtonOnSubmit: () => console.log('Copy button clicked'), | ||
| insertButtonOnSubmit: () => console.log('Insert button clicked'), | ||
| }, | ||
| } | ||
|
|
||
| export const SmartApplyPending: StoryObj<typeof meta> = { | ||
| args: { | ||
| displayMarkdown: '# Working Example\n```javascript\nconsole.log("Hello world");\n```', | ||
| smartApplyEnabled: true, | ||
| copyButtonOnSubmit: () => console.log('Copy button clicked'), | ||
| insertButtonOnSubmit: () => console.log('Insert button clicked'), | ||
| smartApply: { | ||
| onSubmit: () => console.log('Smart apply submitted'), | ||
| onAccept: () => console.log('Smart apply accepted'), | ||
| onReject: () => console.log('Smart apply rejected'), | ||
| }, | ||
| humanMessage: { | ||
| text: ps`Write a hello world example`, | ||
| intent: 'chat', | ||
| hasInitialContext: { | ||
| repositories: false, | ||
| files: false, | ||
| }, | ||
| hasExplicitMentions: false, | ||
| rerunWithDifferentContext: () => console.log('Rerun with different context'), | ||
| appendAtMention: () => console.log('Append at mention'), | ||
| }, | ||
| }, | ||
| name: 'Smart Apply - Pending State', | ||
| } | ||
|
|
||
| export const SmartApplyWorking: StoryObj<typeof meta> = { | ||
| render: args => { | ||
| // Return the component with state and callbacks set up | ||
| return <ChatMessageContent {...args} /> | ||
| }, | ||
| args: { | ||
| displayMarkdown: '# Working Example\n```javascript\nconsole.log("Hello world");\n```', | ||
| smartApplyEnabled: true, | ||
| copyButtonOnSubmit: () => console.log('Copy button clicked'), | ||
| insertButtonOnSubmit: () => console.log('Insert button clicked'), | ||
| smartApply: { | ||
| onSubmit: () => console.log('Smart apply submitted'), | ||
| onAccept: () => console.log('Smart apply accepted'), | ||
| onReject: () => console.log('Smart apply rejected'), | ||
| }, | ||
| humanMessage: { | ||
| text: ps`Write a hello world example`, | ||
| intent: 'chat', | ||
| hasInitialContext: { | ||
| repositories: false, | ||
| files: false, | ||
| }, | ||
| hasExplicitMentions: false, | ||
| rerunWithDifferentContext: () => console.log('Rerun with different context'), | ||
| appendAtMention: () => console.log('Append at mention'), | ||
| }, | ||
| }, | ||
| name: 'Smart Apply - Working State', | ||
| } | ||
|
|
||
| export const EditIntent: StoryObj<typeof meta> = { | ||
| args: { | ||
| displayMarkdown: | ||
| '# Edit Intent Example\n```javascript:hello.js\n+ console.log("Hello world");\n+ \n- // console.log("Hello world");\n```', | ||
| copyButtonOnSubmit: () => console.log('Copy button clicked'), | ||
| insertButtonOnSubmit: () => console.log('Insert button clicked'), | ||
| smartApplyEnabled: true, | ||
| smartApply: undefined, | ||
| humanMessage: { | ||
| text: ps`Write a hello world example`, | ||
| intent: 'edit', | ||
| hasInitialContext: { | ||
| repositories: false, | ||
| files: false, | ||
| }, | ||
| hasExplicitMentions: false, | ||
| rerunWithDifferentContext: () => console.log('Rerun with different context'), | ||
| appendAtMention: () => console.log('Append at mention'), | ||
| }, | ||
| }, | ||
| name: 'Edit Intent with Preview', | ||
| } | ||
|
|
||
| export const Loading: StoryObj<typeof meta> = { | ||
| args: { | ||
| displayMarkdown: '# Loading...', | ||
| isMessageLoading: true, | ||
| }, | ||
| } | ||
|
|
||
| export const WithThinkContent: StoryObj<typeof meta> = { | ||
| args: { | ||
| displayMarkdown: '<think>\nAnalyzing the problem...\n</think>\nHere is the solution.', | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.