fix: inline code styling (#668)

jakubduda-dsai · web-flow · commit f1915b2b79c4 · 2025-07-02T15:03:11.000+02:00
diff --git a/packages/ragbits-chat/CHANGELOG.md b/packages/ragbits-chat/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- Added custom styling for multiline and inline-code (#668)
+- Changed toggling darkmode for tailwind class selector (#668)
 - Loading indicator, delayed message buttons, integrated abort controller (#641)
 - Added Eslint, Prettier & CI/CD for Ragbits API Clients (#604)
 - Excluded API connection logic to 2 modules: ragbits-api-client and ragbits-api-client-react which implements hooks for ragbits-api-client (#582)
diff --git a/packages/ragbits-chat/src/ragbits/chat/ui-build/assets/FeedbackForm-B2jE9w2w.js b/packages/ragbits-chat/src/ragbits/chat/ui-build/assets/FeedbackForm-B2jE9w2w.js
diff --git a/packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-BNuA3Pl6.js b/packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-BNuA3Pl6.js
diff --git a/packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-BPwdy74I.css b/packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-BPwdy74I.css
diff --git a/packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-Sq7Wkmt7.css b/packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-Sq7Wkmt7.css
diff --git a/packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-uZ3FrnOp.js b/packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-uZ3FrnOp.js
diff --git a/packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-usobDMOl.js b/packages/ragbits-chat/src/ragbits/chat/ui-build/assets/index-usobDMOl.js
@@ -0,0 +1 @@
+import{aE as a,aF as e,aG as t}from"./index-uZ3FrnOp.js";const n={renderer:t,...e,...a};var o=n;export{o as default};
diff --git a/packages/ragbits-chat/src/ragbits/chat/ui-build/index.html b/packages/ragbits-chat/src/ragbits/chat/ui-build/index.html
@@ -1,12 +1,12 @@
 <!doctype html>
-<html lang="en" class="h-full light">
+<html lang="en" class="h-full">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/assets/ragbits-9U4hpuUb.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Ragbits</title>
-    <script type="module" crossorigin src="/assets/index-cNuF2g19.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BPwdy74I.css">
+    <script type="module" crossorigin src="/assets/index-uZ3FrnOp.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Sq7Wkmt7.css">
   </head>
 
   <body class="h-full">
diff --git a/typescript/ui/index.html b/typescript/ui/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-full light">
+<html lang="en" class="h-full">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="assets/ragbits.svg" />
diff --git a/typescript/ui/src/App.tsx b/typescript/ui/src/App.tsx
@@ -4,7 +4,6 @@ import ChatMessage from "./core/components/ChatMessage";
 import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import PromptInput from "./core/components/PromptInput/PromptInput";
 import { useHistoryContext } from "./core/contexts/HistoryContext/useHistoryContext";
-import { useThemeContext } from "./core/contexts/ThemeContext/useThemeContext";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Icon } from "@iconify/react";
@@ -22,7 +21,6 @@ export default function App() {
     sendMessage,
     stopAnswering,
   } = useHistoryContext();
-  const { theme } = useThemeContext();
   const [showScrollDownButton, setShowScrollDownButton] = useState(false);
   const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
 
@@ -136,7 +134,6 @@ export default function App() {
     <div
       className={cn(
         "flex h-screen w-screen items-start justify-center bg-background",
-        theme,
       )}
     >
       <div className="h-full w-full max-w-full">
diff --git a/typescript/ui/src/core/components/ChatMessage.tsx b/typescript/ui/src/core/components/ChatMessage.tsx
@@ -6,8 +6,6 @@ import remarkGfm from "remark-gfm";
 import { MessageRole } from "@ragbits/api-client-react";
 
 import { ChatMessage as ChatMessageType } from "../../types/history.ts";
-import { useThemeContext } from "../contexts/ThemeContext/useThemeContext.ts";
-import { Theme } from "../contexts/ThemeContext/ThemeContext.ts";
 import DelayedTooltip from "./DelayedTooltip.tsx";
 import PluginWrapper from "../utils/plugins/PluginWrapper.tsx";
 import { FeedbackFormPlugin } from "../../plugins/FeedbackPlugin/index.tsx";
@@ -38,7 +36,6 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
     const [copyIcon, setCopyIcon] = useState("heroicons:clipboard");
 
     const copyIconTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const { theme } = useThemeContext();
 
     const onCopyClick = () => {
       navigator.clipboard.writeText(content);
@@ -79,8 +76,7 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
             {rightAlign ? (
               <div
                 className={cn(
-                  "prose whitespace-pre-line",
-                  theme === Theme.DARK && "dark:prose-invert",
+                  "prose whitespace-pre-line dark:prose-invert",
                   classNames?.content,
                 )}
               >
@@ -105,11 +101,22 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
                 </div>
                 <Markdown
                   className={cn(
-                    "markdown-container prose max-w-full",
-                    theme === Theme.DARK && "dark:prose-invert",
+                    "markdown-container prose max-w-full dark:prose-invert",
                     classNames?.content,
                   )}
                   remarkPlugins={[remarkGfm]}
+                  components={{
+                    pre: ({ children }) => (
+                      <pre className="max-w-full overflow-auto rounded bg-gray-200 p-2 font-mono font-normal text-gray-800 dark:bg-gray-800 dark:text-gray-200">
+                        {children}
+                      </pre>
+                    ),
+                    code: ({ children }) => (
+                      <code className="rounded bg-gray-200 px-2 py-1 font-mono font-normal text-gray-800 dark:bg-gray-800 dark:text-gray-200">
+                        {children}
+                      </code>
+                    ),
+                  }}
                 >
                   {content}
                 </Markdown>
diff --git a/typescript/ui/src/core/components/Layout.tsx b/typescript/ui/src/core/components/Layout.tsx
@@ -71,12 +71,7 @@ export default function Layout({
   }
 
   return (
-    <div
-      className={cn(
-        "flex h-full min-h-[48rem] justify-center py-4",
-        theme === Theme.DARK && "dark",
-      )}
-    >
+    <div className={cn("flex h-full min-h-[48rem] justify-center py-4")}>
       <div className="flex w-full flex-col px-4 sm:max-w-[1200px]">
         <header
           className={cn(
diff --git a/typescript/ui/src/core/contexts/ConfigContext/ConfigContextProvider.tsx b/typescript/ui/src/core/contexts/ConfigContext/ConfigContextProvider.tsx
@@ -1,13 +1,11 @@
 import { PropsWithChildren, useEffect, useMemo } from "react";
 import { ConfigContext } from "./ConfigContext";
 import { useRagbitsCall } from "@ragbits/api-client-react";
-import { useThemeContext } from "../ThemeContext/useThemeContext";
 import { CircularProgress, cn } from "@heroui/react";
 import { FeedbackFormPluginName } from "../../../plugins/FeedbackPlugin";
 import { pluginManager } from "../../utils/plugins/PluginManager";
 
 export function ConfigContextProvider({ children }: PropsWithChildren) {
-  const { theme } = useThemeContext();
   const { call: fetchConfig, ...config } = useRagbitsCall("/api/config");
 
   const value = useMemo(() => {
@@ -42,7 +40,6 @@ export function ConfigContextProvider({ children }: PropsWithChildren) {
       <div
         className={cn(
           "flex h-screen w-screen items-start justify-center bg-background",
-          theme,
         )}
       >
         <div className="m-auto flex flex-col items-center gap-4 text-default-900">
@@ -58,7 +55,6 @@ export function ConfigContextProvider({ children }: PropsWithChildren) {
       <div
         className={cn(
           "flex h-screen w-screen items-start justify-center bg-background",
-          theme,
         )}
       >
         <div className="m-auto flex flex-col items-center gap-4 text-default-900">
diff --git a/typescript/ui/src/core/contexts/ThemeContext/ThemeContextProvider.tsx b/typescript/ui/src/core/contexts/ThemeContext/ThemeContextProvider.tsx
@@ -2,6 +2,7 @@ import {
   FC,
   ReactNode,
   useCallback,
+  useEffect,
   useMemo,
   useSyncExternalStore,
 } from "react";
@@ -31,6 +32,13 @@ export const ThemeContextProvider: FC<{ children: ReactNode }> = ({
 }) => {
   const themeValue = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 
+  useEffect(() => {
+    document.documentElement.classList.toggle(
+      "dark",
+      themeValue === Theme.DARK,
+    );
+  }, [themeValue]);
+
   const setTheme = useCallback((newTheme: Theme) => {
     window.localStorage.setItem("theme", newTheme);
     window.dispatchEvent(new Event("storage"));
diff --git a/typescript/ui/src/globals.css b/typescript/ui/src/globals.css
@@ -2,9 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-.markdown-container pre {
-  overflow: auto;
-  max-width: 100%;
+.markdown-container code::before,
+.markdown-container code::after {
+  content: none;
 }
 
 .prose {
diff --git a/typescript/ui/src/plugins/FeedbackPlugin/components/FeedbackForm.tsx b/typescript/ui/src/plugins/FeedbackPlugin/components/FeedbackForm.tsx
@@ -5,10 +5,8 @@ import {
   ModalHeader,
   ModalBody,
   Button,
-  cn,
   useDisclosure,
 } from "@heroui/react";
-import { useThemeContext } from "../../../core/contexts/ThemeContext/useThemeContext";
 import { FeedbackType, useRagbitsCall } from "@ragbits/api-client-react";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import DelayedTooltip from "../../../core/components/DelayedTooltip";
@@ -30,7 +28,6 @@ export default function FeedbackForm({ messageServerId }: FeedbackFormProps) {
   const [feedbackType, setFeedbackType] = useState<FeedbackType>(
     FeedbackType.LIKE,
   );
-  const { theme } = useThemeContext();
   const feedbackCallFactory = useRagbitsCall("/api/feedback", {
     headers: {
       "Content-Type": "application/json",
@@ -115,7 +112,7 @@ export default function FeedbackForm({ messageServerId }: FeedbackFormProps) {
           </Button>
         </DelayedTooltip>
       )}
-      <Modal isOpen={isOpen} onOpenChange={onOpenChange} className={cn(theme)}>
+      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
         <ModalContent>
           {(onClose) => (
             <>
diff --git a/typescript/ui/tailwind.config.js b/typescript/ui/tailwind.config.js
@@ -2,6 +2,7 @@ import { heroui } from "@heroui/react";
 
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: "selector",
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+import{aE as a,aF as e,aG as t}from"./index-uZ3FrnOp.js";const n={renderer:t,...e,...a};var o=n;export{o as default};`