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 && ( - + ) } 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; +}