From b7dde8df1e91c48cbd2bd6b1b5f0e16ace9a16e4 Mon Sep 17 00:00:00 2001
From: Fausto Quaggia <fausto.quaggia@gmail.com>
Date: Fri, 26 Jul 2024 19:30:19 +0200
Subject: [PATCH] fix: markdown styling and syntax highlighter theme

---
 .../orama-chat-assistent-message.stories.tsx  | 38 +++++++-------
 .../orama-markdown/orama-markdown.scss        | 52 ++++++++++++++++---
 .../orama-markdown/orama-markdown.tsx         |  2 +-
 3 files changed, 65 insertions(+), 27 deletions(-)

diff --git a/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx b/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx
index f348b90c..557e4051 100644
--- a/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx
+++ b/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx
@@ -53,41 +53,41 @@ Ready to start writing?  Either start changing stuff on the left or
 [Markdown]: http://daringfireball.net/projects/markdown/
 
 \`\`\`javascript
-  function helloWorld() {
-    console.log('Hello World!')
-  }
+function helloWorld() {
+  console.log('Hello World!')
+}
 \`\`\`
 
 \`\`\`javascript
-  function helloWorld() {
-    console.log('Hello World!')
-  }
+function helloWorld() {
+  console.log('Hello World!')
+}
 \`\`\`
 
 \`\`\`typescript
-  function helloWorld() : void {
-    console.log('Hello World!')
-  }
+function helloWorld() : void {
+  console.log('Hello World!')
+}
 \`\`\`
 
 \`\`\`cpp
-  for(int i = 0; i < 10; i++) {
-    cout << "Hello World!" << endl;
-  }
+for(int i = 0; i < 10; i++) {
+  cout << "Hello World!" << endl;
+}
 \`\`\`
 
 \`\`\`c
-  for(int i = 0; i < 10; i++) {
-    cout << "Hello World!" << endl;
-  }
+for(int i = 0; i < 10; i++) {
+  cout << "Hello World!" << endl;
+}
 \`\`\`
 
 \`\`\`java
-  class HelloWorld {
-    public static void main(String[] args) {
-      System.out.println("Hello World!");
-    }
+class HelloWorld {
+  public static void main(String[] args) {
+    System.out.println("Hello World!");
   }
+}
 \`\`\`
 `
 
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.scss b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.scss
index b5eb6336..a98f5d75 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.scss
+++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.scss
@@ -1,19 +1,57 @@
+:host {
+  color: var(--text-color-secondary, text-color('secondary'));
+}
+
+p,
+a,
+li {
+  font-size: var(--font-size-md, $font-size-md);
+  line-height: var(--font-line-height-md, $font-line-height-m);
+}
+
+ul,
+ol,
+blockquote {
+  margin: 0 0 var(--spacing-xs, $spacing-xs) var(--spacing-xs, $spacing-xs);
+  padding: 0 0 0 var(--spacing-xs, $spacing-xs);
+  padding-inline-start: var(--spacing-l, $spacing-l);
+}
+
+blockquote {
+  border-left: var(--spacing-xs, $spacing-xs) solid var(--border-color-primary, border-color('primary'));
+}
+
+p > code {
+  margin: 0 var(--spacing-xs, $spacing-xs);
+}
+
 pre > code {
   position: relative;
 }
 
-:host {
-  color: var(--text-color-secondary, text-color(secondary));
+a {
+  color: var(--text-color-primary, text-color('primary'));
+  font-weight: bold;
+  text-decoration: underline;
+  opacity: 0.9;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.orama-markdown-pre {
+  position: relative;
 }
 
 .orama-markdown-code {
-  border-radius: 0 0 var(--radius-s, $radius-s) var(--radius-s, $radius-s);
+  border-radius: var(--radius-s, $radius-s);
 }
 
 .orama-markdown-code-title {
+  display: block;
   font-size: var(--font-size-xxs, $font-size-xxs);
-  background-color: var(--background-color-reverse, background-color(reverse));
-  color: var(--text-color-reverse, text-color(reverse));
-  padding: var(--spacing-xs, $spacing-xs) var(--spacing-m, $spacing-m);
-  border-radius: var(--radius-s, $radius-s) var(--radius-s, $radius-s) 0 0;
+  color: var(--text-color-primary, text-color('primary'));
+  padding: var(--spacing-s, $spacing-s) 0;
+  opacity: 0.5;
 }
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx
index 433b96ac..ab12aedd 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx
+++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx
@@ -166,7 +166,7 @@ export class OramaMarkdown {
         evaluate if we need this inside our codebase or keep it in a CDN */}
         <link
           rel="stylesheet"
-          href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/night-owl.min.css"
+          href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/atom-one-dark.min.css"
         />
         <div
           ref={(ref) => {