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

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>
+);

package/src/voice/useVoiceTranscriptMessages.ts

@@ -5,11 +5,13 @@ import type {
 } from '@bytexbyte/nxtlinq-ai-agent-core-development';
 import { mergeStreamingTranscript } from '@bytexbyte/nxtlinq-ai-agent-core-development';
 import { useCallback, useRef } from 'react';
-import type { InteractionMode } from '../context/AgentAssistantContext';
+import { ensureUserBubbleForVoiceTurn } from './voiceUserBubble';
 
-type VoiceTranscriptAgentApi = {
+type InteractionMode = 'text' | 'voice';
+
+export type VoiceTranscriptAgentApi = {
   getMessages: () => Message[];
-  setMessages: (messages: Message[]) => void;
+  updateMessages: (updater: (prev: Message[]) => Message[]) => void;
   syncVoiceTurnHistory: (options?: { last?: number }) => Promise<void>;
 };
 
@@ -26,6 +28,7 @@ export function useVoiceTranscriptMessages(
   api: VoiceTranscriptAgentApi,
   interactionMode: InteractionMode,
   voiceSessionId: string | null,
+  getPendingUserText?: () => string,
 ) {
   const streamIdRef = useRef<string | null>(null);
   const sessionIdRef = useRef(voiceSessionId);
@@ -38,42 +41,48 @@ export function useVoiceTranscriptMessages(
 
   const upsertStreaming = useCallback(
     (text: string) => {
-      const messages = api.getMessages();
-      let streamId = streamIdRef.current;
-      if (!streamId) {
-        streamId = `${STREAM_PREFIX}${Date.now()}`;
-        streamIdRef.current = streamId;
-      }
-      const idx = messages.findIndex((m) => m.id === streamId);
-      const partialContent =
-        idx >= 0
-          ? mergeStreamingTranscript(messages[idx]?.partialContent ?? '', text)
-          : text;
-      const meta = voiceMeta(sessionIdRef.current);
-      if (idx >= 0) {
-        api.setMessages(
-          messages.map((m, i) =>
+      api.updateMessages((prev) => {
+        let streamId = streamIdRef.current;
+        if (!streamId) {
+          streamId = `${STREAM_PREFIX}${Date.now()}`;
+          streamIdRef.current = streamId;
+        }
+        const idx = prev.findIndex((m) => m.id === streamId);
+        const partialContent =
+          idx >= 0
+            ? mergeStreamingTranscript(prev[idx]?.partialContent ?? '', text)
+            : text;
+        const meta = voiceMeta(sessionIdRef.current);
+
+        if (idx >= 0) {
+          return prev.map((m, i) =>
             i === idx
               ? { ...m, partialContent, isStreaming: true, metadata: { ...m.metadata, ...meta } }
               : m,
-          ),
+          );
+        }
+
+        const withUser = ensureUserBubbleForVoiceTurn(
+          prev,
+          getPendingUserText?.() ?? '',
+          undefined,
+          meta,
         );
-        return;
-      }
-      api.setMessages([
-        ...messages,
-        {
-          id: streamId,
-          role: 'assistant',
-          content: '',
-          partialContent,
-          isStreaming: true,
-          timestamp: new Date().toISOString(),
-          metadata: meta,
-        },
-      ]);
+        return [
+          ...withUser,
+          {
+            id: streamId,
+            role: 'assistant' as const,
+            content: '',
+            partialContent,
+            isStreaming: true,
+            timestamp: new Date().toISOString(),
+            metadata: meta,
+          },
+        ];
+      });
     },
-    [api],
+    [api, getPendingUserText],
   );
 
   const finalizeAssistant = useCallback(
@@ -82,11 +91,10 @@ export function useVoiceTranscriptMessages(
       streamIdRef.current = null;
       if (!trimmed) return;
 
-      const messages = api.getMessages();
-      const streamIdx = messages.findIndex((m) => m.isStreaming && m.role === 'assistant');
-      if (streamIdx >= 0) {
-        api.setMessages(
-          messages.map((m, i) =>
+      api.updateMessages((prev) => {
+        const streamIdx = prev.findIndex((m) => m.isStreaming && m.role === 'assistant');
+        if (streamIdx >= 0) {
+          return prev.map((m, i) =>
             i === streamIdx
               ? {
                   ...m,
@@ -97,22 +105,21 @@ export function useVoiceTranscriptMessages(
                   metadata: { ...m.metadata, ...voiceMeta(sessionIdRef.current) },
                 }
               : m,
-          ),
-        );
-        return;
-      }
-      const last = messages[messages.length - 1];
-      if (last?.role === 'assistant' && last.content === trimmed) return;
-      api.setMessages([
-        ...messages,
-        {
-          id: messageId ?? `voice-asst-${Date.now()}`,
-          role: 'assistant',
-          content: trimmed,
-          timestamp: new Date().toISOString(),
-          metadata: voiceMeta(sessionIdRef.current),
-        },
-      ]);
+          );
+        }
+        const last = prev[prev.length - 1];
+        if (last?.role === 'assistant' && last.content === trimmed) return prev;
+        return [
+          ...prev,
+          {
+            id: messageId ?? `voice-asst-${Date.now()}`,
+            role: 'assistant' as const,
+            content: trimmed,
+            timestamp: new Date().toISOString(),
+            metadata: voiceMeta(sessionIdRef.current),
+          },
+        ];
+      });
     },
     [api],
   );
@@ -122,31 +129,31 @@ export function useVoiceTranscriptMessages(
       if (!isVoiceUiActive()) return;
       const text = event.text?.trim() ?? '';
       if (event.role === 'assistant') {
-        // Keep one streaming bubble for the whole turn; finalize only in handleDone.
         if (text) upsertStreaming(text);
         return;
       }
       if (event.role === 'user' && !event.interim && text) {
-        const messages = api.getMessages();
-        const last = messages[messages.length - 1];
-        if (last?.role === 'user' && last.content === text) return;
-        api.setMessages([
-          ...messages,
-          {
-            id: `voice-user-${Date.now()}`,
-            role: 'user',
-            content: text,
-            timestamp: new Date().toISOString(),
-            metadata: voiceMeta(sessionIdRef.current),
-          },
-        ]);
+        api.updateMessages((prev) => {
+          const last = prev[prev.length - 1];
+          if (last?.role === 'user' && last.content === text) return prev;
+          return [
+            ...prev,
+            {
+              id: `voice-user-${Date.now()}`,
+              role: 'user' as const,
+              content: text,
+              timestamp: new Date().toISOString(),
+              metadata: voiceMeta(sessionIdRef.current),
+            },
+          ];
+        });
       }
     },
-    [api, finalizeAssistant, isVoiceUiActive, upsertStreaming],
+    [api, isVoiceUiActive, upsertStreaming],
   );
 
   const handleDone = useCallback(
-    (event: VoiceDoneEvent) => {
+    (event: VoiceDoneEvent, options?: { pendingUserText?: string }) => {
       if (!isVoiceUiActive()) return;
       if (event.guardrailsBlocked || event.billingBlocked || event.error) {
         streamIdRef.current = null;
@@ -154,6 +161,14 @@ export function useVoiceTranscriptMessages(
       }
       const reply = event.replyText?.trim() ?? '';
       if (reply) {
+        api.updateMessages((prev) =>
+          ensureUserBubbleForVoiceTurn(
+            prev,
+            options?.pendingUserText ?? getPendingUserText?.() ?? '',
+            event.userMessageId,
+            voiceMeta(sessionIdRef.current),
+          ),
+        );
         finalizeAssistant(reply, event.assistantMessageId ?? undefined);
       } else {
         streamIdRef.current = null;
@@ -162,7 +177,7 @@ export function useVoiceTranscriptMessages(
         console.warn('[nxtlinq] syncVoiceTurnHistory after voice turn failed', err);
       });
     },
-    [api, finalizeAssistant, isVoiceUiActive],
+    [api, finalizeAssistant, getPendingUserText, isVoiceUiActive],
   );
 
   const clearVoiceStream = useCallback(() => {