feat(chat): code snippets styles

Author: SisIvanova

src/components/chat/extras/markdown-renderer.ts

@@ -70,7 +70,33 @@ export async function createMarkdownRenderer(
       markedShiki({
         highlight(code, lang, _) {
           try {
-            return highlighter.codeToHtml(code, { lang, themes });
+            const html = highlighter.codeToHtml(code, { lang, themes });
+
+            const colorMap: Record<string, string> = {
+              '6f42c1': 'var(--shiki-purple)',
+              '032f62': 'var(--shiki-dark-blue)',
+              '24292e': 'var(--shiki-navy)',
+              d73a49: 'var(--shiki-red)',
+              '005cc5': 'var(--shiki-blue)',
+              '22863a': 'var(--shiki-green)',
+              e36209: 'var(--shiki-orange)',
+            };
+
+            const processed = html.replace(
+              /style="([^"]*)"/g,
+              (_m, styleContent) => {
+                const replaced = styleContent.replace(
+                  /#([0-9a-fA-F]{6})/g,
+                  (_full: any, hex: string) => {
+                    const rep = colorMap[hex.toLowerCase()];
+                    return rep ?? `#${hex}`;
+                  }
+                );
+                return `style="${replaced}"`;
+              }
+            );
+
+            return processed;
           } catch {
             return `<pre><code>${sanitizer(code)}</code></pre>`;
           }

src/components/chat/themes/dark/_themes.scss

@@ -1,6 +1,7 @@
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/chat' as *;
 
+$base: digest-schema($dark-base-chat);
 $material: digest-schema($dark-material-chat);
 $bootstrap: digest-schema($dark-bootstrap-chat);
 $fluent: digest-schema($dark-fluent-chat);

src/components/chat/themes/dark/chat.bootstrap.scss

@@ -1,9 +1,8 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
 }

src/components/chat/themes/dark/chat.fluent.scss

@@ -1,9 +1,8 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
 }

src/components/chat/themes/dark/chat.indigo.scss

@@ -1,9 +1,8 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
 }

src/components/chat/themes/dark/chat.material.scss

@@ -1,9 +1,8 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
 }

src/components/chat/themes/dark/chat.shared.scss

@@ -0,0 +1,18 @@
+@use 'styles/utilities' as *;
+@use './themes' as *;
+
+$theme: $base;
+
+:host {
+    @include css-vars-from-theme($theme, 'ig-chat');
+
+    igc-chat-message::part(message-container) {
+        --shiki-purple: #b392f0;
+        --shiki-navy: #e1e4e8;
+        --shiki-dark-blue: #9ecbff;
+        --shiki-red: #f97583;
+        --shiki-blue: #79bbff;
+        --shiki-green: #85e89d;
+        --shiki-orange: #ffab70;
+    }
+}

src/components/chat/themes/message.base.scss

@@ -35,17 +35,21 @@
       color: color(primary, 500);
     }
 
-    pre, code {
-      white-space: pre-wrap;
-      overflow-wrap: break-word;
-      overflow-x: auto;
-      margin-block: unset;
+    pre.shiki {
+      font-size: rem(14px);
+      line-height: rem(24px);
+      padding: rem(16px);
+      border-radius: rem(4px);
+      max-height: rem(320px);
+      max-width: rem(680px);
+      overflow-y: auto;
     }
 }
 
 [part~='message-header'],
 [part~='message-attachments'],
-[part~='message-actions'] {
+[part~='message-actions'],
+[part~='plain-text'] {
     &:empty {
       display: none;
     }

src/components/chat/themes/shared/chat-message/chat-message.common.scss

@@ -3,12 +3,28 @@
 
 $theme: $material;
 
+:host {
+    --shiki-navy: #24292e;
+    --shiki-dark-blue: #032F62;
+    --shiki-purple: #6f42c1;
+    --shiki-red: #d73a49;
+    --shiki-blue: #005cc5;
+    --shiki-green: #22863a;
+    --shiki-orange: #e36209;
+}
+
 [part~='sent'] {
     background: var-get($theme, 'message-background');
 }
 
 [part~='message-container'] {
     color: var-get($theme, 'message-color');
+
+    // override shiki styles
+    pre.shiki {
+        background-color: var-get($theme, 'code-background') !important;
+        border: rem(1px) solid var-get($theme, 'code-border');
+    }
 }
 
 [part~='message-actions'] {

src/components/chat/themes/themes.ts

@@ -6,20 +6,21 @@ import { styles as bootstrapDark } from './dark/chat.bootstrap.css.js';
 import { styles as fluentDark } from './dark/chat.fluent.css.js';
 import { styles as indigoDark } from './dark/chat.indigo.css.js';
 import { styles as materialDark } from './dark/chat.material.css.js';
+import { styles as sharedDark } from './dark/chat.shared.css.js';
 // Light Overrides
 import { styles as bootstrapLight } from './light/chat.bootstrap.css.js';
 import { styles as fluentLight } from './light/chat.fluent.css.js';
 import { styles as indigoLight } from './light/chat.indigo.css.js';
 import { styles as materialLight } from './light/chat.material.css.js';
+import { styles as sharedLight } from './light/chat.shared.css.js';
 // Shared Styles
-import { styles as shared } from './light/chat.shared.css.js';
 import { styles as bootstrap } from './shared/chat.bootstrap.css.js';
 import { styles as fluent } from './shared/chat.fluent.css.js';
 import { styles as indigo } from './shared/chat.indigo.css.js';
 
 const light = {
   shared: css`
-    ${shared}
+    ${sharedLight}
   `,
   bootstrap: css`
     ${bootstrap} ${bootstrapLight}
@@ -37,7 +38,7 @@ const light = {
 
 const dark = {
   shared: css`
-    ${shared}
+    ${sharedDark}
   `,
   bootstrap: css`
     ${bootstrap} ${bootstrapDark}