diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx
index 0ac016a609..59f19586ae 100644
--- a/web/containers/ModelDropdown/index.tsx
+++ b/web/containers/ModelDropdown/index.tsx
@@ -306,7 +306,7 @@ const ModelDropdown = ({
       className={twMerge('relative', disabled && 'pointer-events-none')}
       data-testid="model-selector"
     >
-      <div ref={setToggle}>
+      <div className="flex [&>div]:w-full" ref={setToggle}>
         {chatInputMode ? (
           <Badge
             data-testid="model-selector-badge"
diff --git a/web/package.json b/web/package.json
index 1cf5aa752f..bed94aed42 100644
--- a/web/package.json
+++ b/web/package.json
@@ -50,7 +50,10 @@
     "ulidx": "^2.3.0",
     "use-debounce": "^10.0.0",
     "uuid": "^9.0.1",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "slate": "latest",
+    "slate-react": "latest",
+    "slate-history": "latest"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.0.1",
diff --git a/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx b/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx
new file mode 100644
index 0000000000..8f296368f4
--- /dev/null
+++ b/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx
@@ -0,0 +1,408 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { MessageStatus } from '@janhq/core'
+import hljs from 'highlight.js'
+
+import { useAtom, useAtomValue } from 'jotai'
+import { BaseEditor, createEditor, Editor, Element, Transforms } from 'slate'
+import { withHistory } from 'slate-history' // Import withHistory
+import {
+  Editable,
+  ReactEditor,
+  Slate,
+  withReact,
+  RenderLeafProps,
+} from 'slate-react'
+
+import { twMerge } from 'tailwind-merge'
+
+import { currentPromptAtom } from '@/containers/Providers/Jotai'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
+import useSendChatMessage from '@/hooks/useSendChatMessage'
+
+import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
+
+import {
+  getActiveThreadIdAtom,
+  activeSettingInputBoxAtom,
+} from '@/helpers/atoms/Thread.atom'
+
+type CustomElement = {
+  type: 'paragraph' | 'code' | null
+  children: CustomText[]
+  language?: string // Store the language for code blocks
+}
+type CustomText = {
+  text: string
+  code?: boolean
+  language?: string
+  className?: string
+  type?: 'paragraph' | 'code' // Add the type property
+  format?: 'bold' | 'italic'
+}
+
+declare module 'slate' {
+  interface CustomTypes {
+    Editor: BaseEditor & ReactEditor
+    Element: CustomElement
+    Text: CustomText
+  }
+}
+
+const initialValue: CustomElement[] = [
+  {
+    type: 'paragraph',
+    children: [{ text: '' }],
+  },
+]
+
+type RichTextEditorProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+
+const RichTextEditor = ({
+  className,
+  style,
+  disabled,
+  placeholder,
+  spellCheck,
+}: RichTextEditorProps) => {
+  const [editor] = useState(() => withHistory(withReact(createEditor())))
+  const currentLanguage = useRef<string>('plaintext')
+  const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom)
+  const textareaRef = useRef<HTMLDivElement>(null)
+  const activeThreadId = useAtomValue(getActiveThreadIdAtom)
+  const activeSettingInputBox = useAtomValue(activeSettingInputBoxAtom)
+  const messages = useAtomValue(getCurrentChatMessagesAtom)
+  const { sendChatMessage } = useSendChatMessage()
+  const { stopInference } = useActiveModel()
+
+  // The decorate function identifies code blocks and marks the ranges
+  const decorate = useCallback(
+    (entry: [any, any]) => {
+      const ranges: any[] = []
+      const [node, path] = entry
+
+      if (Editor.isBlock(editor, node) && node.type === 'paragraph') {
+        node.children.forEach((child: { text: any }, childIndex: number) => {
+          const text = child.text
+
+          // Match bold text pattern *text*
+          const boldMatches = [...text.matchAll(/(\*.*?\*)/g)] // Find bold patterns
+          boldMatches.forEach((match) => {
+            const startOffset = match.index + 1 || 0
+            const length = match[0].length - 2
+
+            ranges.push({
+              anchor: { path: [...path, childIndex], offset: startOffset },
+              focus: {
+                path: [...path, childIndex],
+                offset: startOffset + length,
+              },
+              format: 'italic',
+              className: 'italic',
+            })
+          })
+        })
+      }
+
+      if (Editor.isBlock(editor, node) && node.type === 'paragraph') {
+        node.children.forEach((child: { text: any }, childIndex: number) => {
+          const text = child.text
+
+          // Match bold text pattern **text**
+          const boldMatches = [...text.matchAll(/(\*\*.*?\*\*)/g)] // Find bold patterns
+          boldMatches.forEach((match) => {
+            const startOffset = match.index + 2 || 0
+            const length = match[0].length - 4
+
+            ranges.push({
+              anchor: { path: [...path, childIndex], offset: startOffset },
+              focus: {
+                path: [...path, childIndex],
+                offset: startOffset + length,
+              },
+              format: 'bold',
+              className: 'font-bold',
+            })
+          })
+        })
+      }
+
+      if (Editor.isBlock(editor, node) && node.type === 'code') {
+        node.children.forEach((child: { text: any }, childIndex: number) => {
+          const text = child.text
+
+          // Match code block start and end
+          const startMatch = text.match(/^```(\w*)$/)
+          const endMatch = text.match(/^```$/)
+          const inlineMatch = text.match(/^`([^`]+)`$/) // Match inline code
+
+          if (startMatch) {
+            // If it's the start of a code block, store the language
+            currentLanguage.current = startMatch[1] || 'plaintext'
+          } else if (endMatch) {
+            // Reset language when code block ends
+            currentLanguage.current = 'plaintext'
+          } else if (inlineMatch) {
+            // Apply syntax highlighting to inline code
+            const codeContent = inlineMatch[1] // Get the content within the backticks
+            try {
+              hljs.highlight(codeContent, {
+                language:
+                  currentLanguage.current.length > 1
+                    ? currentLanguage.current
+                    : 'plaintext',
+              }).value
+            } catch (err) {
+              hljs.highlight(codeContent, {
+                language: 'javascript',
+              }).value
+            }
+
+            // Calculate the range for the inline code
+            const length = codeContent.length
+            ranges.push({
+              anchor: {
+                path: [...path, childIndex],
+                offset: inlineMatch.index + 1,
+              },
+              focus: {
+                path: [...path, childIndex],
+                offset: inlineMatch.index + 1 + length,
+              },
+              type: 'code',
+              code: true,
+              language: currentLanguage.current,
+              className: '', // Specify class name if needed
+            })
+          } else if (currentLanguage.current !== 'plaintext') {
+            // Highlight entire code line if in a code block
+            const leadingSpaces = text.match(/^\s*/)?.[0] ?? '' // Capture leading spaces
+            const codeContent = text.trimStart() // Remove leading spaces for highlighting
+
+            let highlighted = ''
+            highlighted = hljs.highlightAuto(codeContent).value
+            try {
+              highlighted = hljs.highlight(codeContent, {
+                language:
+                  currentLanguage.current.length > 1
+                    ? currentLanguage.current
+                    : 'plaintext',
+              }).value
+            } catch (err) {
+              highlighted = hljs.highlight(codeContent, {
+                language: 'javascript',
+              }).value
+            }
+
+            const parser = new DOMParser()
+            const doc = parser.parseFromString(highlighted, 'text/html')
+
+            let slateTextIndex = 0
+
+            // Adjust to include leading spaces in the ranges and preserve formatting
+            ranges.push({
+              anchor: { path: [...path, childIndex], offset: 0 },
+              focus: {
+                path: [...path, childIndex],
+                offset: leadingSpaces.length,
+              },
+              type: 'code',
+              code: true,
+              language: currentLanguage.current,
+              className: '', // No class for leading spaces
+            })
+
+            doc.body.childNodes.forEach((childNode) => {
+              const childText = childNode.textContent || ''
+              const length = childText.length
+              const className =
+                childNode.nodeType === Node.ELEMENT_NODE
+                  ? (childNode as HTMLElement).className
+                  : ''
+
+              ranges.push({
+                anchor: {
+                  path: [...path, childIndex],
+                  offset: slateTextIndex + leadingSpaces.length,
+                },
+                focus: {
+                  path: [...path, childIndex],
+                  offset: slateTextIndex + leadingSpaces.length + length,
+                },
+                type: 'code',
+                code: true,
+                language: currentLanguage.current,
+                className,
+              })
+
+              slateTextIndex += length
+            })
+          } else {
+            ranges.push({
+              anchor: { path: [...path, childIndex], offset: 0 },
+              focus: { path: [...path, childIndex], offset: text.length },
+              type: 'paragraph', // Treat as a paragraph
+              code: false,
+            })
+          }
+        })
+      }
+
+      return ranges
+    },
+    [editor]
+  )
+
+  // RenderLeaf applies the decoration styles
+  const renderLeaf = useCallback(
+    ({ attributes, children, leaf }: RenderLeafProps) => {
+      if (leaf.format === 'italic') {
+        return (
+          <i className={leaf.className} {...attributes}>
+            {children}
+          </i>
+        )
+      }
+      if (leaf.format === 'bold') {
+        return (
+          <strong className={leaf.className} {...attributes}>
+            {children}
+          </strong>
+        )
+      }
+      if (leaf.code) {
+        // Apply syntax highlighting to code blocks
+        return (
+          <code className={leaf.className} {...attributes}>
+            {children}
+          </code>
+        )
+      }
+
+      return <span {...attributes}>{children}</span>
+    },
+    []
+  )
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.focus()
+    }
+  }, [activeThreadId])
+
+  useEffect(() => {
+    if (textareaRef.current?.clientHeight) {
+      textareaRef.current.style.height = activeSettingInputBox
+        ? '100px'
+        : '40px'
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'
+      textareaRef.current.style.overflow =
+        textareaRef.current.clientHeight >= 390 ? 'auto' : 'hidden'
+    }
+  }, [textareaRef.current?.clientHeight, currentPrompt, activeSettingInputBox])
+
+  const onStopInferenceClick = async () => {
+    stopInference()
+  }
+
+  const resetEditor = useCallback(() => {
+    Transforms.delete(editor, {
+      at: {
+        anchor: Editor.start(editor, []),
+        focus: Editor.end(editor, []),
+      },
+    })
+
+    // Adjust the height of the textarea to its initial state
+    if (textareaRef.current) {
+      textareaRef.current.style.height = '40px' // Reset to the initial height or your desired height
+      textareaRef.current.style.overflow = 'hidden' // Reset overflow style
+    }
+
+    // Ensure the editor re-renders decorations
+    editor.onChange()
+  }, [editor])
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault()
+        if (messages[messages.length - 1]?.status !== MessageStatus.Pending) {
+          sendChatMessage(currentPrompt)
+          resetEditor()
+        } else onStopInferenceClick()
+      }
+
+      if (event.key === '`') {
+        // Determine whether any of the currently selected blocks are code blocks.
+        const [match] = Editor.nodes(editor, {
+          match: (n) =>
+            Element.isElement(n) && (n as CustomElement).type === 'code',
+        })
+        // Toggle the block type dependsing on whether there's already a match.
+        Transforms.setNodes(
+          editor,
+          { type: match ? 'paragraph' : 'code' },
+          { match: (n) => Element.isElement(n) && Editor.isBlock(editor, n) }
+        )
+      }
+
+      if (event.key === 'Tab') {
+        const [match] = Editor.nodes(editor, {
+          match: (n) => {
+            return (n as CustomElement).type === 'code'
+          },
+          mode: 'lowest',
+        })
+
+        if (match) {
+          event.preventDefault()
+          // Insert a tab character
+          Editor.insertText(editor, '  ') // Insert 2 spaces
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentPrompt, editor, messages]
+  )
+
+  return (
+    <Slate
+      editor={editor}
+      initialValue={initialValue}
+      onChange={(value) => {
+        const combinedText = value
+          .map((block) => {
+            if ('children' in block) {
+              return block.children.map((child) => child.text).join('')
+            }
+            return ''
+          })
+          .join('\n')
+
+        setCurrentPrompt(combinedText)
+      }}
+    >
+      <Editable
+        ref={textareaRef}
+        decorate={decorate} // Pass the decorate function
+        renderLeaf={renderLeaf} // Pass the renderLeaf function
+        onKeyDown={handleKeyDown}
+        className={twMerge(
+          className,
+          disabled &&
+            'cursor-not-allowed border-none bg-[hsla(var(--disabled-bg))] text-[hsla(var(--disabled-fg))]'
+        )}
+        placeholder={placeholder}
+        style={style}
+        disabled={disabled}
+        readOnly={disabled}
+        spellCheck={spellCheck}
+      />
+    </Slate>
+  )
+}
+
+export default RichTextEditor
diff --git a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
index a7c5ad1216..83a68fa8a9 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
@@ -29,6 +29,8 @@ import { isLocalEngine } from '@/utils/modelEngine'
 import FileUploadPreview from '../FileUploadPreview'
 import ImageUploadPreview from '../ImageUploadPreview'
 
+import RichTextEditor from './RichTextEditor'
+
 import { showRightPanelAtom } from '@/helpers/atoms/App.atom'
 import { experimentalFeatureEnabledAtom } from '@/helpers/atoms/AppConfig.atom'
 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
@@ -40,7 +42,6 @@ import {
   getActiveThreadIdAtom,
   isGeneratingResponseAtom,
   threadStatesAtom,
-  waitingToSendMessage,
 } from '@/helpers/atoms/Thread.atom'
 import { activeTabThreadRightPanelAtom } from '@/helpers/atoms/ThreadRightPanel.atom'
 
@@ -48,7 +49,6 @@ const ChatInput = () => {
   const activeThread = useAtomValue(activeThreadAtom)
   const { stateModel } = useActiveModel()
   const messages = useAtomValue(getCurrentChatMessagesAtom)
-  // const [activeSetting, setActiveSetting] = useState(false)
   const spellCheck = useAtomValue(spellCheckAtom)
 
   const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom)
@@ -59,7 +59,6 @@ const ChatInput = () => {
   const selectedModel = useAtomValue(selectedModelAtom)
 
   const activeThreadId = useAtomValue(getActiveThreadIdAtom)
-  const [isWaitingToSend, setIsWaitingToSend] = useAtom(waitingToSendMessage)
   const [fileUpload, setFileUpload] = useAtom(fileUploadAtom)
   const [showAttacmentMenus, setShowAttacmentMenus] = useState(false)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
@@ -78,52 +77,15 @@ const ChatInput = () => {
     (threadState) => threadState.waitingForResponse
   )
 
-  const onPromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setCurrentPrompt(e.target.value)
-  }
-
   const refAttachmentMenus = useClickOutside(() => setShowAttacmentMenus(false))
   const [showRightPanel, setShowRightPanel] = useAtom(showRightPanelAtom)
 
-  useEffect(() => {
-    if (isWaitingToSend && activeThreadId) {
-      setIsWaitingToSend(false)
-      sendChatMessage(currentPrompt)
-    }
-  }, [
-    activeThreadId,
-    isWaitingToSend,
-    currentPrompt,
-    setIsWaitingToSend,
-    sendChatMessage,
-  ])
-
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.focus()
     }
   }, [activeThreadId])
 
-  useEffect(() => {
-    if (textareaRef.current?.clientHeight) {
-      textareaRef.current.style.height = activeSettingInputBox
-        ? '100px'
-        : '40px'
-      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'
-      textareaRef.current.style.overflow =
-        textareaRef.current.clientHeight >= 390 ? 'auto' : 'hidden'
-    }
-  }, [textareaRef.current?.clientHeight, currentPrompt, activeSettingInputBox])
-
-  const onKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
-      e.preventDefault()
-      if (messages[messages.length - 1]?.status !== MessageStatus.Pending)
-        sendChatMessage(currentPrompt)
-      else onStopInferenceClick()
-    }
-  }
-
   const onStopInferenceClick = async () => {
     stopInference()
   }
@@ -163,22 +125,25 @@ const ChatInput = () => {
     <div className="relative p-4 pb-2">
       <div className="relative flex w-full flex-col">
         {renderPreview(fileUpload)}
-        <TextArea
+
+        <RichTextEditor
           className={twMerge(
-            'relative max-h-[400px] resize-none  pr-20',
+            'relative mb-1 max-h-[400px] resize-none rounded-lg border border-[hsla(var(--app-border))] p-3 pr-20',
+            'focus-within:outline-none focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-[hsla(var(--primary-bg))] focus-visible:ring-offset-0',
+            'overflow-y-auto',
             fileUpload.length && 'rounded-t-none',
             experimentalFeature && 'pl-10',
             activeSettingInputBox && 'pb-14 pr-16'
           )}
           spellCheck={spellCheck}
-          data-testid="txt-input-chat"
-          style={{ height: activeSettingInputBox ? '100px' : '40px' }}
-          ref={textareaRef}
-          onKeyDown={onKeyDown}
+          style={{ height: activeSettingInputBox ? '98px' : '44px' }}
           placeholder="Ask me anything"
           disabled={stateModel.loading || !activeThread}
-          value={currentPrompt}
-          onChange={onPromptChange}
+        />
+        <TextArea
+          className="absolute inset-0 top-14 h-0 w-0"
+          data-testid="txt-input-chat"
+          onChange={(e) => setCurrentPrompt(e.target.value)}
         />
         {experimentalFeature && (
           <Tooltip
@@ -437,30 +402,6 @@ const ChatInput = () => {
                   className="flex-shrink-0 cursor-pointer text-[hsla(var(--text-secondary))]"
                 />
               </Badge>
-              {/* Temporary disable it */}
-              {/* {experimentalFeature && (
-                <Badge
-                  className="flex cursor-pointer items-center gap-x-1"
-                  theme="secondary"
-                  variant={
-                    activeTabThreadRightPanel === 'tools' ? 'solid' : 'outline'
-                  }
-                  onClick={() => {
-                    setActiveTabThreadRightPanel('tools')
-                    if (matches) {
-                      setShowRightPanel(!showRightPanel)
-                    } else if (!showRightPanel) {
-                      setShowRightPanel(true)
-                    }
-                  }}
-                >
-                  <ShapesIcon
-                    size={16}
-                    className="flex-shrink-0 text-[hsla(var(--text-secondary))]"
-                  />
-                  <span>Tools</span>
-                </Badge>
-              )} */}
             </div>
             <Button
               theme="icon"
diff --git a/web/screens/Thread/ThreadCenterPanel/EditChatInput/index.tsx b/web/screens/Thread/ThreadCenterPanel/EditChatInput/index.tsx
index dbc1b9f1dc..8b57a54b96 100644
--- a/web/screens/Thread/ThreadCenterPanel/EditChatInput/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/EditChatInput/index.tsx
@@ -30,7 +30,6 @@ import { spellCheckAtom } from '@/helpers/atoms/Setting.atom'
 import {
   activeThreadAtom,
   getActiveThreadIdAtom,
-  waitingToSendMessage,
 } from '@/helpers/atoms/Thread.atom'
 
 type Props = {
@@ -47,7 +46,6 @@ const EditChatInput: React.FC<Props> = ({ message }) => {
   const setMessages = useSetAtom(setConvoMessagesAtom)
   const activeThreadId = useAtomValue(getActiveThreadIdAtom)
   const spellCheck = useAtomValue(spellCheckAtom)
-  const [isWaitingToSend, setIsWaitingToSend] = useAtom(waitingToSendMessage)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const setEditMessage = useSetAtom(editMessageAtom)
   const [showDialog, setshowDialog] = useState(false)
@@ -56,19 +54,6 @@ const EditChatInput: React.FC<Props> = ({ message }) => {
     setEditPrompt(e.target.value)
   }
 
-  useEffect(() => {
-    if (isWaitingToSend && activeThreadId) {
-      setIsWaitingToSend(false)
-      sendChatMessage(editPrompt)
-    }
-  }, [
-    activeThreadId,
-    isWaitingToSend,
-    editPrompt,
-    setIsWaitingToSend,
-    sendChatMessage,
-  ])
-
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.focus()
diff --git a/web/screens/Thread/ThreadCenterPanel/SimpleTextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/SimpleTextMessage/index.tsx
index da10300dc6..febb63e782 100644
--- a/web/screens/Thread/ThreadCenterPanel/SimpleTextMessage/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/SimpleTextMessage/index.tsx
@@ -67,7 +67,7 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
       langPrefix: 'hljs',
       highlight(code, lang) {
         if (lang === undefined || lang === '') {
-          return hljs.highlightAuto(code).value
+          return hljs.highlight(code, { language: 'plaintext' }).value
         }
         try {
           return hljs.highlight(code, { language: lang }).value
@@ -276,32 +276,18 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
             </div>
           )}
 
-          {isUser ? (
-            <>
-              {editMessage === props.id ? (
-                <div>
-                  <EditChatInput message={props} />
-                </div>
-              ) : (
-                <div
-                  className={twMerge(
-                    'message flex flex-col gap-y-2 leading-relaxed',
-                    isUser ? 'whitespace-pre-wrap break-words' : 'p-4'
-                  )}
-                >
-                  {text}
-                </div>
-              )}
-            </>
-          ) : (
-            <div
-              className={twMerge(
-                'message max-width-[100%] flex flex-col gap-y-2 overflow-auto leading-relaxed',
-                isUser && 'whitespace-pre-wrap break-words'
-              )}
-              dangerouslySetInnerHTML={{ __html: parsedText }}
-            />
+          {editMessage === props.id && (
+            <div>
+              <EditChatInput message={props} />
+            </div>
           )}
+
+          <div
+            className={twMerge(
+              'message max-width-[100%] flex flex-col gap-y-2 overflow-auto leading-relaxed'
+            )}
+            dangerouslySetInnerHTML={{ __html: parsedText }}
+          />
         </>
       </div>
     </div>