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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytexbyte/nxtlinq-ai-agent-ui-react-development",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Official React Web UI for nxtlinq AI Agent — drop-in chat widget",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -49,8 +49,8 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@bytexbyte/nxtlinq-ai-agent-core-development": "0.3.9",
-    "@bytexbyte/nxtlinq-ai-agent-web-development": "0.1.2",
+    "@bytexbyte/nxtlinq-ai-agent-core-development": "workspace:^",
+    "@bytexbyte/nxtlinq-ai-agent-web-development": "0.1.3",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.25",
     "react": "^18.2.0",

package/src/{legacy/chatbot/context → context}/ChatBotContext.tsx

@@ -82,7 +82,6 @@ export const ChatBotProvider: React.FC<ChatBotProps> = ({
   // Set API hosts immediately based on environment (before any API calls)
   setApiHosts(environment);
 
-
   const nxtlinqApi = React.useMemo(() => createNxtlinqApi(apiKey, apiSecret), [apiKey, apiSecret]);
 
   const apiKeyRef = React.useRef(apiKey);

package/src/index.ts

@@ -1,10 +1,7 @@
-export { NxtlinqAgentChat } from './NxtlinqAgentChat';
+export { ChatBot } from './ChatBot';
+export { ChatBotProvider, useChatBot } from './context/ChatBotContext';
 
 export {
-  ChatBot,
-  NxtlinqChatBot,
-  ChatBotProvider,
-  useChatBot,
   ChatBotUI,
   MessageInput,
   MessageList,
@@ -13,7 +10,7 @@ export {
   PermissionForm,
   PresetMessages,
   BerifyMeModal,
-} from './legacy';
+} from './ui/index';
 
 export type {
   AIModel,
@@ -23,41 +20,9 @@ export type {
   NovaError,
   NovaResponse,
   ToolCall,
-} from './legacy';
-
-export type {
-  NxtlinqAgentChatProps,
-  AgentAssistantTheme,
-  PresetMessage,
-  Message,
   ToolUse,
-} from './types';
-
-export { defaultAgentAssistantTheme } from './theme/defaultTheme';
-
-export {
-  AgentAssistantProvider,
-  useAgentAssistant,
-  voiceStatusLabel,
-  type AgentAssistantContextValue,
-  type InteractionMode,
-} from './context/AgentAssistantContext';
-
-export { AgentMessageList } from './components/AgentMessageList';
-export { AgentComposer } from './components/AgentComposer';
-export { AgentVoiceBar } from './components/AgentVoiceBar';
-export { AgentRemoteAudio } from './components/AgentRemoteAudio';
-export { PresetMessageChips } from './components/PresetMessageChips';
-export { AgentAssistantShell } from './components/AgentAssistantShell';
-
-export {
-  NxtlinqAgentProvider,
-  useNxtlinqAgent,
-  useNxtlinqVoice,
-  createNxtlinqAgentWeb,
-  fileToAttachment,
-  type NxtlinqAgentProviderProps,
-} from '@bytexbyte/nxtlinq-ai-agent-web-development';
+  PresetMessage,
+} from './types/ChatBotTypes';
 
 export type {
   AgentEnvironment,
@@ -76,3 +41,15 @@ export {
   VoiceNotSupportedError,
   STORAGE_KEYS,
 } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+
+export {
+  createNxtlinqApi,
+  useLocalStorage,
+  useSessionStorage,
+  useSpeechToTextFromMic,
+  useVoiceMode,
+  metakeepClient,
+  getEthers,
+  sleep,
+  walletTextUtils,
+} from '@bytexbyte/nxtlinq-ai-agent-web-development';

package/src/{legacy/chatbot/ui → ui}/ModelSelector.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { css } from '@emotion/react';
 import { useChatBot } from '../context/ChatBotContext';
 import { walletTextUtils } from '@bytexbyte/nxtlinq-ai-agent-web-development';
-import { adiSideItalicDataUri } from '../../assets/images/adiSideItalicDataUri';
+import { adiSideItalicDataUri } from '../assets/images/adiSideItalicDataUri';
 
 export const ModelSelector: React.FC = () => {
   const {

package/src/{legacy/chatbot/ui → ui}/VoiceModePanel.tsx

@@ -134,7 +134,7 @@ export const VoiceModePanel: React.FC = () => {
             <span>
               <IconButton
                 onClick={toggleVoiceMicMute}
-                disabled={isVoiceConnecting || isMicHeldForAssistant}
+                disabled={voiceStatus !== 'listening' || isVoiceConnecting || isMicHeldForAssistant}
                 size="small"
                 css={css`color: ${isMicMuted ? '#ef4444' : '#4b5563'} !important;`}
               >

package/src/ui/index.ts

@@ -0,0 +1,8 @@
+export { ChatBotUI } from './ChatBotUI';
+export { MessageInput } from './MessageInput';
+export { MessageList } from './MessageList';
+export { ModelSelector } from './ModelSelector';
+export { NotificationModal } from './NotificationModal';
+export { PermissionForm } from './PermissionForm';
+export { PresetMessages } from './PresetMessages';
+export { BerifyMeModal } from './BerifyMeModal';

package/src/NxtlinqAgentChat.tsx

@@ -1,79 +0,0 @@
-import { NxtlinqAgentProvider } from '@bytexbyte/nxtlinq-ai-agent-web-development';
-import React from 'react';
-import { AgentAssistantShell } from './components/AgentAssistantShell';
-import type { NxtlinqAgentChatProps } from './types';
-
-/**
- * Drop-in React Web assistant UI wired to `@bytexbyte/nxtlinq-ai-agent-web-development`.
- *
- * @example
- * ```tsx
- * import { NxtlinqAgentChat } from '@bytexbyte/nxtlinq-ai-agent-ui-react-development';
- *
- * export default function Page() {
- *   return (
- *     <NxtlinqAgentChat
- *       style={{ height: '100vh' }}
- *       serviceId="..."
- *       apiKey="..."
- *       apiSecret="..."
- *       environment="staging"
- *       pseudoId={userId}
- *       loadHistoryOnMount
- *     />
- *   );
- * }
- * ```
- */
-export function NxtlinqAgentChat({
-  title,
-  placeholder,
-  presetMessages,
-  loadHistoryOnMount = false,
-  historyLast,
-  enableVoice = true,
-  enableFileUpload = true,
-  startInVoiceMode = false,
-  startWithMicMuted = true,
-  holdMicDuringAssistant = true,
-  theme,
-  style,
-  headerStyle,
-  onMessage,
-  onError,
-  onToolUse,
-  children,
-  fetchImpl,
-  getTimezone,
-  resetOnIdentityChange,
-  ...agentConfig
-}: NxtlinqAgentChatProps): React.ReactElement {
-  return (
-    <NxtlinqAgentProvider
-      fetchImpl={fetchImpl}
-      getTimezone={getTimezone}
-      resetOnIdentityChange={resetOnIdentityChange}
-      onMessage={onMessage}
-      onError={onError}
-      onToolUse={onToolUse}
-      {...agentConfig}
-    >
-      <AgentAssistantShell
-        title={title}
-        placeholder={placeholder}
-        presetMessages={presetMessages}
-        loadHistoryOnMount={loadHistoryOnMount}
-        historyLast={historyLast}
-        enableVoice={enableVoice}
-        enableFileUpload={enableFileUpload}
-        startInVoiceMode={startInVoiceMode}
-        startWithMicMuted={startWithMicMuted}
-        holdMicDuringAssistant={holdMicDuringAssistant}
-        theme={theme}
-        style={style}
-        headerStyle={headerStyle}
-      />
-      {children}
-    </NxtlinqAgentProvider>
-  );
-}

package/src/components/AgentAssistantShell.tsx

@@ -1,104 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {
-  AgentAssistantProvider,
-  useAgentAssistant,
-} from '../context/AgentAssistantContext';
-import type { NxtlinqAgentChatProps } from '../types';
-import { AgentComposer } from './AgentComposer';
-import { AgentMessageList } from './AgentMessageList';
-import { AgentRemoteAudio } from './AgentRemoteAudio';
-import { AgentVoiceBar } from './AgentVoiceBar';
-import { PresetMessageChips } from './PresetMessageChips';
-
-export type AgentAssistantShellProps = Pick<
-  NxtlinqAgentChatProps,
-  | 'title'
-  | 'placeholder'
-  | 'presetMessages'
-  | 'enableVoice'
-  | 'enableFileUpload'
-  | 'theme'
-  | 'style'
-  | 'headerStyle'
-  | 'loadHistoryOnMount'
-  | 'historyLast'
-  | 'startInVoiceMode'
-  | 'startWithMicMuted'
-  | 'holdMicDuringAssistant'
->;
-
-function AgentAssistantInner({
-  title,
-  headerStyle,
-  style,
-  loadHistoryOnMount,
-  historyLast,
-  startInVoiceMode,
-}: AgentAssistantShellProps): React.ReactElement {
-  const { theme, loadHistory, startVoice, isVoiceAvailable } = useAgentAssistant();
-  const [historyReady, setHistoryReady] = useState(!loadHistoryOnMount);
-  const voiceAutoStartRef = useRef(false);
-
-  useEffect(() => {
-    if (loadHistoryOnMount) {
-      void loadHistory({ last: historyLast ?? 50 }).finally(() => setHistoryReady(true));
-    }
-  }, [loadHistory, loadHistoryOnMount, historyLast]);
-
-  useEffect(() => {
-    if (!startInVoiceMode || !isVoiceAvailable || voiceAutoStartRef.current) return;
-    voiceAutoStartRef.current = true;
-    void startVoice();
-  }, [startInVoiceMode, isVoiceAvailable, startVoice]);
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        flex: 1,
-        minHeight: 0,
-        backgroundColor: theme.colors.background,
-        ...style,
-      }}
-    >
-      <header
-        style={{
-          padding: theme.spacing.md,
-          borderBottom: `1px solid ${theme.colors.border}`,
-          backgroundColor: theme.colors.surface,
-          fontSize: theme.typography.titleSize,
-          fontWeight: 600,
-          color: theme.colors.assistantText,
-          ...headerStyle,
-        }}
-      >
-        {title ?? 'AI Assistant'}
-      </header>
-      <PresetMessageChips />
-      {historyReady ? <AgentMessageList /> : <div style={{ flex: 1 }} />}
-      <AgentVoiceBar />
-      <AgentComposer />
-      <AgentRemoteAudio />
-    </div>
-  );
-}
-
-export function AgentAssistantShell(props: AgentAssistantShellProps): React.ReactElement {
-  return (
-    <AgentAssistantProvider
-      ui={{
-        title: props.title,
-        placeholder: props.placeholder,
-        presetMessages: props.presetMessages,
-        enableVoice: props.enableVoice,
-        enableFileUpload: props.enableFileUpload,
-        theme: props.theme,
-        startWithMicMuted: props.startWithMicMuted,
-        holdMicDuringAssistant: props.holdMicDuringAssistant,
-      }}
-    >
-      <AgentAssistantInner {...props} />
-    </AgentAssistantProvider>
-  );
-}

package/src/components/AgentComposer.tsx

@@ -1,134 +0,0 @@
-import React from 'react';
-import { useAgentAssistant } from '../context/AgentAssistantContext';
-
-export function AgentComposer(): React.ReactElement | null {
-  const {
-    theme,
-    placeholder,
-    inputText,
-    setInputText,
-    sendText,
-    isLoading,
-    isVoiceAvailable,
-    interactionMode,
-    startVoice,
-    isVoiceConnecting,
-    enableFileUpload,
-    sendMessage,
-  } = useAgentAssistant();
-  const fileInputRef = React.useRef<HTMLInputElement | null>(null);
-
-  if (interactionMode === 'voice') {
-    return null;
-  }
-
-  const handleFiles = async (files: FileList | null) => {
-    if (!files?.length) return;
-    const { fileToAttachment } = await import('@bytexbyte/nxtlinq-ai-agent-web-development');
-    const attachments = await Promise.all(
-      Array.from(files).map((file) => fileToAttachment(file)),
-    );
-    await sendMessage(
-      attachments.length ? `Uploaded ${attachments.length} file(s)` : '',
-      { attachments },
-    );
-    if (fileInputRef.current) fileInputRef.current.value = '';
-  };
-
-  return (
-    <div
-      style={{
-        borderTop: `1px solid ${theme.colors.border}`,
-        backgroundColor: theme.colors.surface,
-        padding: theme.spacing.md,
-      }}
-    >
-      <div style={{ display: 'flex', gap: theme.spacing.sm, alignItems: 'flex-end' }}>
-        {enableFileUpload ? (
-          <>
-            <button
-              type="button"
-              onClick={() => fileInputRef.current?.click()}
-              disabled={isLoading}
-              style={{
-                width: 36,
-                height: 36,
-                borderRadius: theme.radius.button,
-                border: `1px solid ${theme.colors.border}`,
-                backgroundColor: theme.colors.surface,
-                cursor: 'pointer',
-              }}
-              aria-label="Upload file"
-            >
-              +
-            </button>
-            <input
-              ref={fileInputRef}
-              type="file"
-              multiple
-              accept="image/*,.pdf,.doc,.docx,.txt"
-              style={{ display: 'none' }}
-              onChange={(e) => void handleFiles(e.target.files)}
-            />
-          </>
-        ) : null}
-        <textarea
-          value={inputText}
-          onChange={(e) => setInputText(e.target.value)}
-          placeholder={placeholder}
-          rows={2}
-          disabled={isLoading}
-          maxLength={4000}
-          style={{
-            flex: 1,
-            resize: 'none',
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: theme.radius.panel,
-            padding: theme.spacing.sm,
-            fontSize: theme.typography.bodySize,
-            color: theme.colors.assistantText,
-          }}
-        />
-        <button
-          type="button"
-          onClick={() => void sendText()}
-          disabled={isLoading || !inputText.trim()}
-          style={{
-            backgroundColor: theme.colors.primary,
-            color: theme.colors.primaryText,
-            border: 'none',
-            borderRadius: theme.radius.button,
-            padding: `${theme.spacing.sm}px ${theme.spacing.md}px`,
-            fontWeight: 600,
-            opacity: isLoading || !inputText.trim() ? 0.5 : 1,
-            cursor: 'pointer',
-          }}
-        >
-          Send
-        </button>
-      </div>
-      {isVoiceAvailable ? (
-        <button
-          type="button"
-          onClick={() => {
-            startVoice().catch((err: unknown) => {
-              console.warn('[nxtlinq] startVoice failed:', err);
-            });
-          }}
-          disabled={isVoiceConnecting}
-          style={{
-            display: 'block',
-            margin: `${theme.spacing.sm}px auto 0`,
-            border: 'none',
-            background: 'none',
-            color: theme.colors.primary,
-            fontSize: theme.typography.captionSize,
-            cursor: 'pointer',
-          }}
-        >
-          {isVoiceConnecting ? 'Connecting voice…' : 'Switch to voice mode'}
-        </button>
-      ) : null}
-    </div>
-  );
-}

package/src/components/AgentMessageList.tsx

@@ -1,78 +0,0 @@
-import type { Message } from '@bytexbyte/nxtlinq-ai-agent-core-development';
-import React, { useEffect, useRef } from 'react';
-import { useAgentAssistant } from '../context/AgentAssistantContext';
-
-function MessageBubble({ message }: { message: Message }): React.ReactElement {
-  const { theme } = useAgentAssistant();
-  const isUser = message.role === 'user';
-  const displayText =
-    message.partialContent && message.isStreaming
-      ? message.partialContent
-      : message.content;
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: isUser ? 'flex-end' : 'flex-start',
-        marginBottom: theme.spacing.sm,
-      }}
-    >
-      <div
-        style={{
-          maxWidth: '85%',
-          padding: `${theme.spacing.sm}px ${theme.spacing.md}px`,
-          borderRadius: theme.radius.bubble,
-          backgroundColor: isUser ? theme.colors.userBubble : theme.colors.assistantBubble,
-          color: isUser ? theme.colors.userText : theme.colors.assistantText,
-          fontSize: theme.typography.bodySize,
-          whiteSpace: 'pre-wrap',
-        }}
-      >
-        {displayText || ' '}
-        {message.error ? (
-          <div style={{ color: theme.colors.error, fontSize: theme.typography.captionSize }}>
-            {message.error}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-}
-
-export function AgentMessageList(): React.ReactElement {
-  const { messages, isLoading, theme } = useAgentAssistant();
-  const endRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    endRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages.length, messages[messages.length - 1]?.content, messages[messages.length - 1]?.partialContent]);
-
-  return (
-    <div
-      style={{
-        flex: 1,
-        minHeight: 0,
-        overflowY: 'auto',
-        padding: theme.spacing.md,
-        backgroundColor: theme.colors.background,
-      }}
-    >
-      {messages.length === 0 ? (
-        <p style={{ textAlign: 'center', color: theme.colors.mutedText, marginTop: 40 }}>
-          Send a message to start the conversation.
-        </p>
-      ) : (
-        messages.map((message: Message) => (
-          <MessageBubble key={message.id} message={message} />
-        ))
-      )}
-      {isLoading ? (
-        <p style={{ color: theme.colors.mutedText, fontSize: theme.typography.captionSize }}>
-          Thinking…
-        </p>
-      ) : null}
-      <div ref={endRef} />
-    </div>
-  );
-}

package/src/components/AgentRemoteAudio.tsx

@@ -1,34 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { useAgentAssistant } from '../context/AgentAssistantContext';
-
-/** Plays assistant WebRTC remote audio with retry until stream is ready. */
-export function AgentRemoteAudio(): React.ReactElement | null {
-  const { getRemoteAudioStream, isVoiceActive, isVoiceChannelReady } = useAgentAssistant();
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio || !isVoiceActive) return;
-
-    let cancelled = false;
-    const attach = () => {
-      if (cancelled) return;
-      const stream = getRemoteAudioStream();
-      if (!stream) return;
-      audio.srcObject = stream;
-      void audio.play().catch(() => undefined);
-    };
-
-    attach();
-    const timer = window.setInterval(attach, 120);
-    return () => {
-      cancelled = true;
-      window.clearInterval(timer);
-      audio.pause();
-      audio.srcObject = null;
-    };
-  }, [getRemoteAudioStream, isVoiceActive, isVoiceChannelReady]);
-
-  if (!isVoiceActive) return null;
-  return <audio ref={audioRef} autoPlay playsInline style={{ display: 'none' }} />;
-}