Improve copy code button in various contexts

microsoft · Dec 5, 2024 · ca2f16d · ca2f16d
1 parent 7c43323
commit ca2f16d
Show file tree

Hide file tree

Showing 46 changed files with 334 additions and 98 deletions.
diff --git a/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png b/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png
diff --git a/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png b/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png
diff --git a/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png b/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png
diff --git a/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-4-snap.png b/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-4-snap.png
diff --git a/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png b/...lied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png
diff --git a/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png b/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png
diff --git a/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png b/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png
diff --git a/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png b/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png
diff --git a/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-4-snap.png b/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-4-snap.png
diff --git a/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png b/...dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png
diff --git a/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png b/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png
diff --git a/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png b/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png
diff --git a/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png b/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png
diff --git a/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-4-snap.png b/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-4-snap.png
diff --git a/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png b/...js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png
diff --git a/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png b/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png
diff --git a/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png b/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png
diff --git a/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png b/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png
diff --git a/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-4-snap.png b/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-4-snap.png
diff --git a/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png b/...uent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png
diff --git a/__tests__/html/activityGrouping.disableAbsoluteTimestamp.html b/__tests__/html/activityGrouping.disableAbsoluteTimestamp.html
@@ -0,0 +1,130 @@
+<!doctype html>
+<html lang="en-US">
+
+<head>
+  <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  <script crossorigin="anonymous" src="/test-harness.js"></script>
+  <script crossorigin="anonymous" src="/test-page-object.js"></script>
+  <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  <!-- <script crossorigin="anonymous" src="https://unpkg.com/botframework-webchat@main/dist/webchat.js"></script> -->
+  <!-- <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/dist/webchat.js"></script> -->
+</head>
+
+<body>
+  <main id="webchat"></main>
+  <script>
+    run = fn => fn();
+    run(async function () {
+      const clock = lolex.createClock();
+
+      const { directLine, store } = testHelpers.createDirectLineEmulator({ ponyfill: clock });
+
+      WebChat.renderWebChat(
+        {
+          directLine,
+          ponyfill: clock,
+          store,
+          styleOptions: {
+            "autoScrollSnapOnPage": true,
+            "avatarBorderRadius": 0,
+            "botAvatarBackgroundColor": "green",
+            "botAvatarImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAHlBMVEUNirz////J5fDC4e5br9FVrdBAoso4n8gtmcQllcLl2pCDAAAAMElEQVR42mMYBaNgeANDQTAQIl/BjI6OQJGOjk58thSKAYlRBaMKiFcwmjVHwVAHAFOkDndKDHQVAAAAAElFTkSuQmCC",
+            "botAvatarInitials": "VA",
+            "bubbleBackground": "rgba(232, 232, 232, 1)",
+            "bubbleBorderWidth": 0,
+            "bubbleFromUserBackground": "rgba(219, 241, 251, 1)",
+            "bubbleFromUserBorderWidth": 0,
+            "bubbleFromUserNubOffset": "top",
+            "bubbleFromUserNubSize": 8,
+            "bubbleNubOffset": "bottom",
+            "bubbleNubSize": 8,
+            "groupTimestamp": 0,
+            "hideUploadButton": true,
+            "markdownRenderHTML": false,
+            "suggestedActionBorder": "solid",
+            "suggestedActionBorderColor": "rgba(0,150,214,1)",
+            "suggestedActionBorderRadius": 3,
+            "suggestedActionBorderStyle": "solid",
+            "suggestedActionBorderWidth": 1,
+            "suggestedActionLayout": "stacked",
+            "suggestedActionsStackedLayoutButtonTextWrap": true,
+            "suggestedActionTextColor": "#00679a",
+            "timestampFormat": "absolute"
+          }
+        },
+        document.getElementById('webchat')
+      );
+
+      await pageConditions.webChatRendered();
+
+      clock.tick(1000);
+
+      await (
+        await directLine.emulateOutgoingActivity(
+          'Culpa qui non id occaecat consectetur veniam laborum Lorem nulla commodo.'
+        )
+      ).resolveAll();
+
+      await directLine.emulateIncomingActivity(
+        'Est labore mollit do cillum cillum est amet tempor quis reprehenderit veniam sunt.'
+      )
+
+      await directLine.emulateIncomingActivity(
+        'Elit adipisicing laborum sit anim.'
+      );
+
+      clock.tick(2000);
+
+      await directLine.emulateIncomingActivity({
+        type: 'message',
+        from: { role: 'bot1', name: 'Bot' },
+        text: 'Another custom.',
+      });
+
+      await directLine.emulateIncomingActivity({
+        type: 'message',
+        text: '',
+        attachments: [{
+          "contentType": "application/vnd.microsoft.card.adaptive",
+          "content": {
+            "type": "AdaptiveCard",
+            "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+            "version": "1.2",
+            "body": [
+              {
+                "type": "TextBlock",
+                "text": "Did this solve the problem?",
+                "wrap": true
+              },
+              {
+                "type": "ActionSet",
+                "actions": [
+                  {
+                    "type": "Action.Submit",
+                    "title": "Yes",
+                    "data": {
+                      "value": "Yes"
+                    }
+                  },
+                  {
+                    "type": "Action.Submit",
+                    "title": "No",
+                    "data": {
+                      "value": "No"
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        }]
+      });
+
+      clock.tick(5000);
+
+      await host.snapshot();
+    });
+  </script>
+</body>
+
+</html>
diff --git a/__tests__/html/fluentTheme/side-by-side.wide.dark.html b/__tests__/html/fluentTheme/side-by-side.wide.dark.html
@@ -102,7 +102,7 @@
       };
 
       const waveSvg = `data:image/svg+xml;utf8,${encodeURIComponent(`
-<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 50 400 100" xmlns="http://www.w3.org/2000/svg">
   <!-- Primary Wave -->
   <path d="M0,100 C50,50 100,150 150,100 C200,50 250,150 300,100 C350,50 400,150 400,100" 
         stroke="#3B82F6" fill="none" stroke-width="2" opacity="0.5"/>
@@ -540,6 +540,17 @@
           }
         }
       ], [
+        {
+          timestamp: timestamp(),
+          from: { "role": "user" },
+          id: "6.0",
+          text: `Help me to create a beautiful visualization of harmonic waves using Python, complete the following code:
+\`\`\`python
+def plot_sine_waves():
+    t = np.linspace(0, 10, 1000)
+\`\`\``,
+          type: "message"
+        },
         {
           timestamp: timestamp(),
           from: { role: 'bot' },
@@ -594,7 +605,12 @@
           }],
           id: "a4c0c01d-c06e-4dde-9278-265c607b545b-82",
           type: "message",
-          text: `This example demonstrates creating a beautiful visualization of harmonic waves using Python's Matplotlib library. The code generates three sine waves with different frequencies and phases, then combines them to show wave interference patterns.\n<img alt="wave plot" src="${waveSvg}">`,
+          text: `This example demonstrates creating a visualization of harmonic waves using Python's Matplotlib library. The code generates three sine waves with different frequencies and phases, then combines them to show wave interference patterns.
+<img alt="wave plot" src="${waveSvg}">
+
+Use the command to install required dependencies:
+
+    $ pip install numpy matplotlib`
         }
       ]];
 
