Skip to content

S
sdream-ai-fe
Commit 55979b51 by Liu
Options

fix：工具按钮展示逻辑

parent 33e12ad8
Showing with 72 additions and 66 deletions
src/components/ChatEditor/index.tsx
......@@ -7,6 +7,10 @@ import type { RootState } from '@/store'
import SendIcon from '@/assets/svg/send.svg?react'
import { type WithAuthProps, withAuth } from '@/auth/withAuth'
import { useAppSelector } from '@/store/hook'
import { fetchToolList } from '@/api/home'
import dataIcon from '@/assets/data-icon.png'
import efficiencyIcon from '@/assets/efficiency-icon.png'
import generalIcon from '@/assets/general-icon.png'
interface ChatEditorProps {
onChange?: (value: string) => void
......@@ -18,7 +22,7 @@ interface ChatEditorProps {
initialValue?: string
}
// onToolClick
const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, onChange, onFocus, onSubmit, placeholders, showContentTips = false, initialValue = '' }) => {
const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, onChange, onFocus, onSubmit, onToolClick, placeholders, showContentTips = false, initialValue = '' }) => {
// const dispatch = useAppDispatch()
const [content, setContent] = useState(initialValue)
const editorRef = useRef<HTMLDivElement>(null)
......@@ -26,22 +30,22 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
const intervalRef = useRef<NodeJS.Timeout | null>(null)
const [isOpenLoginModal, isOpenLoginModalActions] = useToggle()
const isAsking = useAppSelector((state: RootState) => state.chat.isAsking)
// const [toolList, setToolList] = useState<any[]>([])
// const [selectedToolId, setSelectedToolId] = useState<string | null>(null)
// const [isToolBtnActive, setIsToolBtnActive] = useState<boolean>(true)
const [toolList, setToolList] = useState<any[]>([])
const [selectedToolId, setSelectedToolId] = useState<string | null>(null)
const [isToolBtnActive, setIsToolBtnActive] = useState<boolean>(true)
// 获取工具列表
// const getToolList = async () => {
// try {
// const res = await fetchToolList()
// if (res?.data) {
// setToolList(res.data)
// }
// }
// catch (error) {
// console.error('获取工具列表失败:', error)
// }
// }
const getToolList = async () => {
try {
const res = await fetchToolList()
if (res?.data) {
setToolList(res.data)
}
}
catch (error) {
console.error('获取工具列表失败:', error)
}
}
const startAnimation = () => {
intervalRef.current = setInterval(() => {
......@@ -74,18 +78,18 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
// 只在提质增效模式下传递 toolId，通用模式不传
let toolId: string | undefined
// if (!isToolBtnActive && selectedToolId) {
// // 提质增效模式：使用选中的 toolId
// toolId = selectedToolId
// // eslint-disable-next-line no-console
// console.log('📤 [ChatEditor] 提质增效模式提交，toolId:', toolId)
// }
// else {
// // 通用模式：不传递 toolId
// toolId = undefined
// // eslint-disable-next-line no-console
// console.log('📤 [ChatEditor] 通用模式提交，不传递 toolId')
// }
if (!isToolBtnActive && selectedToolId) {
// 提质增效模式：使用选中的 toolId
toolId = selectedToolId
// eslint-disable-next-line no-console
console.log('📤 [ChatEditor] 提质增效模式提交，toolId:', toolId)
}
else {
// 通用模式：不传递 toolId
toolId = undefined
// eslint-disable-next-line no-console
console.log('📤 [ChatEditor] 通用模式提交，不传递 toolId')
}
onSubmit?.(content.trim(), toolId)
setContent('')
if (editorRef.current) {
......@@ -114,36 +118,36 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
}
// 处理提质增效按钮点击
// const handleEfficiencyClick = () => {
// // 查找"提质增效"工具
// const efficiencyTool = toolList.find((tool: any) => tool.toolName === '提质增效')
// let currentToolId = null
// if (efficiencyTool) {
// setSelectedToolId(efficiencyTool.toolId)
// currentToolId = efficiencyTool.toolId
// }
// else {
// // 如果没有找到"提质增效"工具，使用第一个工具
// if (toolList.length > 0) {
// setSelectedToolId(toolList[0].toolId)
// currentToolId = toolList[0].toolId
// }
// }
// // 切换到工具模式（false 表示工具模式，会切换左侧展示）
// setIsToolBtnActive(false)
// // 调用父组件的回调函数，传递工具模式状态和工具ID，以及是否需要改变样式
// onToolClick?.(false, currentToolId, true)
// }
const handleEfficiencyClick = () => {
// 查找"提质增效"工具
const efficiencyTool = toolList.find((tool: any) => tool.toolName === '提质增效')
let currentToolId = null
if (efficiencyTool) {
setSelectedToolId(efficiencyTool.toolId)
currentToolId = efficiencyTool.toolId
}
else {
// 如果没有找到"提质增效"工具，使用第一个工具
if (toolList.length > 0) {
setSelectedToolId(toolList[0].toolId)
currentToolId = toolList[0].toolId
}
}
// 切换到工具模式（false 表示工具模式，会切换左侧展示）
setIsToolBtnActive(false)
// 调用父组件的回调函数，传递工具模式状态和工具ID，以及是否需要改变样式
onToolClick?.(false, currentToolId, true)
}
// 处理通用模式按钮点击
// const handleGeneralClick = () => {
// // 切换到通用模式（true 表示通用模式，恢复默认不切换左侧）
// setIsToolBtnActive(true)
// // 清除选中的工具ID
// setSelectedToolId(null)
// // 调用父组件的回调函数，传递通用模式状态和工具ID，以及是否需要改变样式
// onToolClick?.(true, undefined, false)
// }
const handleGeneralClick = () => {
// 切换到通用模式（true 表示通用模式，恢复默认不切换左侧）
setIsToolBtnActive(true)
// 清除选中的工具ID
setSelectedToolId(null)
// 调用父组件的回调函数，传递通用模式状态和工具ID，以及是否需要改变样式
onToolClick?.(true, undefined, false)
}
useEffect(() => {
startAnimation()
......@@ -161,9 +165,9 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
}, [content])
// 组件加载时获取工具列表
// useEffect(() => {
// getToolList()
// }, [])
useEffect(() => {
getToolList()
}, [])
// 处理initialValue的变化
useEffect(() => {
......@@ -191,9 +195,9 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
background: '#FFFFFF',
border: '1px solid #0a0a0a78',
boxShadow: '0 8px 12px 0 rgba(235,235,235,0.30)',
...(toolList && toolList.length > 0 ? { height: '102px' } : {}),
}}
>
{/* height: '102px', */}
<div
ref={editorRef}
contentEditable
......@@ -211,9 +215,9 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
resize: 'none',
maxHeight: '48px',
wordBreak: 'break-all',
...(toolList && toolList.length > 0 ? { marginBottom: '40px' } : {}),
}}
>
{/* marginBottom: '40px', */}
</div>
<Tooltip isOpen={Boolean(token) && showContentTips && !isAsking && !content} color="foreground" content="请输入您的问题📖" placement="top-end">
<Button className="ask-send" onPress={handleSubmit} radius="full" isDisabled={!content || isAsking} isIconOnly color="primary">
......@@ -247,16 +251,17 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
)}
</AnimatePresence>
</div>
<div className="absolute left-4 bottom-2 flex items-center gap-3 pointer-events-auto pl-[16px]">
{/* <Button
{toolList && toolList.length > 0 && (
<div className="absolute left-4 bottom-2 flex items-center gap-3 pointer-events-auto pl-[16px]">
<Button
className="w-[96px] h-[32px] px-3 rounded-full bg-white border border-[#E6E8EB] shadow-none text-[#111827] text-[12px]"
radius="full"
variant="bordered"
startContent={<img src={dataIcon} alt="数据助手" className="w-5 h-5" />}
>
数据助手
</Button> */}
{/* <Button
</Button>
<Button
className={`w-[96px] h-[32px] px-3 rounded-full shadow-none text-[12px] transition-all duration-200 ${
!isToolBtnActive
? 'bg-[#F3F7FF] border-[#F3F7FF] text-[#165DFF]'
......@@ -281,8 +286,9 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
onPress={handleGeneralClick}
>
通用模式
</Button> */}
</div>
</Button>
</div>
)}
<LoginModal onClose={handleCloseLoginModal} isOpen={isOpenLoginModal} />
</div>
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment