CSS Modules: migrate Text Attachment components

CHANGELOG.md

@@ -313,7 +313,10 @@ Breaking changes in this release:
 - Bumped Chrome in Docker to 141 from 110, in PR [#5619](https://github.com/microsoft/BotFramework-WebChat/pull/5619), by [@compulim](https://github.com/compulim)
 - Bumped to [`[email protected]`](https://npmjs.com/package/valibot/v/1.2.0), in PR [#5650](https://github.com/microsoft/BotFramework-WebChat/pull/5650), by [@compulim](https://github.com/compulim)
 - Pinned to [`[email protected]`](https://npmjs.com/package/botframework-directlinespeech-sdk/v/4.18.1-main.20251208.8ccadd6), by [@OEvgeny](https://github.com/OEvgeny) in PR [#5662](https://github.com/microsoft/BotFramework-WebChat/pull/5662)
-- Converted remaining activity components to CSS Modules, in PR [#5668](https://github.com/microsoft/BotFramework-WebChat/pull/5668), in PR [#5669](https://github.com/microsoft/BotFramework-WebChat/pull/5669), by [@OEvgeny](https://github.com/OEvgeny)
+- Converted activity components to CSS Modules
+   - Bubble, carousel, say-alt, in PR [#5668](https://github.com/microsoft/BotFramework-WebChat/pull/5668), by [@OEvgeny](https://github.com/OEvgeny)
+   - Activity status, in PR [#5669](https://github.com/microsoft/BotFramework-WebChat/pull/5669), by [@OEvgeny](https://github.com/OEvgeny)
+   - Text attachment and related components, in PR [#5670](https://github.com/microsoft/BotFramework-WebChat/pull/5670), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Deprecated
 

__tests__/html2/activity/citation.longRef.html

@@ -53,7 +53,7 @@
 
         await host.snapshot('local');
 
-        const markdownElement = pageElements.activities()[0].querySelector('.webchat__text-content__markdown');
+        const markdownElement = pageElements.activities()[0].querySelector('.text-content__markdown');
         const markdownLinks = markdownElement.querySelectorAll('a');
         const markdownButtons = markdownElement.querySelectorAll('button');
 

__tests__/html2/basic/customIcons.html

@@ -39,11 +39,11 @@
         --webchat__fluent-icon--mask: var(--icon);
       }
 
-      #webchat .webchat__activity-button .component-icon.icon--view-code {
+      #webchat .activity-button .component-icon.icon--view-code {
         --webchat__component-icon--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 17.308L2.692 12L8 6.692l.714.714l-4.6 4.6L8.708 16.6zm8 0l-.713-.714l4.6-4.6L15.292 7.4L16 6.692L21.308 12z'/%3E%3C/svg%3E");
       }
 
-      #webchat .webchat__activity-button .component-icon.icon--copy {
+      #webchat .activity-button .component-icon.icon--copy {
         --webchat__component-icon--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.116 17q-.691 0-1.153-.462T7.5 15.385V4.615q0-.69.463-1.153T9.116 3h7.769q.69 0 1.153.462t.462 1.153v10.77q0 .69-.462 1.152T16.884 17zm0-1h7.769q.23 0 .423-.192t.192-.423V4.615q0-.23-.192-.423T16.884 4H9.116q-.231 0-.424.192t-.192.423v10.77q0 .23.192.423t.423.192m-3 4q-.69 0-1.153-.462T4.5 18.385V6.615h1v11.77q0 .23.192.423t.423.192h8.77v1zM8.5 16V4z'/%3E%3C/svg%3E");
       }
     </style>

__tests__/html2/citation/basic.html

@@ -44,7 +44,7 @@
 
         await host.snapshot('local');
 
-        const markdownElement = pageElements.activities()[0].querySelector('.webchat__text-content__markdown');
+        const markdownElement = pageElements.activities()[0].querySelector('.text-content__markdown');
         const markdownLinks = markdownElement.querySelectorAll('a');
         const markdownButtons = markdownElement.querySelectorAll('button');
 

__tests__/html2/citation/claimInterpreter/dangerousLink.html

@@ -57,7 +57,7 @@
 
         await host.snapshot('local');
 
-        const markdownElement = pageElements.activities()[0].querySelector('.webchat__text-content__markdown');
+        const markdownElement = pageElements.activities()[0].querySelector('.text-content__markdown');
         const markdownLinks = markdownElement.querySelectorAll('a');
 
         // The javascript: shouldn't be a link.

__tests__/html2/citation/markdownPreferredOverEntities.html

@@ -78,7 +78,7 @@
 
         await host.snapshot('local');
 
-        const markdownElement = pageElements.activities()[0].querySelector('.webchat__text-content__markdown');
+        const markdownElement = pageElements.activities()[0].querySelector('.text-content__markdown');
         const markdownClickableLinks = markdownElement.querySelectorAll('a[href]');
 
         // The javascript: shouldn't be a link.

__tests__/html2/citation/showModal.close.button.html

@@ -41,7 +41,7 @@
           type: 'message'
         });
 
-        const markdownElement = pageElements.activities()[0].querySelector('.webchat__text-content__markdown');
+        const markdownElement = pageElements.activities()[0].querySelector('.text-content__markdown');
         const markdownButtons = markdownElement.querySelectorAll('button');
 
         await host.click(markdownButtons[0]);

__tests__/html2/citation/showModal.close.escape.html

@@ -41,7 +41,7 @@
           type: 'message'
         });
 
