Polish and adress review

microsoft · Dec 5, 2024 · 6dff1d2 · 6dff1d2
1 parent a0ab92d
commit 6dff1d2
Show file tree

Hide file tree

Showing 69 changed files with 18 additions and 16 deletions.
diff --git a/...ive-cards-js-inputs-card-with-custom-style-options-and-submit-action-1-snap.png b/...ive-cards-js-inputs-card-with-custom-style-options-and-submit-action-1-snap.png
diff --git a/...s-should-show-response-from-bot-and-no-text-from-user-on-messageback-1-snap.png b/...s-should-show-response-from-bot-and-no-text-from-user-on-messageback-1-snap.png
diff --git a/...s-js-should-show-response-from-bot-and-text-from-user-on-messageback-1-snap.png b/...s-js-should-show-response-from-bot-and-text-from-user-on-messageback-1-snap.png
diff --git a/...ions-js-should-show-response-from-bot-and-text-from-user-on-postback-1-snap.png b/...ions-js-should-show-response-from-bot-and-text-from-user-on-postback-1-snap.png
diff --git a/...ack-js-calling-send-message-back-should-send-a-message-back-activity-1-snap.png b/...ack-js-calling-send-message-back-should-send-a-message-back-activity-1-snap.png
diff --git a/...post-back-js-calling-send-post-back-should-send-a-post-back-activity-1-snap.png b/...post-back-js-calling-send-post-back-should-send-a-post-back-activity-1-snap.png
diff --git a/...-accessibility-requirement-disabling-adaptive-card-with-inputs-field-3-snap.png b/...-accessibility-requirement-disabling-adaptive-card-with-inputs-field-3-snap.png
diff --git a/...-actions-shown-should-stick-to-bottom-if-submitting-an-adaptive-card-1-snap.png b/...-actions-shown-should-stick-to-bottom-if-submitting-an-adaptive-card-1-snap.png
diff --git a/...operties-with-no-locale-is-sent-should-get-hello-and-welcome-message-1-snap.png b/...operties-with-no-locale-is-sent-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...properties-with-locale-of-en-us-should-get-hello-and-welcome-message-1-snap.png b/...properties-with-locale-of-en-us-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...ies-with-locale-of-invalid-type-should-get-hello-and-welcome-message-1-snap.png b/...ies-with-locale-of-invalid-type-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...erties-with-non-existing-locale-should-get-hello-and-welcome-message-1-snap.png b/...erties-with-non-existing-locale-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...ties-with-non-iso-format-locale-should-get-hello-and-welcome-message-1-snap.png b/...ties-with-non-iso-format-locale-should-get-hello-and-welcome-message-1-snap.png
diff --git a/...h-locale-of-zh-cn-should-get-hello-and-welcome-in-simplified-chinese-1-snap.png b/...h-locale-of-zh-cn-should-get-hello-and-welcome-in-simplified-chinese-1-snap.png
diff --git a/...rd-actions-js-hero-card-actions-message-back-display-text-text-value-1-snap.png b/...rd-actions-js-hero-card-actions-message-back-display-text-text-value-1-snap.png
diff --git a/...ots__/html/hero-card-actions-js-hero-card-actions-message-back-value-1-snap.png b/...ots__/html/hero-card-actions-js-hero-card-actions-message-back-value-1-snap.png
diff --git a/...apshots__/html/hero-card-actions-js-hero-card-actions-post-back-json-1-snap.png b/...apshots__/html/hero-card-actions-js-hero-card-actions-post-back-json-1-snap.png
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/...cript-activity-grouping-js-transcript-with-activity-grouping-test-43-1-snap.png b/...cript-activity-grouping-js-transcript-with-activity-grouping-test-43-1-snap.png
diff --git a/...cript-activity-grouping-js-transcript-with-activity-grouping-test-44-1-snap.png b/...cript-activity-grouping-js-transcript-with-activity-grouping-test-44-1-snap.png
diff --git a/...cript-activity-grouping-js-transcript-with-activity-grouping-test-45-1-snap.png b/...cript-activity-grouping-js-transcript-with-activity-grouping-test-45-1-snap.png
diff --git a/...cript-activity-grouping-js-transcript-with-activity-grouping-test-46-1-snap.png b/...cript-activity-grouping-js-transcript-with-activity-grouping-test-46-1-snap.png
diff --git a/__tests__/html2/activity/viewCodeButton.html.snap-2.png b/__tests__/html2/activity/viewCodeButton.html.snap-2.png
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.snap-1.png b/__tests__/html2/markdown/codeBlock/layout.html.snap-1.png
diff --git a/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-1.png b/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-1.png
diff --git a/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-2.png b/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-2.png
diff --git a/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-3.png b/...sts__/html2/markdown/codeBlockCopyButton/adaptiveCards/behavior.html.snap-3.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/adaptiveCards/layout.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/adaptiveCards/layout.html.snap-1.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-1.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-2.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-2.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-3.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.denied.html.snap-3.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.highlighted.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.highlighted.html.snap-1.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.highlighted.html.snap-2.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.highlighted.html.snap-2.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.highlighted.html.snap-3.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.highlighted.html.snap-3.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.html.snap-1.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.html.snap-2.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.html.snap-2.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/behavior.html.snap-3.png b/__tests__/html2/markdown/codeBlockCopyButton/behavior.html.snap-3.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/fluent/layout.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/fluent/layout.html.snap-1.png
diff --git a/__tests__/html2/markdown/codeBlockCopyButton/layout.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/layout.html.snap-1.png
diff --git a/__tests__/html2/markdown/math/layout.spec.html.snap-1.png b/__tests__/html2/markdown/math/layout.spec.html.snap-1.png
diff --git a/__tests__/html2/markdown/math/layout.spec.html.snap-2.png b/__tests__/html2/markdown/math/layout.spec.html.snap-2.png
diff --git a/__tests__/html2/markdown/math/layout.spec.html.snap-3.png b/__tests__/html2/markdown/math/layout.spec.html.snap-3.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/bundle/package.json b/packages/bundle/package.json
@@ -138,7 +138,7 @@
     "prop-types": "15.8.1",
     "punycode": "2.3.1",
     "sanitize-html": "2.13.0",
