Show the proper title of the programming language in code samples

CHANGELOG.md

@@ -53,6 +53,8 @@ Legends:
 - Fixed syntax-highlighted code having less than 4.5:1 color contrast: comments in the light code block theme (`github-light-default`) were 4.36:1 in the Fluent theme and now use the muted text color of the theme, `#656d76` (5.03:1), in PR [#5893](https://github.com/microsoft/BotFramework-WebChat/pull/5893), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed code blocks becoming empty when Web Chat is rendered with messages already in the store, such as again with the same store or from a saved state: code is shown without highlighting until the syntax highlighter is loaded, in PR [#5893](https://github.com/microsoft/BotFramework-WebChat/pull/5893), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed the native controls of audio and video players, such as volume and "more options", not being reachable with <kbd>TAB</kbd> and <kbd>SHIFT</kbd> + <kbd>TAB</kbd> inside an activity: the focus now moves through every control of the player and wraps within the activity; the players of audio, video, and animation cards are now named after the card title, fixes [#5738](https://github.com/microsoft/BotFramework-WebChat/issues/5738) and [#5709](https://github.com/microsoft/BotFramework-WebChat/issues/5709), in PR [#5891](https://github.com/microsoft/BotFramework-WebChat/pull/5891), by [@OEvgeny](https://github.com/OEvgeny)
+- Fixed code samples, such as in the "View code" dialog, titled "Javascript" instead of "JavaScript": common programming languages and their aliases, such as `js`, now show their proper names, which can be overridden via `overrideLocalizedStrings` (`PROGRAMMING_LANGUAGE_*`), in PR [#5896](https://github.com/microsoft/BotFramework-WebChat/pull/5896), by [@OEvgeny](https://github.com/OEvgeny)
+- Fixed code not being highlighted when the programming language is not in lowercase, such as `TS`, in PR [#5896](https://github.com/microsoft/BotFramework-WebChat/pull/5896), by [@OEvgeny](https://github.com/OEvgeny)
 
 ## [4.19.2] - 2026-10-08
 

__tests__/html2/activity/programmingLanguageTitle.html

@@ -0,0 +1,176 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <title>Code: shows the title of the programming language</title>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script type="module">
+      import React from 'react';
+      window.React = React;
+    </script>
+    <script defer crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="module">
+      import { waitFor } from '@testduet/wait-for';
+      import React from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      const aiMessageEntity = Object.freeze({
+        '@context': 'https://schema.org',
+        '@id': '',
+        '@type': 'Message',
+        keywords: Object.freeze(['AIGeneratedContent']),
+        type: 'https://schema.org/Message'
+      });
+
+      // Programming languages are sent as-is in "programmingLanguage", often in lowercase or as an alias.
+      // Only JavaScript, Python, and TypeScript are highlighted by the bundled highlighter.
+      const COLLAPSIBLE_SAMPLES = Object.freeze([
+        Object.freeze({
+          isHighlighted: true,
+          programmingLanguage: 'javascript',
+          text: "console.log('Hello, World!');",
+          title: 'JavaScript'
+        }),
+        Object.freeze({
+          isHighlighted: true,
+          programmingLanguage: 'TS',
+          text: "const greeting: string = 'Hello, World!';",
+          title: 'TypeScript'
+        }),
+        Object.freeze({
+          isHighlighted: false,
+          programmingLanguage: 'c#',
+          text: 'Console.WriteLine("Hello, World!");',
+          title: 'C#'
+        }),
+        // The title of "sh" ("Shell") is overridden via "overrideLocalizedStrings" below.
+        Object.freeze({
+          isHighlighted: false,
+          programmingLanguage: 'sh',
+          text: 'echo "Hello, World!"',
+          title: 'Shell script'
+        }),
+        // Shell dialects keep their own name: only the first letter is capitalized.
+        Object.freeze({
+          isHighlighted: false,
+          programmingLanguage: 'bash',
+          text: "echo 'Hello, World!'",
+          title: 'Bash'
+        }),
+        // Unknown programming language: only the first letter is capitalized.
+        Object.freeze({
+          isHighlighted: false,
+          programmingLanguage: 'cobol',
+          text: 'DISPLAY "Hello, World!".',
+          title: 'Cobol'
+        })
+      ]);
+
+      run(async function () {
+        const {
+          WebChat: { ReactWebChat, testIds }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        await host.windowSize(360, 1024, document.getElementById('webchat'));
+
+        createRoot(document.getElementById('webchat')).render(
+          React.createElement(ReactWebChat, {
+            directLine,
+            overrideLocalizedStrings: { PROGRAMMING_LANGUAGE_SHELL: 'Shell script' },
+            store
+          })
+        );
+
+        await pageConditions.uiConnected();
+
+        // WHEN: The bot sends collapsible messages with code (emulated).
+        for (const { programmingLanguage, text } of COLLAPSIBLE_SAMPLES) {
+          await directLine.emulateIncomingActivity({
+            entities: [
+              {
+                ...aiMessageEntity,
+                abstract: `Code in ${programmingLanguage}`,
+                isBasedOn: { '@type': 'SoftwareSourceCode', programmingLanguage, text },
+                keywords: [...aiMessageEntity.keywords, 'Collapsible']
+              }
+            ],
+            from: { role: 'bot' },
+            text: '',
+            type: 'message'
+          });
+        }
+
+        await pageConditions.numActivitiesShown(COLLAPSIBLE_SAMPLES.length);
+
+        // WHEN: Expand every message.
+        for (const summary of document.querySelectorAll('summary.collapsible-content__summary')) {
+          await host.click(summary);
+
+          await waitFor(() => expect(summary.getAttribute('aria-expanded')).toBe('true'));
+        }
+
+        // THEN: Code in JavaScript and TypeScript should be highlighted, regardless of the case of the programming language.
+        await waitFor(() =>
+          expect(
+            Array.from(document.querySelectorAll('.code-block-content pre'), pre => pre.classList.contains('shiki'))
+          ).toEqual(COLLAPSIBLE_SAMPLES.map(({ isHighlighted }) => isHighlighted))
+        );
+
+        await pageConditions.scrollStabilized();
+
+        // THEN: The code blocks should show the title of the programming language.
+        expect(
+          Array.from(document.querySelectorAll('.code-block-content__title'), ({ textContent }) => textContent)
+        ).toEqual(COLLAPSIBLE_SAMPLES.map(({ title }) => title));
+
+        // THEN: Should match snapshot.
+        await host.snapshot('local');
+
+        // WHEN: The bot sends a message with code in "py" (emulated).
+        await directLine.emulateIncomingActivity({
+          entities: [
+            {
+              ...aiMessageEntity,
+              isBasedOn: { '@type': 'SoftwareSourceCode', programmingLanguage: 'py', text: "print('Hello, World!')" }
+            }
+          ],
+          from: { role: 'bot' },
+          text: 'Here is a sample in Python.',
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(COLLAPSIBLE_SAMPLES.length + 1);
+        await pageConditions.scrollStabilized();
+
+        // WHEN: Click the "View code" button.
+        await host.click(document.querySelector(`[data-testid="${testIds.viewCodeButton}"]`));
+
+        // THEN: The "View code" dialog should show and be labelled with the title of the programming language.
+        await waitFor(() => expect(document.querySelector('dialog[open] pre.shiki')).toBeTruthy());
+        expect(document.querySelector('dialog[open] h2').textContent).toBe('Python');
+        await expect(testHelpers.getAccessibleName(document.querySelector('dialog[open]'))).resolves.toBe(
+          'Code sample: Python'
+        );
+
+        // THEN: Should match snapshot.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>

__tests__/html2/markdown/codeBlock/contrast.html

@@ -58,7 +58,8 @@
 
     return text.match(pattern) ?? null;
   }
-}`
+}`,
+          title: 'JavaScript'
         }),
         Object.freeze({
           programmingLanguage: 'typescript',
@@ -67,7 +68,8 @@
 
 export function area(shape: Shape): number {
   return Math.PI * shape.radius ** 2; /* Block comment. */
-}`
+}`,
+          title: 'TypeScript'
         }),
         Object.freeze({
           programmingLanguage: 'python',
@@ -81,7 +83,8 @@
     def distance(self, other: "Point") -> float:
         return math.sqrt((self.x - other.x) ** 2)  # Trailing comment.
 
-print(f"{Point(1)!r}", r"\\d+", None, True)`
+print(f"{Point(1)!r}", r"\\d+", None, True)`,
+          title: 'Python'
         })
       ]);
 
@@ -140,13 +143,13 @@
 
         // The accessibility check cannot measure the color contrast of text in the transcript: the transcript focus overlays cover it.
         // The "View code" dialog shows the same highlighted code outside of the transcript.
-        for (const [index, { programmingLanguage }] of SAMPLES.entries()) {
+        for (const [index, { title }] of SAMPLES.entries()) {
           // WHEN: Click the "View code" button of the message.
           await host.click(document.querySelectorAll(`[data-testid="${testIds.viewCodeButton}"]`)[index]);
 
           // THEN: The "View code" dialog should show the code highlighted.
           await waitFor(() => expect(document.querySelector('dialog[open] pre.shiki')).toBeTruthy());
-          expect(document.querySelector('dialog[open] h2').textContent).toBe(programmingLanguage);
+          expect(document.querySelector('dialog[open] h2').textContent).toBe(title);
 
           // THEN: Should match snapshot, and every token should pass the default accessibility check, including color contrast.
           await host.snapshot('local');

packages/api/src/localization/en-US.json

@@ -95,6 +95,46 @@
   "_FILE_CONTENT_ALT.comment": "$1 is the name of the file, e.g. document.docx. $2 is the file size, e.g. 12 MB",
   "MARKDOWN_EXTERNAL_LINK_ALT": "Opens in a new window; external.",
   "_MARKDOWN_EXTERNAL_LINK_ALT.comment": "This is for the screen reader and is added to the label of the hyperlink. When clicked, the hyperlink will open in a new tab or window.",
+  "PROGRAMMING_LANGUAGE_CPP": "C++",
+  "_PROGRAMMING_LANGUAGE_CPP.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_CSHARP": "C#",
+  "_PROGRAMMING_LANGUAGE_CSHARP.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_CSS": "CSS",
+  "_PROGRAMMING_LANGUAGE_CSS.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_HTML": "HTML",
+  "_PROGRAMMING_LANGUAGE_HTML.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_JAVASCRIPT": "JavaScript",
+  "_PROGRAMMING_LANGUAGE_JAVASCRIPT.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_JSON": "JSON",
+  "_PROGRAMMING_LANGUAGE_JSON.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_JSX": "JSX",
+  "_PROGRAMMING_LANGUAGE_JSX.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_KOTLIN": "Kotlin",
+  "_PROGRAMMING_LANGUAGE_KOTLIN.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_MARKDOWN": "Markdown",
+  "_PROGRAMMING_LANGUAGE_MARKDOWN.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_PHP": "PHP",
+  "_PROGRAMMING_LANGUAGE_PHP.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_POWERSHELL": "PowerShell",
+  "_PROGRAMMING_LANGUAGE_POWERSHELL.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_PYTHON": "Python",
+  "_PROGRAMMING_LANGUAGE_PYTHON.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_RUBY": "Ruby",
+  "_PROGRAMMING_LANGUAGE_RUBY.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_RUST": "Rust",
+  "_PROGRAMMING_LANGUAGE_RUST.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_SHELL": "Shell",
+  "_PROGRAMMING_LANGUAGE_SHELL.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_SQL": "SQL",
+  "_PROGRAMMING_LANGUAGE_SQL.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_TSX": "TSX",
+  "_PROGRAMMING_LANGUAGE_TSX.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_TYPESCRIPT": "TypeScript",
+  "_PROGRAMMING_LANGUAGE_TYPESCRIPT.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_XML": "XML",
+  "_PROGRAMMING_LANGUAGE_XML.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
+  "PROGRAMMING_LANGUAGE_YAML": "YAML",
+  "_PROGRAMMING_LANGUAGE_YAML.comment": "This is the name of a programming language, shown as the title of a code sample. Translate only if the name differs in your language.",
   "RECEIPT_CARD_TAX": "Tax",
   "RECEIPT_CARD_TOTAL": "Total",
   "RECEIPT_CARD_VAT": "VAT",

packages/bundle/src/codeHighlighter/ShikiComposer.tsx

@@ -8,7 +8,8 @@ const createHighligtCodeWithShiki =
   (shikiHiglighter: HighlighterCore): HighlightCodeFn =>
   (code, language, options) =>
     shikiHiglighter.codeToHtml(code, {
-      lang: language,
+      // Shiki resolves languages and aliases in lowercase only, e.g. "ts", while bots may send "TS".
+      lang: language?.toLowerCase(),
       theme: options.theme
     });
 

packages/component/src/Activity/CodeBlockContent.module.css

@@ -25,10 +25,6 @@
 
 :global(.webchat) .code-block-content__title {
   font-weight: 600;
-
-  &::first-letter {
-    text-transform: uppercase;
-  }
 }
 
 :global(.webchat) .code-block-content .code-block-content__code-block {

packages/component/src/Activity/StackedLayout.tsx

@@ -19,6 +19,7 @@ import ScreenReaderText from '../ScreenReaderText';
 import isZeroOrPositive from '../Utils/isZeroOrPositive';
 import getFirstBaseOfSoftwareSourceCode from '../Utils/orgSchema/getFirstBaseOfSoftwareSourceCode';
 import textFormatToContentType from '../Utils/textFormatToContentType';
+import useLocalizeProgrammingLanguage from '../hooks/internal/useLocalizeProgrammingLanguage';
 import { useGetLogicalGroupKey } from '../providers/ActivityLogicalGrouping';
 import AttachmentRow from './AttachmentRow';
 import Bubble from './Bubble';
@@ -113,6 +114,7 @@ const StackedLayout = ({
   const [{ initials: botInitials }] = useAvatarForBot();
   const [{ initials: userInitials }] = useAvatarForUser();
   const localize = useLocalizer();
+  const localizeProgrammingLanguage = useLocalizeProgrammingLanguage();
   const classNames = useStyles(styles);
 
   const { bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize } = styleOptions;
@@ -214,7 +216,7 @@ const StackedLayout = ({
               code={firstSoftwareSourceCode.text[0]}
               key={syntheticAttachments.length}
               language={firstSoftwareSourceCode.programmingLanguage[0]}
-              title={firstSoftwareSourceCode.programmingLanguage[0]}
+              title={localizeProgrammingLanguage(firstSoftwareSourceCode.programmingLanguage[0])}
             />
           </AttachmentRow>
         );
@@ -244,6 +246,7 @@ const StackedLayout = ({
     hasNub,
     isCollapsible,
     localize,
+    localizeProgrammingLanguage,
     messageThing,
     otherInitials,
     renderAttachment,

packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx

@@ -17,6 +17,7 @@ import ActivityFeedback from '../../../ActivityFeedback/ActivityFeedback';
 import { LinkDefinitionItem, LinkDefinitions } from '../../../LinkDefinition/index';
 import dereferenceBlankNodes from '../../../Utils/JSONLinkedData/dereferenceBlankNodes';
 import getFirstBaseOfSoftwareSourceCode from '../../../Utils/orgSchema/getFirstBaseOfSoftwareSourceCode';
+import useLocalizeProgrammingLanguage from '../../../hooks/internal/useLocalizeProgrammingLanguage';
 import useSanitizeHrefCallback from '../../../hooks/internal/useSanitizeHrefCallback';
 import useStreamingMarkdownWithDefinitions, {
   type MarkdownLinkDefinition
@@ -82,6 +83,7 @@ function MarkdownTextContent(props: MarkdownTextContentProps) {
   const [{ feedbackActionsPlacement }] = useStyleOptions();
   const contentRef = useRef<HTMLDivElement>(null);
   const localize = useLocalizer();
+  const localizeProgrammingLanguage = useLocalizeProgrammingLanguage();
   const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]);
   const showModal = useShowModal();
 
@@ -311,7 +313,7 @@ function MarkdownTextContent(props: MarkdownTextContentProps) {
             code={firstSoftwareSourceCodeBase.text[0]}
             isAIGenerated={isAIGeneratedActivity(activity)}
             language={firstSoftwareSourceCodeBase.programmingLanguage[0]}
-            title={firstSoftwareSourceCodeBase.programmingLanguage[0]}
+            title={localizeProgrammingLanguage(firstSoftwareSourceCodeBase.programmingLanguage[0])}
           />
         ) : null}
         {activity.type === 'message' && activity.text && messageThing?.keywords.includes('AllowCopy') ? (

packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css

@@ -36,7 +36,6 @@
 
 :global(.webchat) .view-code-dialog__title {
   margin: 0 auto 0 0;
-  text-transform: capitalize;
 }
 
 :global(.webchat) .view-code-dialog .view-code-dialog__body {