-        const markdownElement = pageElements.activities()[0].querySelector('.webchat__text-content__markdown');
+        const markdownElement = pageElements.activities()[0].querySelector('.text-content__markdown');
         const markdownButtons = markdownElement.querySelectorAll('button');
 
         await host.click(markdownButtons[0]);

__tests__/html2/citation/showModal.markdown.html

@@ -42,7 +42,7 @@
           type: 'message'
         });
 
-        const markdownElement = pageElements.activities()[0].querySelector('.webchat__text-content__markdown');
+        const markdownElement = pageElements.activities()[0].querySelector('.text-content__markdown');
         const markdownButtons = markdownElement.querySelectorAll('button');
 
         await host.click(markdownButtons[0]);

__tests__/html2/citation/showModal.width.desktop.html

@@ -44,7 +44,7 @@
 
         await host.snapshot('local');
 
-        const markdownElement = pageElements.activities()[0].querySelector('.webchat__text-content__markdown');
+        const markdownElement = pageElements.activities()[0].querySelector('.text-content__markdown');
         const markdownButtons = markdownElement.querySelectorAll('button');
 
         await host.click(markdownButtons[0]);

__tests__/html2/citation/showModal.width.mobile.html

@@ -43,7 +43,7 @@
 
         await host.snapshot('local');
 
-        const markdownElement = pageElements.activities()[0].querySelector('.webchat__text-content__markdown');
+        const markdownElement = pageElements.activities()[0].querySelector('.text-content__markdown');
         const markdownButtons = markdownElement.querySelectorAll('button');
 
         await host.click(markdownButtons[0]);

__tests__/html2/citation/url.html

@@ -324,7 +324,7 @@
         ]
       });
 
