npm - @nextclaw/ui - Versions diffs - 0.5.48 → 0.6.0 - Mend

@nextclaw/ui 0.5.48 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/CHANGELOG.md +12 -0
package/dist/assets/ChannelsList-BWQYaOuz.js +1 -0
package/dist/assets/ChatPage-DsIuF-TC.js +32 -0
package/dist/assets/DocBrowser-D4pXQDKt.js +1 -0
package/dist/assets/MarketplacePage-Cj1HGbGe.js +49 -0
package/dist/assets/ModelConfig-C2f3h7yq.js +1 -0
package/dist/assets/{ProvidersList-BXHpjVtO.js → ProvidersList-DUdQEMNV.js} +1 -1
package/dist/assets/RuntimeConfig-BnR60m9J.js +1 -0
package/dist/assets/{SecretsConfig-KkgMzdt1.js → SecretsConfig-CXV017VN.js} +2 -2
package/dist/assets/SessionsConfig-DsgHhuYe.js +2 -0
package/dist/assets/{card-D7NY0Szf.js → card-B7d3Z9Y7.js} +1 -1
package/dist/assets/index-Dp6x_DHf.js +2 -0
package/dist/assets/index-DsQL2mtx.css +1 -0
package/dist/assets/{label-Ojs7Al6B.js → label-Dlq0AZXx.js} +1 -1
package/dist/assets/{logos-B1qBsCSi.js → logos-CSTJsbua.js} +1 -1
package/dist/assets/{page-layout-CUMMO0nN.js → page-layout-DeBYaT_B.js} +1 -1
package/dist/assets/provider-models-y4mUDcGF.js +1 -0
package/dist/assets/{switch-BdhS_16-.js → switch-DwDE9PLr.js} +1 -1
package/dist/assets/{tabs-custom-D261E5EA.js → tabs-custom-DqY_ht59.js} +1 -1
package/dist/assets/useConfig-BiM-oO9i.js +6 -0
package/dist/assets/{useConfirmDialog-BUKGHDL6.js → useConfirmDialog-BEFIWczY.js} +2 -2
package/dist/assets/{vendor-Dh04PGww.js → vendor-Ylg6Wdt_.js} +84 -69
package/dist/index.html +3 -3
package/package.json +2 -1
package/src/App.tsx +10 -6
package/src/api/config.ts +42 -1
package/src/api/types.ts +29 -0
package/src/components/chat/ChatConversationPanel.tsx +75 -86
package/src/components/chat/ChatInputBar.tsx +226 -0
package/src/components/chat/ChatPage.tsx +359 -188
package/src/components/chat/ChatSidebar.tsx +242 -0
package/src/components/chat/ChatThread.tsx +92 -25
package/src/components/chat/ChatWelcome.tsx +61 -0
package/src/components/chat/SkillsPicker.tsx +137 -0
package/src/components/chat/useChatStreamController.ts +287 -56
package/src/components/config/ChannelForm.tsx +1 -1
package/src/components/config/ChannelsList.tsx +3 -3
package/src/components/config/ModelConfig.tsx +11 -89
package/src/components/config/RuntimeConfig.tsx +29 -1
package/src/components/layout/AppLayout.tsx +42 -6
package/src/components/layout/Sidebar.tsx +68 -62
package/src/components/marketplace/MarketplacePage.tsx +13 -3
package/src/components/ui/popover.tsx +31 -0
package/src/hooks/useConfig.ts +18 -0
package/src/lib/i18n.ts +47 -0
package/src/lib/provider-models.ts +129 -0
package/dist/assets/ChannelsList-C8cguFLc.js +0 -1
package/dist/assets/ChatPage-BkHWNUNR.js +0 -32
package/dist/assets/CronConfig-D-ESQlvk.js +0 -1
package/dist/assets/DocBrowser-B9ZD6pAk.js +0 -1
package/dist/assets/MarketplacePage-Ds_l9KTF.js +0 -49
package/dist/assets/ModelConfig-N1tbLv9b.js +0 -1
package/dist/assets/RuntimeConfig-KsKfkjgv.js +0 -1
package/dist/assets/SessionsConfig-CWBp8IPf.js +0 -2
package/dist/assets/index-BRBYYgR_.js +0 -2
package/dist/assets/index-C5cdRzpO.css +0 -1
package/dist/assets/useConfig-txxbxXnT.js +0 -6

