Function FloatingMiniChat

src/web-ui/src/app/layout/FloatingMiniChat.tsx:36–365

()

import './FloatingMiniChat.scss';

export const FloatingMiniChat: React.FC = () => {
  const { t } = useTranslation('flow-chat');
  const { toolbarState } = useToolbarModeContext();
  const activeTabId = useSceneStore((state) => state.activeTabId);
  const customizingAppIds = useMiniAppStore((state) => state.customizingAppIds);

  const [isOpen, setIsOpen] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const [showSessionPicker, setShowSessionPicker] = useState(false);
  const [flowChatState, setFlowChatState] = useState<FlowChatState>(() =>
    flowChatStore.getState()
  );
  const { isImeEnter, handleCompositionStart, handleCompositionEnd } = useImeEnterGuard();
  const panelRef = useRef<HTMLDivElement>(null);
  const sessionPickerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const unsubscribe = flowChatStore.subscribe((state) => {
      setFlowChatState(state);
    });
    return () => unsubscribe();
  }, []);

  const sessionTitle = useMemo(() => {
    const activeSession = flowChatState.activeSessionId
      ? flowChatState.sessions.get(flowChatState.activeSessionId)
      : undefined;
    return resolveSessionTitle(activeSession, (key, options) => i18nService.t(key, options));
  }, [flowChatState]);

  const sessions = useMemo(() => {
    return Array.from(flowChatState.sessions.values())
      .sort(compareSessionsForDisplay)
      .slice(0, 10);
  }, [flowChatState]);

  const currentStreamState = useMemo(() => {
    const activeSession = flowChatState.activeSessionId
      ? flowChatState.sessions.get(flowChatState.activeSessionId)
      : undefined;

    if (!activeSession || !activeSession.dialogTurns || activeSession.dialogTurns.length === 0) {
      return { isStreaming: false };
    }

    const lastTurn = activeSession.dialogTurns[activeSession.dialogTurns.length - 1];
    const isStreaming =
      lastTurn.status === 'processing' ||
      lastTurn.status === 'finishing' ||
      lastTurn.status === 'image_analyzing';
    return { isStreaming };
  }, [flowChatState]);

  const activeMiniAppId = useMemo(
    () => (typeof activeTabId === 'string' && activeTabId.startsWith('miniapp:')
      ? activeTabId.slice('miniapp:'.length)
      : null),
    [activeTabId]