more props for container

apps/web/src/components/ui/streaming/StreamingMessageCode/StreamingMessageCode.tsx

@@ -121,18 +121,31 @@ export const StreamingMessageCode: React.FC<{
 
     return (
       <FileCard collapsible={collapsible} fileName={fileName} headerButtons={buttonComponent}>
-        <div className="w-full overflow-x-auto p-3">
-          {lineSegments.map((segment, index) => (
+        <div className="w-full pr-0">
+          {/* {lineSegments.map((segment, index) => (
             <div
               key={`${segment.lineNumber}-${index}`}
               className={cn('line-number pr-1', !isStreamFinished && `duration-300 ${animation}`)}>
               {segment.type === 'text' ? (
-                <MemoizedSyntaxHighlighter lineNumber={segment.lineNumber} text={segment.content} />
+                <SyntaxHighlighter
+                  language={'yaml'}
+                  showLineNumbers
+                  startingLineNumber={segment.lineNumber}
+                  className={'m-0! w-fit! border-none! p-0! text-[10px]'}>
+                  {segment.content}
+                </SyntaxHighlighter>
               ) : (
                 <HiddenSection numberOfLinesUnmodified={segment.numberOfLines || 0} />
               )}
             </div>
-          ))}
+          ))} */}
+          <SyntaxHighlighter
+            language={'yaml'}
+            showLineNumbers
+            startingLineNumber={1}
+            className={'p-2.5 text-[10px]'}>
+            {text}
+          </SyntaxHighlighter>
         </div>
       </FileCard>
     );
@@ -152,19 +165,3 @@ const HiddenSection: React.FC<{
     <div className="bg-border h-[0.5px] w-4" />
   </div>
 );
-
-const MemoizedSyntaxHighlighter = React.memo(
-  ({ lineNumber, text }: { lineNumber: number; text: string }) => {
-    return (
-      <SyntaxHighlighter
-        language={'yaml'}
-        showLineNumbers
-        startingLineNumber={lineNumber}
-        className={'m-0! w-fit! border-none! p-0!'}>
-        {text}
-      </SyntaxHighlighter>
-    );
-  }
-);
-
-MemoizedSyntaxHighlighter.displayName = 'MemoizedSyntaxHighlighter';

apps/web/src/components/ui/typography/SyntaxHighlight/SyntaxHighlighter.module.css

@@ -2,7 +2,8 @@
 .shikiWrapper :global(pre) {
   margin: 0;
   padding: 0em;
-  overflow-x: auto;
+  width: fit-content;
+  margin-right: 0.75rem;
 }
 
 .shikiWrapper :global(code) {
@@ -23,8 +24,8 @@
 .shikiWrapper.withLineNumbers .line::before {
   content: counter(step);
   counter-increment: step;
-  width: 2rem;
-  margin-right: 1.35rem;
+  width: 1.5rem;
+  margin-right: 1rem;
   display: inline-block;
   text-align: right;
   color: var(--color-text-tertiary);

apps/web/src/components/ui/typography/SyntaxHighlight/SyntaxHighlighter.tsx

@@ -7,65 +7,65 @@ import styles from './SyntaxHighlighter.module.css';
 import { animations, type MarkdownAnimation } from '../animation-common';
 import type { ThemedToken } from 'shiki';
 
-export const SyntaxHighlighter = (props: {
-  children: string;
-  language?: 'sql' | 'yaml';
-  showLineNumbers?: boolean;
-  startingLineNumber?: number;
-  className?: string;
-  containerClassName?: string;
-  customStyle?: React.CSSProperties;
-  isDarkMode?: boolean;
-  animation?: MarkdownAnimation;
-  animationDuration?: number;
-}) => {
-  const {
-    children,
-    language = 'sql',
-    showLineNumbers = false,
-    startingLineNumber = 1,
-    className = '',
-    containerClassName = '',
-    customStyle = {},
-    isDarkMode = false,
-    animation = 'none',
-    animationDuration = 700
-  } = props;
+export const SyntaxHighlighter = React.memo(
+  (props: {
+    children: string;
+    language?: 'sql' | 'yaml';
+    showLineNumbers?: boolean;
+    startingLineNumber?: number;
+    className?: string;
+    containerClassName?: string;
+    isDarkMode?: boolean;
+    animation?: MarkdownAnimation;
+    animationDuration?: number;
+  }) => {
+    const {
+      children,
+      language = 'sql',
+      showLineNumbers = false,
+      startingLineNumber = 1,
+      className = '',
+      containerClassName = '',
+      isDarkMode = false,
+      animation = 'none',
+      animationDuration = 700
+    } = props;
 
-  const [tokens, setTokens] = useState<any>(null);
-  const [isLoading, setIsLoading] = useState(true);
+    const [tokens, setTokens] = useState<{
+      tokens: ThemedToken[][];
+      bg: string;
+      fg: string;
+    } | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
 
-  useEffect(() => {
-    const loadTokens = async () => {
-      try {
-        const theme = isDarkMode ? 'github-dark' : 'github-light';
-        const tokenData = await getCodeTokens(children, language, theme);
+    useEffect(() => {
+      const loadTokens = async () => {
+        try {
+          const theme = isDarkMode ? 'github-dark' : 'github-light';
+          const tokenData = await getCodeTokens(children, language, theme);
 
-        setTokens(tokenData);
-        setIsLoading(false);
-      } catch (error) {
-        console.error('Error tokenizing code:', error);
-        setIsLoading(false);
-      }
-    };
+          setTokens(tokenData);
+          setIsLoading(false);
+        } catch (error) {
+          console.error('Error tokenizing code:', error);
+          setIsLoading(false);
+        }
+      };
 
-    loadTokens();
-  }, [children, language, isDarkMode]);
+      loadTokens();
+    }, [children, language, isDarkMode]);
+
+    if (isLoading || !tokens) {
+      return (
+        <div className={cn(styles.shikiContainer, containerClassName, 'invisible')}>
+          <pre>
+            <code lang={language}>{children}</code>
+          </pre>
+        </div>
+      );
+    }
 
-  if (isLoading || !tokens) {
     return (
-      <div
-        className={cn(styles.shikiContainer, containerClassName, 'invisible')}
-        style={customStyle}>
-        <pre>
-          <code>{children}</code>
-        </pre>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn(styles.shikiContainer, containerClassName)} style={customStyle}>
       <div
         className={cn(
           styles.shikiWrapper,
@@ -85,7 +85,7 @@ export const SyntaxHighlighter = (props: {
         }}>
         <pre>
           <code>
-            {tokens.tokens.map((line: any[], index: number) => {
+            {tokens.tokens.map((line: ThemedToken[], index: number) => {
               return (
                 <Line
                   key={index}
@@ -99,9 +99,11 @@ export const SyntaxHighlighter = (props: {
           </code>
         </pre>
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
+
+SyntaxHighlighter.displayName = 'SyntaxHighlighter';
 
 // Line component for rendering individual lines with animation support
 interface LineProps {