feat: support markdown on user message (#3848)
* feat: enable render markdown for user message * wip: slate * style: update style rich text editor * chore: finalize richText editor * chore: fix model dropdown selector * chore: fix change format file syntax highlight * chore: fix missing element during the test * fix: adjust onPrompChange include on fake textarea
This commit is contained in:
Faisal Amir
GitHub
parent
b14f54e866
commit
9867634b5a
@ -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"
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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
|
||||
@ -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"
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user