-      expect(Array.from(document.querySelectorAll('.webchat__render-markdown a')).map(a => a.href)).toEqual([
+      expect(Array.from(document.querySelectorAll('.render-markdown a')).map(a => a.href)).toEqual([
         'https://example.sharepoint.com/sites/Docs/2025%20Product%20Area%20Review%20%5BTemplate%5D.pptx',
         'https://example.sharepoint.com/sites/Docs/2025%20Product%20Area%20Review%20%5BTemplate%5D.pptx',
         'https://files.example.com/search?tags%5B%5D=a&tags%5B%5D=a%2Fb&redirect=https%3A%2F%2Fexample.com%2Fx%3Fy%3Dz',

__tests__/html2/copyButton/behavior.html

@@ -24,7 +24,7 @@
         const App = () => (
           <React.Fragment>
             <ReactWebChat directLine={directLine} store={store} />
-            <div style={{ gap: 8, position: 'absolute', top: 0, width: '100%' }}>
+            <div className="webchat" style={{ gap: 8, position: 'absolute', top: 0, width: '100%' }}>
               <label>
                 <div>Plain text box</div>
                 <input
@@ -40,7 +40,7 @@
                   contentEditable={true}
                   data-testid="rich-text-box"
                   spellCheck={false}
-                  style={{ background: '#f0f0f0', border: 0, height: 50, width: '100%' }}
+                  style={{ margin: 0, background: '#f0f0f0', border: 0, height: 50, width: '100%' }}
                 />
               </label>
             </div>

__tests__/html2/hooks/useRenderMarkdownAsHTML.custom.html

@@ -40,12 +40,12 @@
         const renderMarkdownAsHTML = await renderHook(() => useRenderMarkdownAsHTML());
 
         const actual = renderMarkdownAsHTML('Hello, World!').replace(
-          /webchat--css-[\d\w]*-[\d\w]*/u,
-          'webchat--css-xxxxx-xxxxx'
+          /w[\d\w\-]{6}_/gu,
+          'wxxxxxx_'
         );
 
         expect(actual).toBe(
-          '<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>HELLO, WORLD!</p></div>'
+          '<div xmlns="http://www.w3.org/1999/xhtml" class="render-markdown wxxxxxx_render-markdown render-markdown--message-activity wxxxxxx_render-markdown--message-activity"><p>HELLO, WORLD!</p></div>'
         );
       });
     </script>

__tests__/html2/hooks/useRenderMarkdownAsHTML.default.html

@@ -36,12 +36,12 @@
         const renderMarkdownAsHTML = await renderHook(() => useRenderMarkdownAsHTML());
 
         const actual = renderMarkdownAsHTML('Hello, World!').replace(
-          /webchat--css-[\d\w]*-[\d\w]*/u,
-          'webchat--css-xxxxx-xxxxx'
+          /w[\d\w\-]{6}_/gu,
+          'wxxxxxx_'
         );
 
         expect(actual).toBe(
-          '<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Hello, World!</p></div>'
+          '<div xmlns="http://www.w3.org/1999/xhtml" class="render-markdown wxxxxxx_render-markdown render-markdown--message-activity wxxxxxx_render-markdown--message-activity"><p>Hello, World!</p></div>'
         );
       });
     </script>

__tests__/html2/hooks/useRenderMarkdownAsHTML.externalLink.html

@@ -36,12 +36,12 @@
         const renderMarkdownAsHTML = await renderHook(() => useRenderMarkdownAsHTML());
 
         const actual = renderMarkdownAsHTML('Click [here](https://aka.ms/) to find out more.').replace(
-          /webchat--css-[\d\w]*-[\d\w]*/u,
-          'webchat--css-xxxxx-xxxxx'
+          /w[\d\w\-]{6}_/gu,
+          'wxxxxxx_'
         );
 
         expect(actual).toBe(
-          `<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Click \u200B<a href="https://aka.ms/" aria-label="here Opens in a new window; external." rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="webchat__render-markdown__external-link-icon" title="Opens in a new window; external." /></a>\u200B to find out more.</p></div>`
+          `<div xmlns="http://www.w3.org/1999/xhtml" class="render-markdown wxxxxxx_render-markdown render-markdown--message-activity wxxxxxx_render-markdown--message-activity"><p>Click \u200B<a href="https://aka.ms/" aria-label="here Opens in a new window; external." rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="render-markdown__external-link-icon" title="Opens in a new window; external." /></a>\u200B to find out more.</p></div>`
         );
       });
     </script>

__tests__/html2/hooks/useRenderMarkdownAsHTML.externalLink.yue.html

