86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import { useStore } from '@nanostores/react';
|
|
import { TooltipProvider } from '@radix-ui/react-tooltip';
|
|
import { useEffect } from 'react';
|
|
import WithTooltip from '~/components/ui/Tooltip';
|
|
import { useEditChatDescription } from '~/lib/hooks';
|
|
import { useChatHistory } from '~/lib/hooks/useChatHistory';
|
|
import { webBuilderStore } from '~/lib/stores/web-builder';
|
|
|
|
export function ChatDescription() {
|
|
const { getChatLatestDescription } = useChatHistory();
|
|
const description = useStore(webBuilderStore.chatStore.description);
|
|
|
|
const {
|
|
editing,
|
|
handleChange,
|
|
handleBlur,
|
|
handleSubmit,
|
|
handleKeyDown,
|
|
currentDescription,
|
|
toggleEditMode,
|
|
setCurrentDescription,
|
|
updateChatDescription,
|
|
} = useEditChatDescription({
|
|
initialDescription: getChatLatestDescription() || '',
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!currentDescription && description) {
|
|
setCurrentDescription(description);
|
|
updateChatDescription(description);
|
|
}
|
|
}, [description]);
|
|
|
|
if (!currentDescription) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-center">
|
|
{editing ? (
|
|
<form onSubmit={handleSubmit} className="flex items-center justify-center">
|
|
<input
|
|
type="text"
|
|
className="bg-upage-elements-background-depth-1 text-upage-elements-textPrimary rounded px-2 py-0.5 mr-2 focus:outline-none focus:ring-1 focus:ring-upage-elements-ring"
|
|
autoFocus
|
|
value={currentDescription}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
onKeyDown={handleKeyDown}
|
|
style={{ width: `${Math.max(currentDescription?.length * 9 || 0, 180)}px` }}
|
|
/>
|
|
<TooltipProvider>
|
|
<WithTooltip tooltip="保存标题">
|
|
<div className="flex justify-between items-center p-2 rounded-md bg-upage-elements-item-backgroundAccent">
|
|
<button
|
|
type="submit"
|
|
className="i-ph:check-bold scale-110 hover:text-upage-elements-item-contentAccent"
|
|
onMouseDown={handleSubmit}
|
|
/>
|
|
</div>
|
|
</WithTooltip>
|
|
</TooltipProvider>
|
|
</form>
|
|
) : (
|
|
<>
|
|
{currentDescription}
|
|
<TooltipProvider>
|
|
<WithTooltip tooltip="重命名聊天">
|
|
<div className="flex justify-between items-center p-2 rounded-md bg-upage-elements-item-backgroundAccent ml-2">
|
|
<button
|
|
type="button"
|
|
className="i-ph:pencil-fill scale-110 hover:text-upage-elements-item-contentAccent"
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
toggleEditMode();
|
|
}}
|
|
/>
|
|
</div>
|
|
</WithTooltip>
|
|
</TooltipProvider>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|