-    "shiki": "^1.22.2",
+    "shiki": "1.22.2",
     "swiper": "8.4.7",
     "url-search-params-polyfill": "8.2.5",
     "uuid": "8.3.2",

diff --git a/packages/bundle/src/markdown/renderMarkdown.ts b/packages/bundle/src/markdown/renderMarkdown.ts
@@ -1,7 +1,7 @@
 import {
-  HighlightCodeFn,
   parseDocumentFragmentFromString,
-  serializeDocumentFragmentIntoString
+  serializeDocumentFragmentIntoString,
+  type HighlightCodeFn
 } from 'botframework-webchat-component/internal';
 import { onErrorResumeNext } from 'botframework-webchat-core';
 import katex from 'katex';

diff --git a/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx b/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx
@@ -41,7 +41,7 @@ const ViewCodeButton = ({ className, code, language, title = '', isAIGenerated =
         'aria-label': localize('ACTIVITY_CODE_ALT', title ?? '')
       }
     );
-  }, [showModal, viewCodeDialog, localize, title, code, language, isAIGenerated]);
+  }, [code, isAIGenerated, language, localize, showModal, title, viewCodeDialog]);
 
   return (
     <ActivityButton

diff --git a/packages/component/src/Styles/StyleSet/CodeBlock.ts b/packages/component/src/Styles/StyleSet/CodeBlock.ts
@@ -10,7 +10,7 @@ export default function createCodeBlockStyle() {
       display: 'block',
       margin: '16px 0',
       overflow: 'hidden',
-      padding: '4px',
+      padding: '4px 4px 4px 8px',
 
       ':has(> .github-dark-default)': {
         background: `var(${CustomPropertyNames.BackgroundCodeBlock}, #0d1117)`,
@@ -28,10 +28,11 @@ export default function createCodeBlockStyle() {
       },
 
       '.webchat__code-block__body': {
-        margin: '0 0 0 4px',
-        whiteSpace: 'pre-wrap',
+        display: 'contents',
         lineHeight: 'normal',
-        outline: 'none'
+        margin: '0',
+        outline: 'none',
+        whiteSpace: 'pre-wrap'
       }
     }
   };

diff --git a/packages/component/src/Styles/StyleSet/ViewCodeDialog.ts b/packages/component/src/Styles/StyleSet/ViewCodeDialog.ts
@@ -49,6 +49,7 @@ export default function createViewCodeDialogStyle() {
         height: '100%',
 
         '.webchat__code-block__body': {
+          display: 'block',
           margin: 0,
           padding: '16px 0'
         }

diff --git a/packages/component/src/providers/CustomElements/customElements/CodeBlock.ts b/packages/component/src/providers/CustomElements/customElements/CodeBlock.ts
@@ -11,10 +11,10 @@ class CodeBlock extends HTMLElement {
   static observedAttributes = Object.freeze(['theme', 'language']);
 
   connected = false;
-  copyButtonElement = null;
-  highlightedCodeFragment: DocumentFragment = null;
+  copyButtonElement = undefined;
+  highlightedCodeFragment: DocumentFragment = undefined;
 
-  #originalFragment: DocumentFragment = null;
+  #originalFragment: DocumentFragment = undefined;
 
   get code() {
     return this.querySelector('code')?.textContent ?? '';
@@ -38,7 +38,7 @@ class CodeBlock extends HTMLElement {
   }
 
   attributeChangedCallback() {
-    this.highlightedCodeFragment = null;
+    this.highlightedCodeFragment = undefined;
     this.update();
   }
 
@@ -135,20 +135,20 @@ const createReactCodeBlockClass = ({
         this.#controller = new AbortController();
 
         trackCodeBlockRefChanges(() => {
-          this.highlightedCodeFragment = null;
+          this.highlightedCodeFragment = undefined;
           this.update();
         }, this.#controller.signal);
 
         trackCopyButtonRefChanges(() => {
-          this.copyButtonElement = null;
+          this.copyButtonElement = undefined;
           this.update();
         }, this.#controller.signal);
       }
     }
 
     disconnectedCallback() {
       this.#controller?.abort();
-      this.#controller = null;
+      this.#controller = undefined;
     }
 
     highlight(...args: Parameters<HighlightCodeFn>) {