@@ -40,12 +40,12 @@
         const renderMarkdownAsHTML = await renderHook(() => useRenderMarkdownAsHTML());
 
         const actual = renderMarkdownAsHTML('Click [here](https://aka.ms/) to find out more.').replace(
-          /webchat--css-[\d\w]*-[\d\w]*/u,
-          'webchat--css-xxxxx-xxxxx'
+          /w[\d\w\-]{6}_/gu,
+          'wxxxxxx_'
         );
 
         expect(actual).toBe(
-          `<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Click \u200B<a href="https://aka.ms/" aria-label="here 喺新嘅視窗開啟外部連結。" rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="webchat__render-markdown__external-link-icon" title="喺新嘅視窗開啟外部連結。" /></a>\u200B to find out more.</p></div>`
+          `<div xmlns="http://www.w3.org/1999/xhtml" class="render-markdown wxxxxxx_render-markdown render-markdown--message-activity wxxxxxx_render-markdown--message-activity"><p>Click \u200B<a href="https://aka.ms/" aria-label="here 喺新嘅視窗開啟外部連結。" rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="render-markdown__external-link-icon" title="喺新嘅視窗開啟外部連結。" /></a>\u200B to find out more.</p></div>`
         );
       });
     </script>

__tests__/html2/linkDefinition/badge.html

@@ -180,57 +180,57 @@
 
         const [firstActivityElement] = pageElements.activities();
 
-        const linkDefinitions = firstActivityElement.querySelectorAll('.webchat__link-definitions__list-item');
+        const linkDefinitions = firstActivityElement.querySelectorAll('.link-definitions__list-item');
 
         expect(linkDefinitions).toHaveProperty('length', 5);
 
