Function ChatTopbar

frontend/src/components/chat/chat-topbar.tsx:37–140

({
  currentChatId,
  onChatSelect,
  onNewChat,
}: ChatTopbarProps)

interface ChatTopbarProps {
  chatId?: string;
  /** Lets the page drop its local messages after a server-side clear. */
  onHistoryCleared?: () => void;
}

/**
 * Header for the chat column: the way back to your projects, the title, and
 * the chat's own management. With the sidebar gone this bar is where rename,
 * clear and delete live.
 */
export default function ChatTopbar({
  chatId,
  onHistoryCleared,
}: ChatTopbarProps) {
  const router = useRouter();
  const { chats, refetchChats } = useChatList();
  const [renaming, setRenaming] = useState(false);
  const [draft, setDraft] = useState('');
  const [confirmDelete, setConfirmDelete] = useState(false);

  const title = chatId
    ? chats.find((c) => c.id === chatId)?.title || 'Untitled'
    : 'New Chat';

  // The browser tab should say which project this is, not just "Codefox" —
  // with several projects open, identical tabs are unfindable.
  useEffect(() => {
    document.title = `${title} — CodeFox`;
    return () => {
      document.title = 'CodeFox';
    };
  }, [title]);

  const [updateTitle] = useMutation(UPDATE_CHAT_TITLE, {
    onCompleted: () => refetchChats(),
    onError: () => toast.error('Could not rename the chat'),
  });
  const [clearHistory] = useMutation(CLEAR_CHAT_HISTORY, {
    onCompleted: () => {
      onHistoryCleared?.();
      toast.success('History cleared');
    },
    onError: () => toast.error('Could not clear the history'),
  });
  const [deleteChat] = useMutation(DELETE_CHAT, {
    onCompleted: () => {
      toast.success('Chat deleted');
      router.push('/');
    },
    onError: () => toast.error('Could not delete the chat'),
  });

  const commitRename = () => {
    setRenaming(false);
    const next = draft.trim();
    if (!next || next === title || !chatId) return;
    updateTitle({ variables: { input: { chatId, title: next } } });
  };