fix(webview): show copy button in web clients

vscode/webviews/chat/ChatMessageContent/ChatMessageContent.module.css

@@ -8,19 +8,13 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 8px;
-    border: 1px solid var(--vscode-editor-foreground);
+    padding: calc(var(--spacing) * 0.5);
+    border: 1px solid var(--vscode-input-background);
     border-radius: 4px;
     background: transparent;
 }
 
-.buttons-container-transparent {
-    composes: buttons-container;
-    border: none;
-    padding: 4px 0;
-}
-
-.leftInfo {
+.left-info {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -29,6 +23,7 @@
 
 .stats {
     color: var(--vscode-descriptionForeground);
+    padding: calc(var(--spacing) * 0.5);
 }
 
 .buttons {
@@ -38,26 +33,28 @@
     justify-content: space-between;
 }
 
-.actionButtons {
+.action-buttons {
     display: flex;
     gap: 0.25rem;
 }
+
 .button {
     display: flex;
     align-items: center;
     padding: 3px;
     height: 20px;
-    background-color: transparent;
     cursor: pointer;
     background: var(--button-icon-background);
     border-radius: var(--button-icon-corner-radius);
     color: var(--foreground);
 }
+
 .button:hover {
     background: var(--button-icon-hover-background);
     outline: 1px dotted var(--contrast-active-border);
     outline-offset: -1px;
 }
+
 .button:not(:first-child) {
     margin-left: 0.25rem;
 }
@@ -94,6 +91,7 @@
     border-radius: var(--button-icon-corner-radius);
     color: var(--foreground);
 }
+
 .copy-button:hover,
 .insert-button:hover {
     background: var(--button-icon-hover-background);
@@ -116,7 +114,7 @@
     margin-right: 0.25rem;
 }
 
-.fileNameContainer {
+.file-name-container {
     font-size: 12px;
     color: var(--vscode-descriptionForeground);
     display: flex;
@@ -129,7 +127,6 @@
     margin-left: auto;
 }
 
-
 .attribution-icon-unavailable {
     color: var(--hl-orange);
 }
@@ -188,7 +185,6 @@
     padding: calc(var(--spacing) * 0.5);
     overflow-x: auto;
     border-bottom: none;
-    margin: 1rem 0;
     border-radius: 3px;
     border: 1px solid var(--vscode-input-background);
 }
@@ -207,6 +203,7 @@
     color: var(--code-foreground);
     margin-bottom: 0;
 }
+
 body[data-vscode-theme-kind='vscode-light'] .content pre,
 body[data-vscode-theme-kind='vscode-light'] .content pre > code {
     /* Our syntax highlighter emits colors intended for dark backgrounds only. */
@@ -258,8 +255,3 @@ body[data-vscode-theme-kind='vscode-light'] .content pre > code {
     padding-inline-start: 2rem;
     list-style: revert;
 }
-
-.file-name-container {
-    color: var(--vscode-descriptionForeground);
-    margin-left: auto;
-}

vscode/webviews/chat/ChatMessageContent/ChatMessageContent.story.tsx

@@ -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.',
+    },
+}

vscode/webviews/chat/ChatMessageContent/ChatMessageContent.tsx

@@ -126,10 +126,8 @@ export const ChatMessageContent: React.FunctionComponent<ChatMessageContentProps
                 // This allows us to intelligently apply code to the suitable file.
                 const codeElement = preElement.querySelectorAll('code')?.[0]
                 const fileName = codeElement?.getAttribute('data-file-path') || undefined
-                // Check if the code element has either 'language-bash' or 'language-shell' class
-                const isShellCommand =
-                    codeElement?.classList.contains('language-bash') ||
-                    codeElement?.classList.contains('language-shell')
+                // Check if the code element has either 'language-bash' class
+                const isShellCommand = codeElement?.classList.contains('language-bash')
                 const codeBlockName = isShellCommand ? 'command' : fileName
 
                 let buttons: HTMLElement
@@ -193,11 +191,12 @@ export const ChatMessageContent: React.FunctionComponent<ChatMessageContentProps
                 // Get the preview container and actions container
                 const previewContainer = buttons.querySelector(`[data-container-type="preview"]`)
                 const actionsContainer = buttons.querySelector(`[data-container-type="actions"]`)
-                if (!previewContainer || !actionsContainer) return
+                if (!actionsContainer) return
 
                 // Insert the preview container right before this code block
-                parent.insertBefore(previewContainer, preElement)
-
+                if (previewContainer) {
+                    parent.insertBefore(previewContainer, preElement)
+                }
                 // Add the actions container right after this code block
                 if (preElement.nextSibling) {
                     parent.insertBefore(actionsContainer, preElement.nextSibling)

vscode/webviews/chat/ChatMessageContent/create-buttons.ts

@@ -34,7 +34,7 @@ export function createButtons(
 
     // Create container for action buttons
     const buttonContainer = document.createElement('div')
-    buttonContainer.className = styles.buttonsContainerTransparent
+    buttonContainer.className = styles.buttonsContainer
     buttonContainer.dataset.containerType = 'actions'
 
     // Create buttons container
@@ -115,7 +115,7 @@ export function createButtonsExperimentalUI(
 ): HTMLElement {
     // Create button container 1 for file info
     const buttonContainer1 = document.createElement('div')
-    buttonContainer1.className = styles.buttonsContainerTransparent
+    buttonContainer1.className = styles.buttonsContainer
     buttonContainer1.dataset.containerType = 'preview'
 
     let hasPreviewContent = false
@@ -137,7 +137,7 @@ export function createButtonsExperimentalUI(
 
     // Create button container 2 for action buttons
     const buttonContainer2 = document.createElement('div')
-    buttonContainer2.className = styles.buttonsContainerTransparent
+    buttonContainer2.className = styles.buttonsContainer
     buttonContainer2.dataset.containerType = 'actions'
 
     if (!copyButtonOnSubmit) {