-        expect(linkDefinitions[0].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('A');
+        expect(linkDefinitions[0].querySelector('.link-definitions__list-item-box').tagName).toBe('A');
         expect(
-          linkDefinitions[0].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+          linkDefinitions[0].querySelector('.link-definitions__list-item-text').getAttribute('title')
         ).toBe('Sint amet id officia dolor ex eiusmod ipsum ipsum magna fugiat');
         expect(
-          linkDefinitions[0].querySelector('.webchat__link-definitions__list-item-badge').getAttribute('title')
+          linkDefinitions[0].querySelector('.link-definitions__list-item-badge').getAttribute('title')
         ).toBe(
           'Sit veniam do irure velit est et quis ut Lorem reprehenderit commodo cillum occaecat\n\nNisi quis ut sint elit est nulla enim eiusmod. Deserunt commodo pariatur nostrud culpa aliquip esse pariatur exercitation nulla do proident. Est qui eiusmod aliquip deserunt labore consequat fugiat. Ullamco reprehenderit nostrud eiusmod nisi nulla esse id. Reprehenderit aliqua quis consectetur sit cupidatat fugiat Lorem ex labore. Eiusmod velit laborum quis tempor incididunt excepteur culpa esse nulla.'
         );
 
-        expect(linkDefinitions[1].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('A');
+        expect(linkDefinitions[1].querySelector('.link-definitions__list-item-box').tagName).toBe('A');
         expect(
-          linkDefinitions[1].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+          linkDefinitions[1].querySelector('.link-definitions__list-item-text').getAttribute('title')
         ).toBe('Laboris cupidatat voluptate');
-        expect(linkDefinitions[1].querySelector('.webchat__link-definitions__list-item-badge')).toBeNull();
+        expect(linkDefinitions[1].querySelector('.link-definitions__list-item-badge')).toBeNull();
 
-        expect(linkDefinitions[2].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('BUTTON');
+        expect(linkDefinitions[2].querySelector('.link-definitions__list-item-box').tagName).toBe('BUTTON');
         expect(
-          linkDefinitions[2].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+          linkDefinitions[2].querySelector('.link-definitions__list-item-text').getAttribute('title')
         ).toBe('Velit nulla culpa eu ea consectetur consectetur dolore velit');
         expect(
-          linkDefinitions[2].querySelector('.webchat__link-definitions__list-item-badge').getAttribute('title')
+          linkDefinitions[2].querySelector('.link-definitions__list-item-badge').getAttribute('title')
         ).toBe('Velit exercitation');
 
-        expect(linkDefinitions[3].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('BUTTON');
+        expect(linkDefinitions[3].querySelector('.link-definitions__list-item-box').tagName).toBe('BUTTON');
         expect(
-          linkDefinitions[3].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+          linkDefinitions[3].querySelector('.link-definitions__list-item-text').getAttribute('title')
         ).toBe('Adipisicing enim nulla');
-        expect(linkDefinitions[3].querySelector('.webchat__link-definitions__list-item-badge')).toBeNull();
+        expect(linkDefinitions[3].querySelector('.link-definitions__list-item-badge')).toBeNull();
 
-        expect(document.querySelector('.webchat__link-definitions__header-text')).toHaveProperty(
+        expect(document.querySelector('.link-definitions__header-text')).toHaveProperty(
           'textContent',
           '5 references'
         );
 
-        expect(document.querySelector('.webchat__link-definitions__message-sensitivity-label-text')).toHaveProperty(
+        expect(document.querySelector('.link-definitions__message-sensitivity-label-text')).toHaveProperty(
           'textContent',
           'Sit veniam do irure velit est et quis ut Lorem reprehenderit commodo cillum occaecat'
         );
 
-        expect(document.querySelector('.webchat__link-definitions__message-sensitivity-label')).toHaveProperty(
+        expect(document.querySelector('.link-definitions__message-sensitivity-label')).toHaveProperty(
           'title',
           'Sit veniam do irure velit est et quis ut Lorem reprehenderit commodo cillum occaecat\n\nNisi quis ut sint elit est nulla enim eiusmod. Deserunt commodo pariatur nostrud culpa aliquip esse pariatur exercitation nulla do proident. Est qui eiusmod aliquip deserunt labore consequat fugiat. Ullamco reprehenderit nostrud eiusmod nisi nulla esse id. Reprehenderit aliqua quis consectetur sit cupidatat fugiat Lorem ex labore. Eiusmod velit laborum quis tempor incididunt excepteur culpa esse nulla.'
         );
 
         expect(
-          document.querySelector('.webchat__link-definitions__message-sensitivity-label--is-encrypted')
+          document.querySelector('.link-definitions__message-sensitivity-label--is-encrypted')
         ).toBeTruthy();
       });
     </script>

__tests__/html2/linkDefinition/identifierAsString.html

@@ -31,29 +31,29 @@
 
         const [firstActivityElement] = pageElements.activities();
 
-        const linkDefinitions = firstActivityElement.querySelectorAll('.webchat__link-definitions__list-item');
+        const linkDefinitions = firstActivityElement.querySelectorAll('.link-definitions__list-item');
 
         expect(linkDefinitions).toHaveProperty('length', 3);
 
-        expect(linkDefinitions[0].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('A');
+        expect(linkDefinitions[0].querySelector('.link-definitions__list-item-box').tagName).toBe('A');
         expect(
-          linkDefinitions[0].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+          linkDefinitions[0].querySelector('.link-definitions__list-item-text').getAttribute('title')
         ).toBe('Sint amet id officia dolor ex eiusmod ipsum ipsum magna fugiat');
 
-        expect(linkDefinitions[1].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('A');
+        expect(linkDefinitions[1].querySelector('.link-definitions__list-item-box').tagName).toBe('A');
         expect(
-          linkDefinitions[1].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+          linkDefinitions[1].querySelector('.link-definitions__list-item-text').getAttribute('title')
         ).toBe('Laboris cupidatat voluptate');
-        expect(linkDefinitions[1].querySelector('.webchat__link-definitions__list-item-badge')).toBeNull();
+        expect(linkDefinitions[1].querySelector('.link-definitions__list-item-badge')).toBeNull();
 
-        expect(linkDefinitions[2].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('A');
+        expect(linkDefinitions[2].querySelector('.link-definitions__list-item-box').tagName).toBe('A');
         expect(
-          linkDefinitions[2].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+          linkDefinitions[2].querySelector('.link-definitions__list-item-text').getAttribute('title')
         ).toBe('Velit nulla culpa eu ea consectetur consectetur dolore velit');
 
         expect(
           [].map.call(
-            firstActivityElement.querySelectorAll('.webchat__link-definitions__badge'),
+            firstActivityElement.querySelectorAll('.link-definitions__badge'),
             ({ textContent }) => textContent
           )
         ).toEqual(['Abc', 'DEF', 'xyz']);