fix: edge cases empty code block

web/screens/Thread/ThreadCenterPanel/SimpleTextMessage/index.tsx

@@ -48,20 +48,20 @@
 import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
 
 const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
   let text = ''
   const isUser = props.role === ChatCompletionRole.User
   const isSystem = props.role === ChatCompletionRole.System
   const editMessage = useAtomValue(editMessageAtom)
   const activeThread = useAtomValue(activeThreadAtom)
 
   if (props.content && props.content.length > 0) {
     text = props.content[0]?.text?.value ?? ''
   }
 
   const clipboard = useClipboard({ timeout: 1000 })
 
   function extractCodeLines(node: { children: { children: any[] }[] }) {
     const codeLines: any[] = []
 
     // Helper function to extract text recursively from children
     function getTextFromNode(node: {
@@ -69,42 +69,44 @@
       value: any
       children: any[]
     }): string {
       if (node.type === 'text') {
         return node.value
       } else if (node.children) {
         return node.children.map(getTextFromNode).join('')
       }
       return ''
     }
 
     // Traverse each line in the <code> block
     node.children[0].children.forEach(
       (lineNode: {
         type: string
         tagName: string
         value: any
         children: any[]
       }) => {
         if (lineNode.type === 'element' && lineNode.tagName === 'span') {
           const lineContent = getTextFromNode(lineNode)
           codeLines.push(lineContent)
         }
       }
     )
 
     // Join the lines with newline characters for proper formatting
     return codeLines.join('\n')
   }
   function wrapCodeBlocksWithoutVisit() {
     return (tree: { children: any[] }) => {
       tree.children = tree.children.map((node) => {
         if (node.tagName === 'pre' && node.children[0]?.tagName === 'code') {
           const language = node.children[0].properties.className?.[1]?.replace(
             'language-',
             ''
           )
 
-          if (!language) return node
+          if (extractCodeLines(node) === '') {
+            return node
+          }
 
           return {
             type: 'element',
@@ -145,7 +147,7 @@
                             type: 'text',
                             value: language
                               ? `${getLanguageFromExtension(language)}`
-                              : 'No file name',
+                              : '',
                           },
                         ],
                       },

web/styles/components/code-block.scss

@@ -55,7 +55,6 @@
 .hljs {
   overflow: auto;
   display: block;
-  padding: 16px;
   font-size: 14px;
   border-bottom-left-radius: 0.4rem;
   border-bottom-right-radius: 0.4rem;
@@ -65,15 +64,16 @@
 pre {
   background: hsla(var(--app-code-block));
   overflow: auto;
-  padding: 8px 16px;
+
   border-radius: 0.4rem;
 }
 pre > code {
-  text-indent: 0;
   white-space: pre;
   font-size: 14px;
   overflow: auto;
   color: #f8f8f2;
+  display: block;
+  padding: 16px;
 }
 
 .hljs-emphasis {
@@ -155,12 +155,11 @@ span.code-line {
 
 .numbered-code-line::before {
   content: attr(data-line-number);
-
-  margin-left: -8px;
+  margin-left: -4px;
   margin-right: 16px;
-  width: 1rem;
+  width: 1.2rem;
   font-size: 12px;
-  color: var(--color-text-weak);
+  color: hsla(var(--text-tertiary));
   text-align: right;
 
   display: inline-block;