package/dist/index.html CHANGED Viewed

@@ -6,9 +6,9 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NextClaw - 系统配置</title>
-  <script type="module" crossorigin src="/assets/index-BRBYYgR_.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-Dh04PGww.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-C5cdRzpO.css">
+  <script type="module" crossorigin src="/assets/index-Dp6x_DHf.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-Ylg6Wdt_.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-DsQL2mtx.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,12 +1,13 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.5.48",
+  "version": "0.6.0",
   "private": false,
   "type": "module",
   "license": "MIT",
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",

package/src/App.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AppLayout } from '@/components/layout/AppLayout';
 import { useWebSocket } from '@/hooks/useWebSocket';
 import { Toaster } from 'sonner';
-import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -20,7 +20,6 @@ const ProvidersListPage = lazy(async () => ({ default: (await import('@/componen
 const ChannelsListPage = lazy(async () => ({ default: (await import('@/components/config/ChannelsList')).ChannelsList }));
 const RuntimeConfigPage = lazy(async () => ({ default: (await import('@/components/config/RuntimeConfig')).RuntimeConfig }));
 const SessionsConfigPage = lazy(async () => ({ default: (await import('@/components/config/SessionsConfig')).SessionsConfig }));
-const CronConfigPage = lazy(async () => ({ default: (await import('@/components/config/CronConfig')).CronConfig }));
 const SecretsConfigPage = lazy(async () => ({ default: (await import('@/components/config/SecretsConfig')).SecretsConfig }));
 const MarketplacePage = lazy(async () => ({ default: (await import('@/components/marketplace/MarketplacePage')).MarketplacePage }));
@@ -34,21 +33,26 @@ function LazyRoute({ children }: { children: JSX.Element }) {
 function AppContent() {
   useWebSocket(queryClient); // Initialize WebSocket connection
-  const location = useLocation();
   return (
     <QueryClientProvider client={queryClient}>
       <AppLayout>
-        <div key={location.pathname} className="animate-fade-in w-full h-full">
+        <div className="w-full h-full">
           <Routes>
-            <Route path="/chat" element={<LazyRoute><ChatPage /></LazyRoute>} />
+            <Route path="/chat/skills" element={<Navigate to="/skills" replace />} />
+            <Route path="/chat/cron" element={<Navigate to="/cron" replace />} />
+            <Route path="/chat/:sessionId" element={<LazyRoute><ChatPage view="chat" /></LazyRoute>} />
+            <Route path="/chat" element={<LazyRoute><ChatPage view="chat" /></LazyRoute>} />
+            <Route path="/skills" element={<LazyRoute><ChatPage view="skills" /></LazyRoute>} />
+            <Route path="/cron" element={<LazyRoute><ChatPage view="cron" /></LazyRoute>} />
             <Route path="/model" element={<LazyRoute><ModelConfigPage /></LazyRoute>} />
             <Route path="/providers" element={<LazyRoute><ProvidersListPage /></LazyRoute>} />
             <Route path="/channels" element={<LazyRoute><ChannelsListPage /></LazyRoute>} />
             <Route path="/runtime" element={<LazyRoute><RuntimeConfigPage /></LazyRoute>} />
             <Route path="/sessions" element={<LazyRoute><SessionsConfigPage /></LazyRoute>} />
-            <Route path="/cron" element={<LazyRoute><CronConfigPage /></LazyRoute>} />
             <Route path="/secrets" element={<LazyRoute><SecretsConfigPage /></LazyRoute>} />
+            <Route path="/settings" element={<Navigate to="/model" replace />} />
+            <Route path="/marketplace/skills" element={<Navigate to="/skills" replace />} />
             <Route path="/marketplace" element={<Navigate to="/marketplace/plugins" replace />} />
             <Route path="/marketplace/:type" element={<LazyRoute><MarketplacePage /></LazyRoute>} />
             <Route path="/" element={<Navigate to="/chat" replace />} />

package/src/api/config.ts CHANGED Viewed

@@ -21,6 +21,9 @@ import type {
   SessionPatchUpdate,
   ChatTurnRequest,
   ChatTurnView,
+  ChatCapabilitiesView,
+  ChatTurnStopRequest,
+  ChatTurnStopResult,
   CronListView,
   CronEnableRequest,
   CronRunRequest,
@@ -241,6 +244,32 @@ export async function sendChatTurn(data: ChatTurnRequest): Promise<ChatTurnView>
   return response.data;
 }
+// GET /api/chat/capabilities
+export async function fetchChatCapabilities(params?: { sessionKey?: string; agentId?: string }): Promise<ChatCapabilitiesView> {
+  const query = new URLSearchParams();
+  if (params?.sessionKey?.trim()) {
+    query.set('sessionKey', params.sessionKey.trim());
+  }
+  if (params?.agentId?.trim()) {
+    query.set('agentId', params.agentId.trim());
+  }
+  const suffix = query.toString();
+  const response = await api.get<ChatCapabilitiesView>(suffix ? `/api/chat/capabilities?${suffix}` : '/api/chat/capabilities');
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// POST /api/chat/turn/stop
+export async function stopChatTurn(data: ChatTurnStopRequest): Promise<ChatTurnStopResult> {
+  const response = await api.post<ChatTurnStopResult>('/api/chat/turn/stop', data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
 type ChatTurnStreamOptions = {
   signal?: AbortSignal;
   onReady?: (event: ChatTurnStreamReadyEvent) => void;
@@ -324,11 +353,23 @@ export async function sendChatTurnStream(
         const readyPayload = JSON.parse(parsed.data) as {
           sessionKey?: string;
           requestedAt?: string;
+          runId?: string;
+          stopSupported?: boolean;
+          stopReason?: string;
         };
         options.onReady?.({
           event: 'ready',
           sessionKey: String(readyPayload.sessionKey ?? ''),
-          requestedAt: String(readyPayload.requestedAt ?? '')
+          requestedAt: String(readyPayload.requestedAt ?? ''),
+          ...(typeof readyPayload.runId === 'string' && readyPayload.runId.trim().length > 0
+            ? { runId: readyPayload.runId.trim() }
+            : {}),
+          ...(typeof readyPayload.stopSupported === 'boolean'
+            ? { stopSupported: readyPayload.stopSupported }
+            : {}),
+          ...(typeof readyPayload.stopReason === 'string' && readyPayload.stopReason.trim().length > 0
+            ? { stopReason: readyPayload.stopReason.trim() }
+            : {})
         });
       } catch {
         // ignore malformed ready event payload

package/src/api/types.ts CHANGED Viewed

@@ -74,6 +74,8 @@ export type AgentProfileView = {
   default?: boolean;
   workspace?: string;
   model?: string;
+  engine?: string;
+  engineConfig?: Record<string, unknown>;
   contextTokens?: number;
   maxToolIterations?: number;
 };
@@ -167,10 +169,31 @@ export type ChatTurnView = {
   durationMs: number;
 };
+export type ChatCapabilitiesView = {
+  stopSupported: boolean;
+  stopReason?: string;
+};
+export type ChatTurnStopRequest = {
+  runId: string;
+  sessionKey?: string;
+  agentId?: string;
+};
+export type ChatTurnStopResult = {
+  stopped: boolean;
+  runId: string;
+  sessionKey?: string;
+  reason?: string;
+};
 export type ChatTurnStreamReadyEvent = {
   event: "ready";
   sessionKey: string;
   requestedAt: string;
+  runId?: string;
+  stopSupported?: boolean;
+  stopReason?: string;
 };
 export type ChatTurnStreamDeltaEvent = {
@@ -242,6 +265,8 @@ export type RuntimeConfigUpdate = {
   agents?: {
     defaults?: {
       contextTokens?: number;
+      engine?: string;
+      engineConfig?: Record<string, unknown>;
     };
     list?: AgentProfileView[];
   };
@@ -307,6 +332,8 @@ export type ConfigView = {
     defaults: {
       model: string;
       workspace?: string;
+      engine?: string;
+      engineConfig?: Record<string, unknown>;
       contextTokens?: number;
       maxToolIterations?: number;
     };
@@ -530,6 +557,8 @@ export type MarketplaceInstalledRecord = {
   id?: string;
   spec: string;
   label?: string;
+  description?: string;
+  descriptionZh?: string;
   source?: string;
   installedAt?: string;
   enabled?: boolean;

package/src/components/chat/ChatConversationPanel.tsx CHANGED Viewed

@@ -1,19 +1,26 @@
 import type { MutableRefObject } from 'react';
-import type { SessionEventView } from '@/api/types';
+import type { MarketplaceInstalledRecord, SessionEventView } from '@/api/types';
 import { Button } from '@/components/ui/button';
 import { ChatThread } from '@/components/chat/ChatThread';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { ChatInputBar, type ChatModelOption } from '@/components/chat/ChatInputBar';
+import { ChatWelcome } from '@/components/chat/ChatWelcome';
 import { t } from '@/lib/i18n';
-import { MessageSquareText, Send, Trash2 } from 'lucide-react';
+import { Trash2 } from 'lucide-react';
 type ChatConversationPanelProps = {
-  agentOptions: string[];
-  selectedAgentId: string;
-  onSelectedAgentIdChange: (value: string) => void;
+  modelOptions: ChatModelOption[];
+  selectedModel: string;
+  onSelectedModelChange: (value: string) => void;
+  skillRecords: MarketplaceInstalledRecord[];
+  isSkillsLoading?: boolean;
+  selectedSkills: string[];
+  onSelectedSkillsChange: (next: string[]) => void;
   selectedSessionKey: string | null;
+  sessionDisplayName?: string;
   canDeleteSession: boolean;
   isDeletePending: boolean;
   onDeleteSession: () => void;
+  onCreateSession: () => void;
   threadRef: MutableRefObject<HTMLDivElement | null>;
   onThreadScroll: () => void;
   isHistoryLoading: boolean;
@@ -24,17 +31,27 @@ type ChatConversationPanelProps = {
   draft: string;
   onDraftChange: (value: string) => void;
   onSend: () => Promise<void> | void;
+  onStop: () => Promise<void> | void;
+  canStopGeneration: boolean;
+  stopDisabledReason?: string | null;
+  sendError?: string | null;
   queuedCount: number;
 };
 export function ChatConversationPanel({
-  agentOptions,
-  selectedAgentId,
-  onSelectedAgentIdChange,
+  modelOptions,
+  selectedModel,
+  onSelectedModelChange,
+  skillRecords,
+  isSkillsLoading = false,
+  selectedSkills,
+  onSelectedSkillsChange,
   selectedSessionKey,
+  sessionDisplayName,
   canDeleteSession,
   isDeletePending,
   onDeleteSession,
+  onCreateSession,
   threadRef,
   onThreadScroll,
   isHistoryLoading,
@@ -45,9 +62,14 @@ export function ChatConversationPanel({
   draft,
   onDraftChange,
   onSend,
-  queuedCount
+  onStop,
+  canStopGeneration,
+  stopDisabledReason,
+  sendError,
+  queuedCount,
 }: ChatConversationPanelProps) {
-  const showHistoryLoading =
+  const showWelcome = !selectedSessionKey && mergedEvents.length === 0;
+  const hideEmptyHint =
     isHistoryLoading &&
     mergedEvents.length === 0 &&
     !isSending &&
@@ -55,94 +77,61 @@ export function ChatConversationPanel({
     !streamingAssistantText.trim();
   return (
-    <section className="flex-1 min-h-0 rounded-2xl border border-gray-200 bg-gradient-to-b from-gray-50/60 to-white shadow-card flex flex-col overflow-hidden">
-      <div className="px-5 py-4 border-b border-gray-200/80 bg-white/80 backdrop-blur-sm">
-        <div className="grid gap-3 lg:grid-cols-[minmax(220px,300px)_minmax(0,1fr)_auto] items-end">
-          <div className="min-w-0">
-            <div className="text-[11px] text-gray-500 mb-1">{t('chatAgentLabel')}</div>
-            <Select value={selectedAgentId} onValueChange={onSelectedAgentIdChange}>
-              <SelectTrigger className="h-9 rounded-lg">
-                <SelectValue placeholder={t('chatSelectAgent')} />
-              </SelectTrigger>
-              <SelectContent>
-                {agentOptions.map((agent) => (
-                  <SelectItem key={agent} value={agent}>
-                    {agent}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+    <section className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+      {/* Minimal top bar - only shown when session is active */}
+      {selectedSessionKey && (
+        <div className="px-5 py-3 border-b border-gray-200/60 bg-white/80 backdrop-blur-sm flex items-center justify-between shrink-0">
+          <div className="min-w-0 flex-1">
+            <span className="text-sm font-medium text-gray-700 truncate">
+              {sessionDisplayName || selectedSessionKey}
+            </span>
           </div>
-          <div className="min-w-0">
-            <div className="text-[11px] text-gray-500 mb-1">{t('chatSessionLabel')}</div>
-            <div className="h-9 rounded-lg border border-gray-200 bg-white px-3 text-xs text-gray-600 flex items-center truncate">
-              {selectedSessionKey ?? t('chatNoSession')}
-            </div>
-          </div>
           <Button
-            variant="outline"
-            className="rounded-lg"
+            variant="ghost"
+            size="icon"
+            className="rounded-lg shrink-0 text-gray-400 hover:text-destructive"
             onClick={onDeleteSession}
             disabled={!canDeleteSession || isDeletePending}
           >
-            <Trash2 className="h-3.5 w-3.5 mr-1.5" />
-            {t('chatDeleteSession')}
+            <Trash2 className="h-4 w-4" />
           </Button>
         </div>
-      </div>
+      )}
-      <div ref={threadRef} onScroll={onThreadScroll} className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-5 py-5">
-        {!selectedSessionKey ? (
-          <div className="h-full flex items-center justify-center">
-            <div className="text-center text-gray-500">
-              <MessageSquareText className="h-8 w-8 mx-auto mb-2 text-gray-300" />
-              <div className="text-sm font-medium">{t('chatNoSession')}</div>
-              <div className="text-xs mt-1">{t('chatNoSessionHint')}</div>
-            </div>
-          </div>
-        ) : showHistoryLoading ? (
-          <div className="text-sm text-gray-500">{t('chatHistoryLoading')}</div>
+      {/* Message thread or welcome */}
+      <div ref={threadRef} onScroll={onThreadScroll} className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
+        {showWelcome ? (
+          <ChatWelcome onCreateSession={onCreateSession} />
+        ) : hideEmptyHint ? (
+          <div className="h-full" />
         ) : mergedEvents.length === 0 ? (
-          <div className="text-sm text-gray-500">{t('chatNoMessages')}</div>
+          <div className="px-5 py-5 text-sm text-gray-500">{t('chatNoMessages')}</div>
         ) : (
-          <ChatThread events={mergedEvents} isSending={isSending && isAwaitingAssistantOutput} />
+          <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
+            <ChatThread events={mergedEvents} isSending={isSending && isAwaitingAssistantOutput} />
+          </div>
         )}
       </div>
-      <div className="border-t border-gray-200 bg-white p-4">
-        <div className="rounded-xl border border-gray-200 bg-white p-2">
-          <textarea
-            value={draft}
-            onChange={(event) => onDraftChange(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' && !event.shiftKey) {
-                event.preventDefault();
-                void onSend();
-              }
-            }}
-            placeholder={t('chatInputPlaceholder')}
-            className="w-full min-h-[68px] max-h-[220px] resize-y bg-transparent outline-none text-sm px-2 py-1.5 text-gray-800 placeholder:text-gray-400"
-          />
-          <div className="flex items-center justify-between px-2 pb-1">
-            <div className="text-[11px] text-gray-400">
-              {isSending && queuedCount > 0
-                ? `${t('chatQueuedHintPrefix')} ${queuedCount} ${t('chatQueuedHintSuffix')}`
-                : t('chatInputHint')}
-            </div>
-            <Button
-              size="sm"
-              className="rounded-lg"
-              onClick={() => void onSend()}
-              disabled={draft.trim().length === 0}
-            >
-              <Send className="h-3.5 w-3.5 mr-1.5" />
-              {isSending ? t('chatQueueSend') : t('chatSend')}
-            </Button>
-          </div>
-        </div>
-      </div>
+      {/* Enhanced input bar */}
+      <ChatInputBar
+        draft={draft}
+        onDraftChange={onDraftChange}
+        onSend={onSend}
+        onStop={onStop}
+        canStopGeneration={canStopGeneration}
+        stopDisabledReason={stopDisabledReason}
+        sendError={sendError}
+        isSending={isSending}
+        queuedCount={queuedCount}
+        modelOptions={modelOptions}
+        selectedModel={selectedModel}
+        onSelectedModelChange={onSelectedModelChange}
+        skillRecords={skillRecords}
+        isSkillsLoading={isSkillsLoading}
+        selectedSkills={selectedSkills}
+        onSelectedSkillsChange={onSelectedSkillsChange}
+      />
     </section>
   );
 }

package/src/components/chat/ChatInputBar.tsx ADDED Viewed

@@ -0,0 +1,226 @@
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { SkillsPicker } from '@/components/chat/SkillsPicker';
+import type { MarketplaceInstalledRecord } from '@/api/types';
+import { t } from '@/lib/i18n';
+import { Paperclip, Send, Sparkles, Square, X } from 'lucide-react';
+export type ChatModelOption = {
+  value: string;
+  modelLabel: string;
+  providerLabel: string;
+};
+type ChatInputBarProps = {
+  draft: string;
+  onDraftChange: (value: string) => void;
+  onSend: () => Promise<void> | void;
+  onStop: () => Promise<void> | void;
+  canStopGeneration: boolean;
+  stopDisabledReason?: string | null;
+  sendError?: string | null;
+  isSending: boolean;
+  queuedCount: number;
+  modelOptions: ChatModelOption[];
+  selectedModel: string;
+  onSelectedModelChange: (value: string) => void;
+  skillRecords: MarketplaceInstalledRecord[];
+  isSkillsLoading?: boolean;
+  selectedSkills: string[];
+  onSelectedSkillsChange: (next: string[]) => void;
+};
+export function ChatInputBar({
+  draft,
+  onDraftChange,
+  onSend,
+  onStop,
+  canStopGeneration,
+  stopDisabledReason = null,
+  sendError = null,
+  isSending,
+  queuedCount,
+  modelOptions,
+  selectedModel,
+  onSelectedModelChange,
+  skillRecords,
+  isSkillsLoading = false,
+  selectedSkills,
+  onSelectedSkillsChange
+}: ChatInputBarProps) {
+  const selectedModelOption = modelOptions.find((option) => option.value === selectedModel);
+  const resolvedStopHint =
+    stopDisabledReason === '__preparing__'
+      ? t('chatStopPreparing')
+      : stopDisabledReason?.trim() || t('chatStopUnavailable');
+  const selectedSkillRecords = selectedSkills.map((spec) => {
+    const matched = skillRecords.find((record) => record.spec === spec);
+    return {
+      spec,
+      label: matched?.label || spec
+    };
+  });
+  return (
+    <div className="border-t border-gray-200/80 bg-white p-4">
+      <div className="mx-auto w-full max-w-[min(1120px,100%)]">
+        <div className="rounded-2xl border border-gray-200 bg-white shadow-card overflow-hidden">
+          {/* Textarea */}
+          <textarea
+            value={draft}
+            onChange={(e) => onDraftChange(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape' && isSending && canStopGeneration) {
+                e.preventDefault();
+                void onStop();
+                return;
+              }
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                void onSend();
+              }
+            }}
+            placeholder={t('chatInputPlaceholder')}
+            className="w-full min-h-[68px] max-h-[220px] resize-y bg-transparent outline-none text-sm px-4 py-3 text-gray-800 placeholder:text-gray-400"
+          />
+          {selectedSkillRecords.length > 0 && (
+            <div className="px-4 pb-2">
+              <div className="flex flex-wrap items-center gap-2">
+                {selectedSkillRecords.map((record) => (
+                  <button
+                    key={record.spec}
+                    type="button"
+                    onClick={() => onSelectedSkillsChange(selectedSkills.filter((skill) => skill !== record.spec))}
+                    className="inline-flex max-w-[200px] items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary"
+                  >
+                    <span className="truncate">{record.label}</span>
+                    <X className="h-3 w-3 shrink-0" />
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+          {/* Toolbar */}
+          <div className="flex items-center justify-between px-3 pb-3">
+            {/* Left group */}
+            <div className="flex items-center gap-1">
+              {/* Skills picker */}
+              <SkillsPicker
+                records={skillRecords}
+                isLoading={isSkillsLoading}
+                selectedSkills={selectedSkills}
+                onSelectedSkillsChange={onSelectedSkillsChange}
+              />
+              {/* Model selector */}
+              <Select
+                value={modelOptions.length > 0 ? selectedModel : undefined}
+                onValueChange={onSelectedModelChange}
+                disabled={modelOptions.length === 0}
+              >
+                <SelectTrigger className="h-8 w-auto min-w-[220px] rounded-lg border-0 bg-transparent shadow-none text-xs font-medium text-gray-600 hover:bg-gray-100 focus:ring-0 px-3">
+                  {selectedModelOption ? (
+                    <div className="flex min-w-0 items-center gap-2 text-left">
+                      <Sparkles className="h-3.5 w-3.5 shrink-0 text-primary" />
+                      <span className="truncate text-xs font-semibold text-gray-700">
+                        {selectedModelOption.providerLabel}/{selectedModelOption.modelLabel}
+                      </span>
+                    </div>
+                  ) : (
+                    <SelectValue placeholder={t('chatSelectModel')} />
+                  )}
+                </SelectTrigger>
+                <SelectContent className="w-[320px]">
+                  {modelOptions.length === 0 && (
+                    <div className="px-3 py-2 text-xs text-gray-500">{t('chatModelNoOptions')}</div>
+                  )}
+                  {modelOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value} className="py-2">
+                      <div className="flex min-w-0 flex-col gap-0.5">
+                        <span className="truncate text-xs font-semibold text-gray-800">{option.modelLabel}</span>
+                        <span className="truncate text-[11px] text-gray-500">{option.providerLabel}</span>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {/* Attachment button (placeholder) */}
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      disabled
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-gray-400 cursor-not-allowed"
+                    >
+                      <Paperclip className="h-4 w-4" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    <p className="text-xs">{t('chatInputAttachComingSoon')}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+            {/* Right group */}
+            <div className="flex flex-col items-end gap-1">
+              {sendError?.trim() && (
+                <div className="max-w-[420px] text-right text-[11px] text-red-600">{sendError}</div>
+              )}
+              <div className="flex items-center gap-2">
+              {isSending && queuedCount > 0 && (
+                <span className="text-[11px] text-gray-400">
+                  {t('chatQueuedHintPrefix')} {queuedCount} {t('chatQueuedHintSuffix')}
+                </span>
+              )}
+              {isSending ? (
+                canStopGeneration ? (
+                  <Button
+                    size="sm"
+                    variant="destructive"
+                    className="rounded-lg"
+                    onClick={() => void onStop()}
+                  >
+                    <Square className="h-3.5 w-3.5 mr-1.5" />
+                    {t('chatStop')}
+                  </Button>
+                ) : (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span>
+                          <Button size="sm" className="rounded-lg" disabled>
+                            <Square className="h-3.5 w-3.5 mr-1.5" />
+                            {t('chatStop')}
+                          </Button>
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent side="top">
+                        <p className="text-xs">{resolvedStopHint}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )
+              ) : (
+                <Button
+                  size="sm"
+                  className="rounded-lg"
+                  onClick={() => void onSend()}
+                  disabled={draft.trim().length === 0}
+                >
+                  <Send className="h-3.5 w-3.5 mr-1.5" />
+                  {t('chatSend')}
+                </Button>
+              )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}