mirror of https://github.com/buster-so/buster.git
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import { useUpdateChat } from '@/api/buster_rest/chats';
|
|
import { EditableTitle } from '@/components/ui/typography/EditableTitle';
|
|
|
|
const animation = {
|
|
initial: { opacity: 0 },
|
|
animate: { opacity: 1 },
|
|
exit: { opacity: 0 },
|
|
transition: { duration: 0.25 }
|
|
};
|
|
|
|
export const CHAT_HEADER_TITLE_ID = 'chat-header-title';
|
|
|
|
export const ChatHeaderTitle: React.FC<{
|
|
chatTitle: string;
|
|
chatId: string;
|
|
isCompletedStream: boolean;
|
|
}> = React.memo(({ chatTitle, chatId }) => {
|
|
const { mutateAsync: updateChat } = useUpdateChat();
|
|
|
|
if (!chatTitle) return <div></div>;
|
|
|
|
return (
|
|
<AnimatePresence mode="wait" initial={false}>
|
|
<motion.div
|
|
{...animation}
|
|
key={chatTitle}
|
|
className="flex w-full items-center overflow-hidden">
|
|
<EditableTitle
|
|
className="w-full"
|
|
id={CHAT_HEADER_TITLE_ID}
|
|
onChange={(value) => updateChat({ id: chatId, title: value })}>
|
|
{chatTitle}
|
|
</EditableTitle>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
);
|
|
});
|
|
|
|
ChatHeaderTitle.displayName = 'ChatHeaderTitle';
|