diff --git a/src/views/home/components/Input.vue b/src/views/home/components/Input.vue
index 6a55191..3848b7f 100644
--- a/src/views/home/components/Input.vue
+++ b/src/views/home/components/Input.vue
@@ -2,249 +2,79 @@
-
-
+
+
diff --git a/src/views/home/components/input/InputEditor.vue b/src/views/home/components/input/InputEditor.vue
new file mode 100644
index 0000000..6cfc18a
--- /dev/null
+++ b/src/views/home/components/input/InputEditor.vue
@@ -0,0 +1,231 @@
+
+
+
+ {{ placeholder }}
+
+
+
+
+
![]()
+
+
+
+
+
+
+ {{ label }}
+
+
+
+
+
+
diff --git a/src/views/home/components/input/SettingPopover.vue b/src/views/home/components/input/SettingPopover.vue
new file mode 100644
index 0000000..c687ac7
--- /dev/null
+++ b/src/views/home/components/input/SettingPopover.vue
@@ -0,0 +1,160 @@
+
+
+
+ 
+
+
+
+
+
+
{{ translate(item.label) }}
+
+
+ {{ item.value }}%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
{{ item.label }}
+
+
+
+
+
+
'
+ const hasMeaningfulChildren = Array.from(editor.children).some(
+ (child) => child.tagName !== 'BR' && !child.classList.contains('editor-tag')
+ )
+
+ return textContent === '' && !hasMeaningfulChildren && isEmptyHTML
+ })
+
+ const addReportTag = (text?: string) => {
+ const tagText = text || options.t('Input.trendingReport')
+
+ const tag = document.createElement('div')
+ tag.contentEditable = 'false'
+ const imgLeft = document.createElement('img')
+ const imgClose = document.createElement('img')
+ const textSpan = document.createElement('span')
+ imgClose.className = 'close-icon'
+ if (text) {
+ tag.className = 'editor-tag restore flex-center'
+ imgLeft.className = 'restore-icon'
+ imgLeft.src = restoreIcon as unknown as string
+ imgClose.src = restoreCloseIcon as unknown as string
+ imgClose.className = 'close-icon restore'
+ textSpan.className = 'restore-text'
+ } else {
+ tag.className = 'editor-tag report-btn flex-center'
+ imgLeft.className = 'light-icon'
+ imgLeft.src = lightIcon as unknown as string
+ imgClose.src = closeIcon as unknown as string
+ }
+
+ textSpan.innerText = tagText
+
+ imgClose.addEventListener('click', (ev) => {
+ ev.stopPropagation()
+ removeReportPromptText()
+ tag.remove()
+ const idx = reportTags.value.indexOf(tag)
+ if (idx > -1) reportTags.value.splice(idx, 1)
+ handleEditorInput()
+ })
+
+ tag.appendChild(imgLeft)
+ tag.appendChild(textSpan)
+ tag.appendChild(imgClose)
+
+ const selection = window.getSelection()
+ const isInEditor =
+ editorRef.value && selection && editorRef.value.contains(selection.anchorNode)
+
+ if (isInEditor && selection && selection.rangeCount > 0) {
+ const range = selection.getRangeAt(0)
+ range.insertNode(tag)
+ focusEditor()
+ } else if (editorRef.value) {
+ editorRef.value.appendChild(tag)
+ focusEditor()
+ }
+
+ reportTags.value.push(tag)
+ const promptText = document.createTextNode('')
+ if (tag.parentNode) {
+ tag.parentNode.insertBefore(promptText, tag.nextSibling)
+ const zwsp = document.createTextNode('\u200B')
+ tag.parentNode.insertBefore(zwsp, promptText.nextSibling)
+ const newRange = document.createRange()
+ newRange.setStart(promptText, promptText.data.length)
+ newRange.collapse(true)
+ const currentSelection = window.getSelection()
+ currentSelection?.removeAllRanges()
+ currentSelection?.addRange(newRange)
+ }
+ reportPromptText.value = promptText
+ typeReportPromptText(promptText, options.t('Input.reportPlaceholder'))
+ }
+
+ const toggleReportTag = (clear = false) => {
+ const shouldClear = clear === true
+ reportTags.value = reportTags.value.filter((tag) => tag.parentNode !== null)
+
+ if (shouldClear) {
+ removeReportPromptText()
+ reportTags.value.forEach((tag) => {
+ tag.remove()
+ })
+ reportTags.value = []
+ return
+ }
+
+ if (reportTags.value.length > 0) {
+ removeReportPromptText()
+ reportTags.value.forEach((tag) => {
+ if (
+ tag.nextSibling &&
+ tag.nextSibling.nodeType === Node.TEXT_NODE &&
+ tag.nextSibling.textContent === '\u200B'
+ ) {
+ tag.nextSibling.remove()
+ }
+ tag.remove()
+ })
+ reportTags.value = []
+ handleEditorInput()
+ } else {
+ addReportTag()
+ }
+ }
+
+ const cleanupEditor = () => {
+ if (!editorRef.value) return
+
+ const editor = editorRef.value
+
+ if (editor.textContent) {
+ const cleanedText = editor.textContent.replace(/[\u200B-\u200D\uFEFF]/g, '')
+
+ if (!cleanedText.trim() && editor.children.length === 0) {
+ editor.innerHTML = ''
+ editor.textContent = ''
+ reportTags.value = []
+ removeAllOptionTags()
+ stopReportTypewriter()
+ reportPromptText.value = null
+ }
+ }
+ }
+
+ const autoResizeEditor = () => {
+ if (options.isAgentMode.value) return
+ }
+
+ const handleEditorInput = () => {
+ if (!editorRef.value) return
+
+ let text = ''
+ const walker = document.createTreeWalker(editorRef.value, NodeFilter.SHOW_TEXT, null)
+
+ let node: Node | null
+ while ((node = walker.nextNode())) {
+ if (node.parentElement?.closest('.editor-tag')) continue
+ text += node.textContent
+ }
+
+ text = text.replace(/[\s\u200B]+$/, '')
+ inputValue.value = text
+
+ const editor = editorRef.value
+ const hasChildElements = editor.children.length > 0
+ const hasTextContent = editor.textContent?.replace(/[\s\u200B]/g, '').trim().length > 0
+
+ if (!hasChildElements && !hasTextContent) {
+ editor.innerHTML = ''
+ reportTags.value = []
+ removeAllOptionTags()
+ stopReportTypewriter()
+ reportPromptText.value = null
+ }
+
+ autoResizeEditor()
+ }
+
+ const handleEditorPaste = (e: ClipboardEvent) => {
+ e.preventDefault()
+ const text = e.clipboardData?.getData('text/plain') || ''
+ document.execCommand('insertText', false, text)
+ }
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ e.preventDefault()
+ options.onSubmit()
+ return
+ }
+ if (e.key !== 'Backspace') return
+
+ const selection = window.getSelection()
+ if (!selection || selection.rangeCount <= 0) return
+
+ const range = selection.getRangeAt(0)
+ if (!range.collapsed) return
+
+ let nodeToDelete: Node | null = null
+ const startContainer = range.startContainer
+ const startOffset = range.startOffset
+
+ if (startContainer.nodeType === Node.TEXT_NODE) {
+ const textNode = startContainer as Text
+ if (startOffset === textNode.length) {
+ nodeToDelete = textNode.nextSibling
+ }
+ } else if (startContainer.nodeType === Node.ELEMENT_NODE) {
+ nodeToDelete = startContainer.childNodes[startOffset]
+ }
+
+ if (
+ nodeToDelete &&
+ nodeToDelete.nodeType === Node.ELEMENT_NODE &&
+ (nodeToDelete as Element).classList
+ ) {
+ const element = nodeToDelete as Element
+ const isEditorTag = element.classList.contains('editor-tag')
+ const isReportTag = element.classList.contains('report-tag')
+ const optionTagKind = (element as HTMLElement).dataset.optionTagKind as OptionTagKind
+
+ if (optionTagKind) {
+ e.preventDefault()
+ clearOptionTagValue(optionTagKind)
+ nextTick(() => {
+ cleanupEditor()
+ handleEditorInput()
+ })
+ return
+ }
+
+ if (isEditorTag || isReportTag) {
+ e.preventDefault()
+ if (reportTags.value.includes(element as HTMLElement)) {
+ removeReportPromptText()
+ }
+ element.remove()
+
+ const index = reportTags.value.indexOf(nodeToDelete as HTMLElement)
+ if (index > -1) {
+ reportTags.value.splice(index, 1)
+ }
+
+ nextTick(() => {
+ cleanupEditor()
+ handleEditorInput()
+ })
+ return
+ }
+ }
+
+ nextTick(() => {
+ if (editorRef.value) {
+ const text = editorRef.value.textContent || ''
+ const cleanedText = text.replace(/[\u200B-\u200D\uFEFF]/g, '')
+
+ if (editorRef.value.innerHTML === '
' || !cleanedText.trim()) {
+ editorRef.value.innerHTML = ''
+ if (editorRef.value.children.length === 0) {
+ reportTags.value = []
+ reportPromptText.value = null
+ }
+ }
+ handleEditorInput()
+ }
+ })
+ }
+
+ const clearEditorText = () => {
+ if (editorRef.value) {
+ editorRef.value.innerHTML = ''
+ }
+ inputValue.value = ''
+ }
+
+ const resetOptionTags = () => {
+ optionTags.value = {}
+ }
+
+ return {
+ editorRef,
+ inputValue,
+ reportTags,
+ showPlaceholder,
+ setEditorElement,
+ focusEditor,
+ stopReportTypewriter,
+ addReportTag,
+ toggleReportTag,
+ handleEditorInput,
+ handleEditorPaste,
+ handleKeyDown,
+ autoResizeEditor,
+ syncOptionTag,
+ syncAllOptionTags,
+ clearEditorText,
+ resetOptionTags
+ }
+}
diff --git a/src/views/home/components/input/useInputImages.ts b/src/views/home/components/input/useInputImages.ts
new file mode 100644
index 0000000..58abbe7
--- /dev/null
+++ b/src/views/home/components/input/useInputImages.ts
@@ -0,0 +1,78 @@
+import { nextTick, ref } from 'vue'
+import { uploadImage } from '@/api/upload'
+import type { PreviewImage, UploadedImage } from './types'
+
+export function useInputImages(focusEditor: () => void) {
+ const uploadedImages = ref([])
+ const quoteList = ref([])
+ const showPreview = ref(false)
+ const previewUrl = ref('')
+
+ const handleFileChange = (event: Event) => {
+ const input = event.target as HTMLInputElement
+
+ if (input.files) {
+ Array.from(input.files).forEach((file) => {
+ if (file.type.startsWith('image/')) {
+ const formData = new FormData()
+ formData.append('file', file)
+
+ uploadImage(formData).then((res) => {
+ const reader = new FileReader()
+ reader.onload = (e) => {
+ uploadedImages.value.push({
+ url: e.target?.result as string,
+ name: file.name,
+ path: res
+ })
+ }
+ reader.readAsDataURL(file)
+ })
+ }
+ })
+ }
+
+ nextTick(focusEditor)
+ input.value = ''
+ }
+
+ const removeImage = (index: number, item: PreviewImage) => {
+ if (typeof item === 'string') {
+ const quoteIndex = quoteList.value.indexOf(item)
+ if (quoteIndex > -1) {
+ quoteList.value.splice(quoteIndex, 1)
+ }
+ return
+ }
+
+ uploadedImages.value.splice(index, 1)
+ }
+
+ const previewImage = (url: string) => {
+ showPreview.value = true
+ previewUrl.value = url
+ }
+
+ const handleQuote = (url: string) => {
+ const hasQuoted = quoteList.value.includes(url)
+ if (hasQuoted) return
+ quoteList.value[0] = url
+ }
+
+ const clearImages = () => {
+ uploadedImages.value = []
+ quoteList.value = []
+ }
+
+ return {
+ uploadedImages,
+ quoteList,
+ showPreview,
+ previewUrl,
+ handleFileChange,
+ removeImage,
+ previewImage,
+ handleQuote,
+ clearImages
+ }
+}
- Upload files
- 
- {{ $t('Input.createProject') }}
- 
-
-