From 8fe283dc5688f028218839a0cc5960e1a2b7a500 Mon Sep 17 00:00:00 2001 From: sherifButt <90522472+sherifButt@users.noreply.github.com> Date: Sat, 24 Feb 2024 02:02:23 +0000 Subject: [PATCH] #765 - Enhanced chat styling (#786) * enhanced chat style and remove list restriction * [FEAT]: Enhanced chat styling #765 * small changes in CSS to prevent collisions * remove commented code * linting --------- Co-authored-by: timothycarambat --- .../ChatHistory/HistoricalMessage/index.jsx | 2 +- .../ChatHistory/PromptReply/index.jsx | 2 +- .../ChatContainer/ChatHistory/index.jsx | 2 +- frontend/src/index.css | 154 ++++++++++++++++++ frontend/src/utils/chat/markdown.js | 4 +- 5 files changed, 158 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx index f4c5c86a..1a3f1a0d 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx @@ -52,7 +52,7 @@ const HistoricalMessage = ({ ) : ( diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx index 5be8afc1..6af66ea6 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx @@ -83,7 +83,7 @@ export default function ChatHistory({ history = [], workspace, sendCommand }) { return (
diff --git a/frontend/src/index.css b/frontend/src/index.css index 2c437982..e2141d8d 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -443,3 +443,157 @@ dialog::backdrop { .input-label { @apply text-[14px] font-bold text-white; } + +/** + * ============================================== + * Markdown Styles + * ============================================== + */ +.markdown, +.markdown > * { + font-weight: 400; +} + +.markdown h1 { + font-size: xx-large; + line-height: 1.7; + padding-left: 0.3rem; +} + +.markdown h2 { + line-height: 1.5; + font-size: x-large; + padding-left: 0.3rem; +} + +.markdown h3 { + line-height: 1.4; + font-size: large; + padding-left: 0.3rem; +} + +/* Table Styles */ + +.markdown table { + border-collapse: separate; +} + +.markdown th { + border-top: none; +} + +.markdown td:first-child, +.markdown th:first-child { + border-left: none; +} + +.markdown table { + width: 100%; + border-collapse: collapse; + color: #bdbdbe; + font-size: 13px; + margin: 30px 0px; + border-radius: 10px; + overflow: hidden; + font-weight: normal; +} + +.markdown table thead { + color: #fff; + text-transform: uppercase; + font-weight: bolder; +} + +.markdown hr { + border: 0; + border-top: 1px solid #cdcdcd40; + margin: 1rem 0; +} + +.markdown table th, +.markdown table td { + padding: 8px 15px; + border-bottom: 1px solid #cdcdcd2e; + text-align: left; +} + +.markdown table th { + padding: 14px 15px; +} + +@media (max-width: 600px) { + .markdown table th, + .markdown table td { + padding: 10px; + } +} + +/* List Styles */ +.markdown ol { + list-style: decimal-leading-zero; + padding-left: 0px; + padding-top: 10px; + margin: 10px; +} + +.markdown ol li { + margin-left: 20px; + padding-left: 10px; + position: relative; + transition: all 0.3s ease; + line-height: 1.4rem; +} + +.markdown ol li::marker { + padding-top: 10px; +} + +.markdown ol li p { + margin: 0.5rem; + padding-top: 10px; +} + +.markdown ul { + list-style: revert-layer; + /* color: #cfcfcfcf; */ + padding-left: 0px; + padding-top: 10px; + padding-bottom: 10px; + margin: 10px; +} + +.markdown ul li::marker { + color: #d0d0d0cf; + padding-top: 10px; +} + +.markdownul li { + margin-left: 20px; + + padding-left: 10px; + transition: all 0.3s ease; + line-height: 1.4rem; +} + +.markdown ul li > ul { + padding-left: 20px; + margin: 0px; +} + +.markdown p { + font-weight: 400; + margin: 0.35rem; +} + +.markdown { + text-wrap: wrap; +} + +.markdown pre { + margin: 20px 0; +} + +.markdown strong { + font-weight: 600; + color: #fff; +} diff --git a/frontend/src/utils/chat/markdown.js b/frontend/src/utils/chat/markdown.js index 47b47734..ff4af77b 100644 --- a/frontend/src/utils/chat/markdown.js +++ b/frontend/src/utils/chat/markdown.js @@ -43,9 +43,7 @@ const markdown = markdownIt({ "
" ); }, -}) - // Enable
    and
      items to not assume an HTML structure so we can keep numbering from responses. - .disable("list"); +}); export default function renderMarkdown(text = "") { return markdown.render(text);