@@ -704,6 +720,8 @@
           await host.sendKeys('ARROW_UP');
           await host.sendKeys('ENTER');
           await host.snapshot();
+          await host.sendKeys('TAB');
+          await host.snapshot();
           await host.sendKeys('ENTER');
           await host.snapshot();
           await host.sendKeys('ENTER');

diff --git a/__tests__/html/fluentTheme/side-by-side.wide.html b/__tests__/html/fluentTheme/side-by-side.wide.html
@@ -112,7 +112,7 @@
       };
 
       const waveSvg = `data:image/svg+xml;utf8,${encodeURIComponent(`
-<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 50 400 100" xmlns="http://www.w3.org/2000/svg">
   <!-- Primary Wave -->
   <path d="M0,100 C50,50 100,150 150,100 C200,50 250,150 300,100 C350,50 400,150 400,100" 
         stroke="#3B82F6" fill="none" stroke-width="2" opacity="0.5"/>
@@ -550,6 +550,17 @@
           }
         }
       ], [
+        {
+          timestamp: timestamp(),
+          from: { "role": "user" },
+          id: "6.0",
+          text: `Help me to create a beautiful visualization of harmonic waves using Python, complete the following code:
+\`\`\`python
+def plot_sine_waves():
+    t = np.linspace(0, 10, 1000)
+\`\`\``,
+          type: "message"
+        },
         {
           timestamp: timestamp(),
           from: { role: 'bot' },
@@ -604,7 +615,12 @@
           }],
           id: "a4c0c01d-c06e-4dde-9278-265c607b545b-82",
           type: "message",
