feat(chat): code snippets styles

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

@@ -60,6 +60,15 @@ export async function createMarkdownRenderer(
   if (!options?.noHighlighter) {
     const themes = options?.theme ?? DEFAULT_THEME;
     const langs = options?.languages ?? DEFAULT_LANGUAGES;
+    const colorReplacements = {
+      '#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 highlighter = await createHighlighter({
       langs,
@@ -70,7 +79,23 @@ export async function createMarkdownRenderer(
       markedShiki({
         highlight(code, lang, _) {
           try {
-            return highlighter.codeToHtml(code, { lang, themes });
+            return highlighter.codeToHtml(code, {
+              lang,
+              themes,
+              colorReplacements: {
+                'github-light': {
+                  ...colorReplacements,
+                  '#fff': 'var(--shiki-bg)',
+                  '#24292e': 'var(--shiki-fg)',
+                },
+                'github-dark': {
+                  ...colorReplacements,
+                  '#24292e': 'var(--shiki-bg)',
+                  '#e1e4e8': 'var(--shiki-fg)',
+                },
+              },
+              defaultColor: 'light-dark()',
+            });
           } 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,20 @@
+@use 'styles/utilities' as *;
+@use './themes' as *;
+
+$theme: $base;
+
+:host {
+    color-scheme: dark;
+
+    @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/light/chat.shared.scss

@@ -4,5 +4,17 @@
 $theme: $base;
 
 :host {
+    color-scheme: light;
+
     @include css-vars-from-theme($theme, 'ig-chat');
+
+    igc-chat-message::part(message-container) {
+        --shiki-purple: #6f42c1;
+        --shiki-navy: #24292e;
+        --shiki-dark-blue: #032f62;
+        --shiki-red: #d73a49;
+        --shiki-blue: #005cc5;
+        --shiki-green: #22863a;
+        --shiki-orange: #e36209;
+    }
 }

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,16 +3,24 @@
 
 $theme: $material;
 
+:host {
+    --shiki-bg: #{var-get($theme, 'code-background')};
+}
+
 [part~='sent'] {
     background: var-get($theme, 'message-background');
 }
 
 [part~='message-container'] {
     color: var-get($theme, 'message-color');
+
+    pre.shiki {
+        border: rem(1px) solid var-get($theme, 'code-border');
+    }
 }
 
 [part~='message-actions'] {
     igc-icon-button::part(icon) {
         color: var-get($theme, 'message-actions-color');
     }
-}
+}

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}