@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.1.1 → 0.1.3

package/src/context/AgentAssistantContext.tsx

@@ -1,4 +1,4 @@
-import type { VoiceStatus } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+import type { Message, VoiceStatus } from '@bytexbyte/nxtlinq-ai-agent-core-development';
 import {
   useNxtlinqAgent,
   useNxtlinqVoice,
@@ -93,7 +93,9 @@ export function AgentAssistantProvider({
   const voiceTranscriptApi = useMemo(
     () => ({
       getMessages: () => agent.agent.getSnapshot().messages,
-      setMessages: agent.setMessages,
+      updateMessages: (updater: (prev: Message[]) => Message[]) => {
+        agent.setMessages(updater(agent.agent.getSnapshot().messages));
+      },
       syncVoiceTurnHistory: agent.syncVoiceTurnHistory,
     }),
     [agent.agent, agent.setMessages, agent.syncVoiceTurnHistory],
@@ -162,6 +164,22 @@ export function AgentAssistantProvider({
     orchestrationCallbacks,
   );
 
+  // iOS 切換 App 或相機後返回時，若 WebRTC App Channel 已斷開則自動停止語音 session，
+  // 避免麥克風圖示顯示活躍但狀態卡在 Idle 的問題。
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const handleVisibilityChange = () => {
+      if (document.visibilityState !== 'visible') return;
+      if (voice.voiceSessionId == null) return;
+      const session = agent.agent.getVoiceSession();
+      if (!session?.isAppChannelOpen()) {
+        void wrappedStopVoice();
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+  }, [voice.voiceSessionId, agent.agent, wrappedStopVoice]);
+
   const theme = useMemo(
     () => ({
       ...defaultAgentAssistantTheme,

package/src/legacy/chatbot/ui/ChatBotHeader.tsx

@@ -0,0 +1,143 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import * as React from 'react';
+import { ModelSelector } from './ModelSelector';
+import {
+  DRAG_CORNER_EXCLUSION_PX,
+  HeaderActions,
+  HeaderLoadingIndicator,
+  PiiBadge,
+} from './chatBotHeaderParts';
+import { chatHeader, headerTitle } from './styles/isolatedStyles';
+
+export type ChatBotHeaderProps = {
+  mobileLayout: boolean;
+  isDragging: boolean;
+  onDragStart: (event: React.PointerEvent<HTMLDivElement>) => void;
+  isVoiceMode: boolean;
+  isVoiceConnecting: boolean;
+  onVoiceToggle: () => void;
+  piiDisplayMode: 'plain' | 'redacted';
+  isAITLoading: boolean;
+  onSettingsClick: () => void;
+  onClose: () => void;
+};
+
+export const ChatBotHeader: React.FC<ChatBotHeaderProps> = ({
+  mobileLayout,
+  isDragging,
+  onDragStart,
+  isVoiceMode,
+  isVoiceConnecting,
+  onVoiceToggle,
+  piiDisplayMode,
+  isAITLoading,
+  onSettingsClick,
+  onClose,
+}) => {
+  const actions = (
+    <HeaderActions
+      isVoiceMode={isVoiceMode}
+      isVoiceConnecting={isVoiceConnecting}
+      onVoiceToggle={onVoiceToggle}
+      onSettingsClick={onSettingsClick}
+      onClose={onClose}
+    />
+  );
+
+  const metaChips = !isVoiceMode ? (
+    <>
+      <div css={css`position: relative !important; pointer-events: auto !important;`}>
+        <ModelSelector />
+      </div>
+      {piiDisplayMode === 'redacted' && <PiiBadge />}
+      {isAITLoading && <HeaderLoadingIndicator />}
+    </>
+  ) : null;
+
+  const dragOverlay = (
+    <div
+      css={css`
+        position: absolute !important;
+        left: ${DRAG_CORNER_EXCLUSION_PX}px !important;
+        right: ${DRAG_CORNER_EXCLUSION_PX}px !important;
+        top: 0 !important;
+        bottom: 0 !important;
+        z-index: 1 !important;
+        cursor: ${isDragging ? 'grabbing' : 'grab'} !important;
+        user-select: none !important;
+      `}
+      onPointerDown={onDragStart}
+      title="Drag to move"
+      aria-hidden
+    />
+  );
+
+  return (
+    <div css={[chatHeader, css`
+      position: relative !important;
+      ${mobileLayout ? css`
+        padding: 10px 12px !important;
+        flex-direction: column !important;
+        align-items: stretch !important;
+        gap: 8px !important;
+      ` : ''}
+    `]}>
+      {dragOverlay}
+      {mobileLayout ? (
+        <div css={css`
+          position: relative !important;
+          z-index: 2 !important;
+          display: flex !important;
+          flex-direction: column !important;
+          gap: 8px !important;
+          width: 100% !important;
+        `}>
+          <div css={css`
+            display: flex !important;
+            justify-content: space-between !important;
+            align-items: center !important;
+            gap: 8px !important;
+            pointer-events: none !important;
+          `}>
+            <h3 css={[headerTitle, css`pointer-events: none !important;`]}>AI Agent</h3>
+            {actions}
+          </div>
+          {metaChips && (
+            <div css={css`
+              display: flex !important;
+              align-items: center !important;
+              flex-wrap: wrap !important;
+              gap: 8px !important;
+              pointer-events: none !important;
+            `}>
+              {metaChips}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div css={css`
+          position: relative !important;
+          z-index: 2 !important;
+          display: flex !important;
+          justify-content: space-between !important;
+          align-items: center !important;
+          width: 100% !important;
+          pointer-events: none !important;
+        `}>
+          <div css={css`
+            display: flex !important;
+            align-items: center !important;
+            gap: 10px !important;
+            min-width: 0 !important;
+            pointer-events: none !important;
+          `}>
+            <h3 css={headerTitle}>AI Agent</h3>
+            {metaChips}
+          </div>
+          {actions}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/legacy/chatbot/ui/ChatBotUI.tsx

@@ -3,28 +3,22 @@ import { css } from '@emotion/react';
 import * as React from 'react';
 import { useDraggable, useLocalStorage, useResizable, walletTextUtils } from '@bytexbyte/nxtlinq-ai-agent-web-development';
 import { useChatBot } from '../context/ChatBotContext';
-import GraphicEqIcon from '@mui/icons-material/GraphicEq';
+import { ChatBotHeader } from './ChatBotHeader';
 import { MessageInput } from './MessageInput';
 import { MessageList } from './MessageList';
-import { ModelSelector } from './ModelSelector';
 import { PermissionForm } from './PermissionForm';
 import { PresetMessages } from './PresetMessages';
 import { VoiceModePanel } from './VoiceModePanel';
 import {
-  chatHeader,
   chatWindow,
-  closeButton,
   errorToast,
   floatingButton,
-  headerButton,
-  headerTitle,
   idvBanner,
   idvBannerText,
   idvBannerTitle,
   idvDismissButton,
   idvVerifyButton,
   infoToast,
-  loadingSpinner,
   modalOverlay,
   resizeHandleNE,
   resizeHandleNW,
@@ -36,8 +30,6 @@ import {
   warningToast
 } from './styles/isolatedStyles';
 
-/** Header drag band inset so it does not overlap corner resize hit areas */
-const DRAG_CORNER_EXCLUSION_PX = 20;
 const MOBILE_BREAKPOINT = 768;
 const MOBILE_EDGE_MARGIN = 12;
 const MOBILE_FAB_POSITION = { right: MOBILE_EDGE_MARGIN, bottom: MOBILE_EDGE_MARGIN } as const;
@@ -716,141 +708,18 @@ export const ChatBotUI: React.FC = () => {
           </>
         )}
 
-        <div
-          css={[chatHeader, css`
-            position: relative !important;
-          `]}
-        >
-          <div
-            css={css`
-              position: absolute !important;
-              left: ${DRAG_CORNER_EXCLUSION_PX}px !important;
-              right: ${DRAG_CORNER_EXCLUSION_PX}px !important;
-              top: 0 !important;
-              bottom: 0 !important;
-              z-index: 1 !important;
-              cursor: ${isDragging ? 'grabbing' : 'grab'} !important;
-              user-select: none !important;
-            `}
-            onPointerDown={handleDragStart}
-            title="Drag to move"
-            aria-hidden
-          />
-          <div
-            css={css`
-              position: relative !important;
-              z-index: 2 !important;
-              display: flex !important;
-              justify-content: space-between !important;
-              align-items: center !important;
-              width: 100% !important;
-              pointer-events: none !important;
-            `}
-          >
-          <div css={css`
-            display: flex !important;
-            align-items: center !important;
-            gap: 10px !important;
-            pointer-events: none !important;
-          `}>
-            <h3 css={headerTitle}>
-              AI Agent
-            </h3>
-            {!isVoiceMode && (
-              <div css={css`
-                position: relative !important;
-                pointer-events: auto !important;
-              `}>
-                <ModelSelector />
-              </div>
-            )}
-            {!isVoiceMode && piiDisplayMode === 'redacted' && (
-              <div
-                css={css`
-                  display: inline-flex !important;
-                  align-items: center !important;
-                  gap: 4px !important;
-                  padding: 2px 8px !important;
-                  background-color: rgba(255, 255, 255, 0.2) !important;
-                  border: 1px solid rgba(255, 255, 255, 0.4) !important;
-                  border-radius: 10px !important;
-                  font-size: 10px !important;
-                  font-weight: 600 !important;
-                  color: #ffffff !important;
-                  white-space: nowrap !important;
-                  line-height: 1.4 !important;
-                  user-select: none !important;
-                `}
-                title="PII Protection is active — sensitive data is automatically anonymized before sending to AI"
-              >
-                <svg width="10" height="10" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/>
-                </svg>
-                PII Protected
-              </div>
-            )}
-            {isAITLoading && (
-              <div css={css`
-                display: flex !important;
-                align-items: center !important;
-                gap: 5px !important;
-                font-size: 12px !important;
-                opacity: 0.8 !important;
-              `}>
-                <div css={loadingSpinner} />
-                Loading...
-              </div>
-            )}
-          </div>
-          <div css={css`
-            display: flex !important;
-            align-items: center !important;
-            gap: 10px !important;
-            pointer-events: auto !important;
-          `}>
-            <button
-              onClick={() => void ((isVoiceMode || isVoiceConnecting) ? exitVoiceMode() : enterVoiceMode())}
-              css={[headerButton, css`
-                width: auto !important;
-                min-width: 82px !important;
-                padding: 0 10px !important;
-                gap: 6px !important;
-                font-size: 12px !important;
-                font-weight: 600 !important;
-                line-height: 1 !important;
-                white-space: nowrap !important;
-              `]}
-              title={
-                isVoiceConnecting
-                  ? 'Cancel voice connection and return to text mode'
-                  : isVoiceMode
-                    ? 'Switch to text mode'
-                    : 'Switch to voice mode'
-              }
-              onPointerDown={(e) => e.stopPropagation()}
-            >
-              <GraphicEqIcon css={css`font-size: 16px !important; color: #fff !important;`} />
-              {(isVoiceMode || isVoiceConnecting) ? 'Text Mode' : 'Voice Mode'}
-            </button>
-            <button
-              onClick={handleSettingsClick}
-              css={headerButton}
-              title="AIT Settings"
-              onPointerDown={(e) => e.stopPropagation()}
-            >
-              ⚙️
-            </button>
-            <button
-              onClick={handleClose}
-              css={closeButton}
-              onPointerDown={(e) => e.stopPropagation()}
-              title="Minimize"
-            >
-              −
-            </button>
-          </div>
-          </div>
-        </div>
+        <ChatBotHeader
+          mobileLayout={mobileLayout}
+          isDragging={isDragging}
+          onDragStart={handleDragStart}
+          isVoiceMode={isVoiceMode}
+          isVoiceConnecting={isVoiceConnecting}
+          onVoiceToggle={() => void ((isVoiceMode || isVoiceConnecting) ? exitVoiceMode() : enterVoiceMode())}
+          piiDisplayMode={piiDisplayMode}
+          isAITLoading={isAITLoading}
+          onSettingsClick={handleSettingsClick}
+          onClose={handleClose}
+        />
 
         {showIDVSuggestion && hitAddress && !props.requireWalletIDVVerification && !hasBerifymeToken && !isWalletVerifiedWithBerifyme && (
           <div

package/src/legacy/chatbot/ui/chatBotHeaderParts.tsx

@@ -0,0 +1,115 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import GraphicEqIcon from '@mui/icons-material/GraphicEq';
+import * as React from 'react';
+import { closeButton, headerButton, loadingSpinner } from './styles/isolatedStyles';
+
+export const DRAG_CORNER_EXCLUSION_PX = 20;
+
+const voiceButtonStyles = css`
+  width: auto !important;
+  min-width: 82px !important;
+  padding: 0 10px !important;
+  gap: 6px !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  line-height: 1 !important;
+  white-space: nowrap !important;
+`;
+
+export const piiBadgeStyles = css`
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 4px !important;
+  padding: 2px 8px !important;
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  border: 1px solid rgba(255, 255, 255, 0.4) !important;
+  border-radius: 10px !important;
+  font-size: 10px !important;
+  font-weight: 600 !important;
+  color: #ffffff !important;
+  white-space: nowrap !important;
+  line-height: 1.4 !important;
+  user-select: none !important;
+`;
+
+export const PiiBadge: React.FC = () => (
+  <div
+    css={piiBadgeStyles}
+    title="PII Protection is active — sensitive data is automatically anonymized before sending to AI"
+  >
+    <svg width="10" height="10" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z" />
+    </svg>
+    PII Protected
+  </div>
+);
+
+type HeaderActionsProps = {
+  isVoiceMode: boolean;
+  isVoiceConnecting: boolean;
+  onVoiceToggle: () => void;
+  onSettingsClick: () => void;
+  onClose: () => void;
+};
+
+export const HeaderActions: React.FC<HeaderActionsProps> = ({
+  isVoiceMode,
+  isVoiceConnecting,
+  onVoiceToggle,
+  onSettingsClick,
+  onClose,
+}) => (
+  <div css={css`
+    display: flex !important;
+    align-items: center !important;
+    gap: 10px !important;
+    flex-shrink: 0 !important;
+    pointer-events: auto !important;
+  `}>
+    <button
+      onClick={onVoiceToggle}
+      css={[headerButton, voiceButtonStyles]}
+      title={
+        isVoiceConnecting
+          ? 'Cancel voice connection and return to text mode'
+          : isVoiceMode
+            ? 'Switch to text mode'
+            : 'Switch to voice mode'
+      }
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      <GraphicEqIcon css={css`font-size: 16px !important; color: #fff !important;`} />
+      {(isVoiceMode || isVoiceConnecting) ? 'Text Mode' : 'Voice Mode'}
+    </button>
+    <button
+      onClick={onSettingsClick}
+      css={headerButton}
+      title="AIT Settings"
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      ⚙️
+    </button>
+    <button
+      onClick={onClose}
+      css={closeButton}
+      onPointerDown={(e) => e.stopPropagation()}
+      title="Minimize"
+    >
+      −
+    </button>
+  </div>
+);
+
+export const HeaderLoadingIndicator: React.FC = () => (
+  <div css={css`
+    display: flex !important;
+    align-items: center !important;
+    gap: 5px !important;
+    font-size: 12px !important;
+    opacity: 0.8 !important;
+  `}>
+    <div css={loadingSpinner} />
+    Loading...
+  </div>
+);