-          text: `This example demonstrates creating a beautiful visualization of harmonic waves using Python's Matplotlib library. The code generates three sine waves with different frequencies and phases, then combines them to show wave interference patterns.\n<img alt="wave plot" src="${waveSvg}">`,
+          text: `This example demonstrates creating a visualization of harmonic waves using Python's Matplotlib library. The code generates three sine waves with different frequencies and phases, then combines them to show wave interference patterns.
+<img alt="wave plot" src="${waveSvg}">
+
+Use the command to install required dependencies:
+
+    $ pip install numpy matplotlib`
         }
       ]];
 
@@ -687,6 +703,8 @@
           await host.sendKeys('ARROW_UP');
           await host.sendKeys('ENTER');
           await host.snapshot();
+          await host.sendKeys('TAB');
+          await host.snapshot();
           await host.sendKeys('ENTER');
           await host.snapshot();
           await host.sendKeys('ENTER');

diff --git a/__tests__/html/transcript.activityGrouping.html b/__tests__/html/transcript.activityGrouping.html
@@ -36,13 +36,14 @@
         }
       } = window;
 
+      run = fn => fn();
       run(async function () {
         const params = new URLSearchParams(location.hash.replace(/^#/u, ''));
 
         const height = params.get('ch');
         const width = params.get('cw');
 
-        await host.windowSize(width, height, document.getElementById('webchat'));
+        // await host.windowSize(width, height, document.getElementById('webchat'));
 
         const TestHarness = () => {
           const { activityMiddleware, directLine, rtl, styleOptions, wide } = useContext(ActivityGroupingContext);
@@ -75,11 +76,11 @@
           document.getElementById('webchat')
         );
 
-        await pageConditions.uiConnected();
-        await pageConditions.allImagesLoaded();
-        await pageConditions.scrollToBottomCompleted();
+      //   await pageConditions.uiConnected();
+      //   await pageConditions.allImagesLoaded();
+      //   await pageConditions.scrollToBottomCompleted();
 
-        await host.snapshot();
+      //   await host.snapshot();
       });
     </script>
   </body>

diff --git a/__tests__/html2/markdown/codeBlock/layout.code-block-dark.html b/__tests__/html2/markdown/codeBlock/layout.code-block-dark.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './layout?code-block-theme=github-dark-default';
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/__tests__/html2/markdown/codeBlock/layout.code-block-dark.html.snap-1.png b/__tests__/html2/markdown/codeBlock/layout.code-block-dark.html.snap-1.png
diff --git a/__tests__/html2/markdown/codeBlock/layout.html b/__tests__/html2/markdown/codeBlock/layout.html
@@ -9,15 +9,25 @@
 
   <body>
     <template id="messages">
-      <x-message>
+      <x-message snapshot-ignore>
 ```javascript
 console.log('JavaScript code block using tripple ` delimiters');
 ```
 ----
     Code block using indent
     also has copy button
-    but no highlighting
-      </x-message>
+    but no highlighting</x-message>
+    <x-message>
+```javascript
+export default function JavaScript(is, supported) { using shiki; }
+```
+```typescript
+export default type TypeScript = (is, supported): { using: shiki; }
+```
+```python
+def Python(is_supported): return {'using': 'shiki'}
+```
+    </x-message>
     </template>
     <main id="webchat"></main>
     <script>
@@ -28,7 +38,15 @@
 
         const { directLine, store } = testHelpers.createDirectLineEmulator();
 
-        renderWebChat({ directLine, store }, document.getElementById('webchat'));
+        const params = new URLSearchParams(location.search);
+
+        renderWebChat({
+          directLine, 
+          store,
+          styleOptions: {
+            codeBlockTheme: params.get('code-block-theme') ?? 'github-light-default'
+          }
+        }, document.getElementById('webchat'));
 
         await pageConditions.uiConnected();
 

diff --git a/__tests__/html2/markdown/codeBlock/layout.html.snap-1.png b/__tests__/html2/markdown/codeBlock/layout.html.snap-1.png
diff --git a/packages/bundle/src/AddFullBundle.tsx b/packages/bundle/src/AddFullBundle.tsx
@@ -9,10 +9,10 @@ import React, { memo, type ReactNode } from 'react';
 
 import AdaptiveCardsComposer from './adaptiveCards/AdaptiveCardsComposer';
 import { type AdaptiveCardsStyleOptions } from './adaptiveCards/AdaptiveCardsStyleOptions';
+import ShikiComposer from './codeHighlighter/ShikiComposer';
 import { type AdaptiveCardsPackage } from './types/AdaptiveCardsPackage';
 import { type StrictFullBundleStyleOptions } from './types/FullBundleStyleOptions';
 import useComposerProps from './useComposerProps';
-import ShikiComposer from './codeHighlighter/ShikiComposer';
 
 type AddFullBundleProps = Readonly<{
   adaptiveCardsHostConfig?: any;

diff --git a/packages/bundle/src/codeHighlighter/shiki.ts b/packages/bundle/src/codeHighlighter/shiki.ts
@@ -15,7 +15,7 @@ function addjustTheme(theme: ThemeRegistrationRaw): ThemeRegistrationRaw {
     ...theme,
     colors: {
       ...theme.colors,
-      'editor.background': `var(--webchat__code-block--background, ${theme.colors['editor.background']})`
+      'editor.background': `transparent`
     }
   };
 }

diff --git a/packages/bundle/src/markdown/createHTMLContentTransformMiddleware.ts b/packages/bundle/src/markdown/createHTMLContentTransformMiddleware.ts
@@ -1,7 +1,7 @@
 import { type HTMLContentTransformMiddleware } from 'botframework-webchat-component';
 
-import createSanitizeMiddleware from './middleware/createSanitizeMiddleware';
 import createCodeBlockMiddleware from './middleware/createCodeBlockMiddleware';
+import createSanitizeMiddleware from './middleware/createSanitizeMiddleware';
 
 export default function createHTMLContentTransformMiddleware(): readonly HTMLContentTransformMiddleware[] {
   return Object.freeze([createCodeBlockMiddleware(), createSanitizeMiddleware()]);

diff --git a/packages/bundle/src/markdown/middleware/createCodeBlockMiddleware.ts b/packages/bundle/src/markdown/middleware/createCodeBlockMiddleware.ts
@@ -15,11 +15,7 @@ export default function createCodeBlockMiddleware(): HTMLContentTransformMiddlew
             })
           )
         ),
-        documentFragment: codeBlockDocumentMod(
-          request.documentFragment,
-          request.codeBlockTagName,
-          request.codeBlockTheme
-        )
+        documentFragment: codeBlockDocumentMod(request.documentFragment, request.codeBlockTagName)
       })
     );
 }
diff --git a/packages/bundle/src/markdown/private/codeBlockDocumentMod.ts b/packages/bundle/src/markdown/private/codeBlockDocumentMod.ts
@@ -2,8 +2,7 @@ const languageClassPrefix = 'language-';
 
 export default function codeBlockDocumentMod<T extends Document | DocumentFragment>(
   documentFragment: T,
-  codeBlockTagName: string,
-  codeBlockTheme: string
+  codeBlockTagName: string
 ): T {
   for (const preElement of [...documentFragment.querySelectorAll('pre:has(code:only-child)')]) {
     const [codeElement] = preElement.children;
@@ -14,7 +13,6 @@ export default function codeBlockDocumentMod<T extends Document | DocumentFragme
 
     const codeBlockRoot = document.createElement(codeBlockTagName);
 
-    codeBlockTheme && codeBlockRoot.setAttribute('theme', codeBlockTheme);
     language && codeBlockRoot.setAttribute('language', language);
 
     codeBlockRoot.append(codeElement);