@@ -94,6 +103,36 @@ export const AIMessage = ({
handleForceSearch?: () => void;
retrievalDisabled?: boolean;
}) => {
+ const [isReady, setIsReady] = useState(false);
+ useEffect(() => {
+ Prism.highlightAll();
+ setIsReady(true);
+ }, []);
+
+ // this is needed to give Prism a chance to load
+ if (!isReady) {
+ return
;
+ }
+
+ if (!isComplete) {
+ const trimIncompleteCodeSection = (
+ content: string | JSX.Element
+ ): string | JSX.Element => {
+ if (typeof content === "string") {
+ const pattern = /```[a-zA-Z]+[^\s]*$/;
+ const match = content.match(pattern);
+ if (match && match.index && match.index > 3) {
+ const newContent = content.slice(0, match.index - 3);
+ return newContent;
+ }
+ return content;
+ }
+ return content;
+ };
+
+ content = trimIncompleteCodeSection(content);
+ }
+
const loader =
currentTool === IMAGE_GENERATION_TOOL_NAME ? (
@@ -181,6 +220,7 @@ export const AIMessage = ({
{typeof content === "string" ? (
(
@@ -191,8 +231,12 @@ export const AIMessage = ({
rel="noopener noreferrer"
/>
),
+ code: (props) => (
+
+ ),
}}
remarkPlugins={[remarkGfm]}
+ rehypePlugins={[rehypePrism]}
>
{content}
diff --git a/web/src/app/chat/message/custom-code-styles.css b/web/src/app/chat/message/custom-code-styles.css
new file mode 100644
index 000000000..b7d419beb
--- /dev/null
+++ b/web/src/app/chat/message/custom-code-styles.css
@@ -0,0 +1,36 @@
+pre[class*="language-"] {
+ padding: 0px; /* Override padding */
+ margin: 0px;
+ border: none;
+}
+
+.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ padding: 0px; /* Override padding */
+ margin: 0px;
+
+ /* Override scrollbar style to match prism-tomorrow */
+ ::-webkit-scrollbar {
+ width: 8px; /* Vertical scrollbar width */
+ height: 8px; /* Horizontal scrollbar height */
+ }
+
+ ::-webkit-scrollbar-track {
+ background: #1f2937; /* Dark track background color */
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: #4b5563; /* Dark handle color */
+ border-radius: 10px;
+ transition:
+ background 0.3s ease,
+ box-shadow 0.3s ease; /* Smooth transition for hover effect */
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background: #6b7280; /* Dark handle color on hover */
+ box-shadow: 0 0 10px #6b7280; /* Light up effect on hover */
+ }
+
+ scrollbar-width: thin;
+ scrollbar-color: #4b5563 #1f2937; /* thumb and track colors */
+}
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 413e9d46e..37d92f36a 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -2,6 +2,19 @@
@tailwind components;
@tailwind utilities;
+@layer utilities {
+ /* Hide scrollbar for Chrome, Safari and Opera */
+ .no-scrollbar::-webkit-scrollbar {
+ display: none;
+ }
+
+ /* Hide scrollbar for IE, Edge and Firefox */
+ .no-scrollbar {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+ }
+}
+
::-webkit-scrollbar-track {
background: #f9fafb; /* Track background color */
}