From 8deaf4ccaf9c09ddb5fb98468fcd7e92e3fae8a4 Mon Sep 17 00:00:00 2001
From: Massimiliano Angelino <38036163+massi-ang@users.noreply.github.com>
Date: Mon, 23 Oct 2023 20:15:40 +0200
Subject: [PATCH] Feat styles for json viewer (#131)

* feat: new visual styles for the json view component

* feat: refined styles
---
 .../src/components/chatbot/chat-message.tsx   | 13 +++++++++-
 .../react-app/src/styles/app.scss             | 25 +++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/lib/user-interface/react-app/src/components/chatbot/chat-message.tsx b/lib/user-interface/react-app/src/components/chatbot/chat-message.tsx
index 002c7ec97..4f54a34a5 100644
--- a/lib/user-interface/react-app/src/components/chatbot/chat-message.tsx
+++ b/lib/user-interface/react-app/src/components/chatbot/chat-message.tsx
@@ -15,6 +15,7 @@ import { JsonView, darkStyles } from "react-json-view-lite";
 import ReactMarkdown from "react-markdown";
 import { Dispatch } from "react";
 import "react-json-view-lite/dist/index.css";
+import "../../styles/app.scss";
 
 export interface ChatMessageProps {
   message: ChatBotHistoryItem;
@@ -31,7 +32,17 @@ export default function ChatMessage(props: ChatMessageProps) {
             props.message.metadata &&
             props.configuration.showMetadata && (
               <ExpandableSection variant="footer" headerText="Metadata">
-                <JsonView data={props.message.metadata} style={darkStyles} />
+                <JsonView
+                  data={props.message.metadata}
+                  style={{
+                    ...darkStyles,
+                    stringValue: "jsonStrings",
+                    numberValue: "jsonNumbers",
+                    booleanValue: "jsonBool",
+                    nullValue: "jsonNull",
+                    container: "jsonContainer",
+                  }}
+                />
               </ExpandableSection>
             )
           }
diff --git a/lib/user-interface/react-app/src/styles/app.scss b/lib/user-interface/react-app/src/styles/app.scss
index 7ce882666..802caa523 100644
--- a/lib/user-interface/react-app/src/styles/app.scss
+++ b/lib/user-interface/react-app/src/styles/app.scss
@@ -54,3 +54,28 @@ body.awsui-dark-mode {
     }
   }
 }
+
+.jsonContainer {
+  font-family: "Open Sans", sans-serif;
+  font-size: 1em;
+  background-color: #0e1b2ac3;
+}
+
+.jsonStrings {
+  color: rgb(74, 234, 167);
+  
+}
+
+.jsonNumbers {
+  color: rgb(255, 223, 60);
+}
+
+.jsonBool {
+  color: rgb(252, 178, 250);
+  font-weight: 600;
+}
+
+.jsonNull {
+  color:rgb(74, 205, 234);
+  font-weight: 600;
+}