@nextclaw/ui 0.5.19 → 0.5.21

package/src/components/chat/ChatThread.tsx

@@ -0,0 +1,210 @@
+import { useMemo } from 'react';
+import type { SessionMessageView } from '@/api/types';
+import { cn } from '@/lib/utils';
+import { extractMessageText, extractToolCards, groupChatMessages, type ChatRole, type ToolCard } from '@/lib/chat-message';
+import { formatDateTime, t } from '@/lib/i18n';
+import ReactMarkdown from 'react-markdown';
+import rehypeSanitize from 'rehype-sanitize';
+import remarkGfm from 'remark-gfm';
+import { Bot, Clock3, FileSearch, Globe, Search, SendHorizontal, Terminal, User, Wrench } from 'lucide-react';
+
+type ChatThreadProps = {
+  messages: SessionMessageView[];
+  isSending: boolean;
+  className?: string;
+};
+
+const MARKDOWN_MAX_CHARS = 140_000;
+const TOOL_OUTPUT_PREVIEW_MAX = 220;
+
+function trimMarkdown(value: string): string {
+  if (value.length <= MARKDOWN_MAX_CHARS) {
+    return value;
+  }
+  return `${value.slice(0, MARKDOWN_MAX_CHARS)}\n\n…`;
+}
+
+function roleTitle(role: ChatRole): string {
+  if (role === 'user') return t('chatRoleUser');
+  if (role === 'assistant') return t('chatRoleAssistant');
+  if (role === 'tool') return t('chatRoleTool');
+  if (role === 'system') return t('chatRoleSystem');
+  return t('chatRoleMessage');
+}
+
+function renderToolIcon(name: string) {
+  const lowered = name.toLowerCase();
+  if (lowered.includes('exec') || lowered.includes('shell') || lowered.includes('command')) {
+    return <Terminal className="h-3.5 w-3.5" />;
+  }
+  if (lowered.includes('search')) {
+    return <Search className="h-3.5 w-3.5" />;
+  }
+  if (lowered.includes('fetch') || lowered.includes('http') || lowered.includes('web')) {
+    return <Globe className="h-3.5 w-3.5" />;
+  }
+  if (lowered.includes('read') || lowered.includes('file')) {
+    return <FileSearch className="h-3.5 w-3.5" />;
+  }
+  if (lowered.includes('message') || lowered.includes('send')) {
+    return <SendHorizontal className="h-3.5 w-3.5" />;
+  }
+  if (lowered.includes('cron') || lowered.includes('schedule')) {
+    return <Clock3 className="h-3.5 w-3.5" />;
+  }
+  return <Wrench className="h-3.5 w-3.5" />;
+}
+
+function RoleAvatar({ role }: { role: ChatRole }) {
+  if (role === 'user') {
+    return (
+      <div className="h-8 w-8 rounded-full bg-primary text-white flex items-center justify-center shadow-sm">
+        <User className="h-4 w-4" />
+      </div>
+    );
+  }
+  if (role === 'assistant') {
+    return (
+      <div className="h-8 w-8 rounded-full bg-slate-900 text-white flex items-center justify-center shadow-sm">
+        <Bot className="h-4 w-4" />
+      </div>
+    );
+  }
+  return (
+    <div className="h-8 w-8 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center shadow-sm">
+      <Wrench className="h-4 w-4" />
+    </div>
+  );
+}
+
+function MarkdownBlock({ text, role }: { text: string; role: ChatRole }) {
+  const isUser = role === 'user';
+  return (
+    <div className={cn('chat-markdown', isUser ? 'chat-markdown-user' : 'chat-markdown-assistant')}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeSanitize]}
+        components={{
+          a: ({ ...props }) => (
+            <a {...props} target="_blank" rel="noreferrer noopener" />
+          )
+        }}
+      >
+        {trimMarkdown(text)}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+function ToolCardView({ card }: { card: ToolCard }) {
+  const title = card.kind === 'call' ? t('chatToolCall') : t('chatToolResult');
+  const output = card.text?.trim() ?? '';
+  const showDetails = output.length > TOOL_OUTPUT_PREVIEW_MAX || output.includes('\n');
+  const preview = showDetails ? `${output.slice(0, TOOL_OUTPUT_PREVIEW_MAX)}…` : output;
+
+  return (
+    <div className="rounded-xl border border-amber-200/80 bg-amber-50/60 px-3 py-2.5">
+      <div className="flex items-center gap-2 text-xs text-amber-800 font-semibold">
+        {renderToolIcon(card.name)}
+        <span>{title}</span>
+        <span className="font-mono text-[11px] text-amber-900/80">{card.name}</span>
+      </div>
+      {card.detail && (
+        <div className="mt-1 text-[11px] text-amber-800/90 font-mono break-words">{card.detail}</div>
+      )}
+      {card.kind === 'result' && (
+        <div className="mt-2">
+          {!output ? (
+            <div className="text-[11px] text-amber-700/80">{t('chatToolNoOutput')}</div>
+          ) : showDetails ? (
+            <details className="group">
+              <summary className="cursor-pointer text-[11px] text-amber-700">{t('chatToolOutput')}</summary>
+              <pre className="mt-2 rounded-lg border border-amber-200 bg-amber-100/40 p-2 text-[11px] whitespace-pre-wrap break-words text-amber-900">
+                {output}
+              </pre>
+            </details>
+          ) : (
+            <pre className="rounded-lg border border-amber-200 bg-amber-100/40 p-2 text-[11px] whitespace-pre-wrap break-words text-amber-900">
+              {preview}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function MessageCard({ message, role }: { message: SessionMessageView; role: ChatRole }) {
+  const text = extractMessageText(message.content).trim();
+  const toolCards = extractToolCards(message);
+  const reasoning = typeof message.reasoning_content === 'string' ? message.reasoning_content.trim() : '';
+  const shouldRenderText = Boolean(text) && !(role === 'tool' && toolCards.length > 0);
+  const isUser = role === 'user';
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl border px-4 py-3 shadow-sm',
+        isUser
+          ? 'bg-primary text-white border-primary'
+          : role === 'assistant'
+            ? 'bg-white text-gray-900 border-gray-200'
+            : 'bg-orange-50/70 text-gray-900 border-orange-200/80'
+      )}
+    >
+      {shouldRenderText && <MarkdownBlock text={text} role={role} />}
+      {reasoning && (
+        <details className="mt-3">
+          <summary className={cn('cursor-pointer text-xs', isUser ? 'text-primary-100' : 'text-gray-500')}>
+            {t('chatReasoning')}
+          </summary>
+          <pre className={cn('mt-2 text-[11px] whitespace-pre-wrap break-words rounded-lg p-2', isUser ? 'bg-primary-700/60' : 'bg-gray-100')}>
+            {reasoning}
+          </pre>
+        </details>
+      )}
+      {toolCards.length > 0 && (
+        <div className="mt-3 space-y-2">
+          {toolCards.map((card, index) => (
+            <ToolCardView key={`${card.kind}-${card.name}-${card.callId ?? index}`} card={card} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ChatThread({ messages, isSending, className }: ChatThreadProps) {
+  const groups = useMemo(() => groupChatMessages(messages), [messages]);
+
+  return (
+    <div className={cn('space-y-5', className)}>
+      {groups.map((group) => {
+        const isUser = group.role === 'user';
+        return (
+          <div key={group.key} className={cn('flex gap-3', isUser ? 'justify-end' : 'justify-start')}>
+            {!isUser && <RoleAvatar role={group.role} />}
+            <div className={cn('max-w-[88%] min-w-[280px] space-y-2', isUser && 'flex flex-col items-end')}>
+              {group.messages.map((message, index) => (
+                <MessageCard key={`${group.key}-${index}`} message={message} role={group.role} />
+              ))}
+              <div className={cn('text-[11px] px-1', isUser ? 'text-primary-300' : 'text-gray-400')}>
+                {roleTitle(group.role)} · {formatDateTime(group.timestamp)}
+              </div>
+            </div>
+            {isUser && <RoleAvatar role={group.role} />}
+          </div>
+        );
+      })}
+
+      {isSending && (
+        <div className="flex gap-3 justify-start">
+          <RoleAvatar role="assistant" />
+          <div className="rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm">
+            {t('chatTyping')}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/config/CronConfig.tsx

@@ -8,7 +8,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Card, CardContent } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
 import { formatDateTime, t } from '@/lib/i18n';
-import { PageLayout, PageHeader, PageBody } from '@/components/layout/page-layout';
+import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { AlarmClock, RefreshCw, Trash2, Play, Power } from 'lucide-react';
 
 type StatusFilter = 'all' | 'enabled' | 'disabled';

package/src/components/config/SessionsConfig.tsx

@@ -7,7 +7,8 @@ import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
 import { formatDateShort, formatDateTime, t } from '@/lib/i18n';
-import { PageLayout, PageHeader, PageBody } from '@/components/layout/page-layout';
+import { extractMessageText } from '@/lib/chat-message';
+import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { RefreshCw, Search, Clock, Inbox, Hash, Bot, User, MessageCircle, Settings as SettingsIcon } from 'lucide-react';
 
 const UNKNOWN_CHANNEL_KEY = '__unknown_channel__';
@@ -86,6 +87,7 @@ function SessionListItem({ session, channel, isSelected, onSelect }: SessionList
 
 function SessionMessageBubble({ message }: { message: SessionMessageView }) {
   const isUser = message.role.toLowerCase() === 'user';
+  const content = extractMessageText(message.content).trim();
 
   return (
     <div className={cn("flex w-full mb-6", isUser ? "justify-end" : "justify-start")}>
@@ -108,7 +110,7 @@ function SessionMessageBubble({ message }: { message: SessionMessageView }) {
             </span>
           </div>
           <div className="whitespace-pre-wrap break-words leading-relaxed text-[15px]">
-            {message.content}
+            {content || '-'}
           </div>
         </div>
       </div>

package/src/components/layout/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
 import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
-import { Cpu, GitBranch, History, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette } from 'lucide-react';
+import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
 import { useI18n } from '@/components/providers/I18nProvider';
@@ -31,6 +31,11 @@ export function Sidebar() {
   };
 
   const navItems = [
+    {
+      target: '/chat',
+      label: t('chat'),
+      icon: MessageCircle,
+    },
     {
       target: '/model',
       label: t('model'),

package/src/components/marketplace/MarketplacePage.tsx

@@ -28,8 +28,7 @@ const PAGE_SIZE = 12;
 type ScopeType = 'all' | 'installed';
 
 type InstallState = {
-  isPending: boolean;
-  installingSpec?: string;
+  installingSpecs: ReadonlySet<string>;
 };
 
 type ManageState = {
@@ -234,7 +233,8 @@ function MarketplaceListCard(props: {
   const canUninstall = Boolean(canUninstallPlugin || canUninstallSkill);
 
   const isDisabled = record ? (record.enabled === false || record.runtimeStatus === 'disabled') : false;
-  const isInstalling = props.installState.isPending && props.item && props.installState.installingSpec === props.item.install.spec;
+  const installSpec = props.item?.install.spec;
+  const isInstalling = typeof installSpec === 'string' && props.installState.installingSpecs.has(installSpec);
 
   const displayType = type === 'plugin' ? t('marketplaceTypePlugin') : type === 'skill' ? t('marketplaceTypeSkill') : t('marketplaceTypeExtension');
 
@@ -288,7 +288,7 @@ function MarketplaceListCard(props: {
         {props.item && !record && (
           <button
             onClick={() => props.onInstall(props.item as MarketplaceItemSummary)}
-            disabled={props.installState.isPending}
+            disabled={isInstalling}
             className="inline-flex items-center gap-1.5 h-8 px-4 rounded-xl text-xs font-medium bg-primary text-white hover:bg-primary-600 disabled:opacity-50 transition-colors"
           >
             {isInstalling ? t('marketplaceInstalling') : t('marketplaceInstall')}
@@ -405,6 +405,7 @@ export function MarketplacePage() {
   const [scope, setScope] = useState<ScopeType>('all');
   const [sort, setSort] = useState<MarketplaceSort>('relevance');
   const [page, setPage] = useState(1);
+  const [installingSpecs, setInstallingSpecs] = useState<ReadonlySet<string>>(new Set());
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -496,10 +497,7 @@ export function MarketplacePage() {
     return `${allItems.length} / ${total}`;
   }, [scope, installedQuery.isLoading, installedEntries.length, itemsQuery.data, allItems.length, total, copyKeys.installedCountSuffix]);
 
-  const installState: InstallState = {
-    isPending: installMutation.isPending,
-    installingSpec: installMutation.variables?.spec
-  };
+  const installState: InstallState = { installingSpecs };
 
   const manageState: ManageState = {
     isPending: manageMutation.isPending,
@@ -511,21 +509,42 @@ export function MarketplacePage() {
     { id: 'all', label: t(copyKeys.tabMarketplace) },
     { id: 'installed', label: t(copyKeys.tabInstalled), count: installedQuery.data?.total ?? 0 }
   ];
-  const handleInstall = (item: MarketplaceItemSummary) => {
-    if (installMutation.isPending) {
+  const handleInstall = async (item: MarketplaceItemSummary) => {
+    const installSpec = item.install.spec;
+    if (installingSpecs.has(installSpec)) {
       return;
     }
-    installMutation.mutate({
-      type: item.type,
-      spec: item.install.spec,
-      kind: item.install.kind,
-      ...(item.type === 'skill'
-        ? {
-            skill: item.slug,
-            installPath: `skills/${item.slug}`
-          }
-        : {})
+
+    setInstallingSpecs((prev) => {
+      const next = new Set(prev);
+      next.add(installSpec);
+      return next;
     });
+
+    try {
+      await installMutation.mutateAsync({
+        type: item.type,
+        spec: installSpec,
+        kind: item.install.kind,
+        ...(item.type === 'skill'
+          ? {
+              skill: item.slug,
+              installPath: `skills/${item.slug}`
+            }
+          : {})
+      });
+    } catch {
+      // handled in mutation onError
+    } finally {
+      setInstallingSpecs((prev) => {
+        if (!prev.has(installSpec)) {
+          return prev;
+        }
+        const next = new Set(prev);
+        next.delete(installSpec);
+        return next;
+      });
+    }
   };
 
   const handleManage = async (action: MarketplaceManageAction, record: MarketplaceInstalledRecord) => {

package/src/hooks/useConfig.ts

@@ -12,6 +12,7 @@ import {
   fetchSessionHistory,
   updateSession,
   deleteSession,
+  sendChatTurn,
   fetchCronJobs,
   deleteCronJob,
   setCronJobEnabled,
@@ -169,6 +170,16 @@ export function useDeleteSession() {
   });
 }
 
+export function useSendChatTurn() {
+  return useMutation({
+    mutationFn: ({ data }: { data: Parameters<typeof sendChatTurn>[0] }) =>
+      sendChatTurn(data),
+    onError: (error: Error) => {
+      toast.error(t('chatSendFailed') + ': ' + error.message);
+    }
+  });
+}
+
 export function useCronJobs(params: { all?: boolean } = { all: true }) {
   return useQuery({
     queryKey: ['cron', params],

package/src/index.css

@@ -182,3 +182,72 @@
 .animate-pulse-soft {
   animation: pulse-soft 3s ease-in-out infinite;
 }
+
+.chat-markdown {
+  font-size: 0.9rem;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.chat-markdown > * + * {
+  margin-top: 0.5rem;
+}
+
+.chat-markdown h1,
+.chat-markdown h2,
+.chat-markdown h3 {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.chat-markdown ul,
+.chat-markdown ol {
+  padding-left: 1.1rem;
+}
+
+.chat-markdown code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.8rem;
+}
+
+.chat-markdown :not(pre) > code {
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.35rem;
+  background: rgba(148, 163, 184, 0.18);
+}
+
+.chat-markdown pre {
+  overflow-x: auto;
+  border-radius: 0.65rem;
+  padding: 0.65rem 0.75rem;
+  background: rgba(15, 23, 42, 0.9);
+  color: #e2e8f0;
+}
+
+.chat-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+}
+
+.chat-markdown th,
+.chat-markdown td {
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  padding: 0.35rem 0.45rem;
+}
+
+.chat-markdown blockquote {
+  border-left: 3px solid rgba(148, 163, 184, 0.55);
+  padding-left: 0.65rem;
+  color: rgba(30, 41, 59, 0.85);
+}
+
+.chat-markdown-user a {
+  color: #dbeafe;
+  text-decoration: underline;
+}
+
+.chat-markdown-assistant a {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+}

package/src/lib/chat-message.ts

@@ -0,0 +1,215 @@
+import type { SessionMessageView } from '@/api/types';
+
+export type ChatRole = 'user' | 'assistant' | 'tool' | 'system' | 'other';
+
+export type ToolCard = {
+  kind: 'call' | 'result';
+  name: string;
+  detail?: string;
+  text?: string;
+  callId?: string;
+};
+
+export type GroupedChatMessage = {
+  key: string;
+  role: ChatRole;
+  messages: SessionMessageView[];
+  timestamp: string;
+};
+
+const MERGE_WINDOW_MS = 2 * 60 * 1000;
+const TOOL_DETAIL_FIELDS = ['cmd', 'command', 'query', 'q', 'path', 'url', 'to', 'channel', 'agentId', 'sessionKey'];
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function truncateText(value: string, maxChars = 2400): string {
+  if (value.length <= maxChars) {
+    return value;
+  }
+  return `${value.slice(0, maxChars)}\n…`;
+}
+
+function stringifyUnknown(value: unknown): string {
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value);
+  }
+  if (value == null) {
+    return '';
+  }
+  try {
+    return truncateText(JSON.stringify(value, null, 2));
+  } catch {
+    return String(value);
+  }
+}
+
+function parseArgsObject(value: unknown): Record<string, unknown> | null {
+  if (isRecord(value)) {
+    return value;
+  }
+  if (typeof value !== 'string') {
+    return null;
+  }
+  const trimmed = value.trim();
+  if (!trimmed.startsWith('{') && !trimmed.startsWith('[')) {
+    return null;
+  }
+  try {
+    const parsed = JSON.parse(trimmed) as unknown;
+    return isRecord(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+function summarizeToolArgs(args: unknown): string | undefined {
+  const parsed = parseArgsObject(args);
+  if (!parsed) {
+    const text = stringifyUnknown(args).trim();
+    return text ? truncateText(text, 120) : undefined;
+  }
+
+  const items: string[] = [];
+  for (const field of TOOL_DETAIL_FIELDS) {
+    const value = parsed[field];
+    if (typeof value === 'string' && value.trim()) {
+      items.push(`${field}: ${value.trim()}`);
+    } else if (typeof value === 'number' || typeof value === 'boolean') {
+      items.push(`${field}: ${String(value)}`);
+    }
+    if (items.length >= 2) {
+      break;
+    }
+  }
+  if (items.length > 0) {
+    return items.join(' · ');
+  }
+  return truncateText(stringifyUnknown(parsed), 140);
+}
+
+function toToolName(value: unknown): string {
+  if (typeof value !== 'string' || !value.trim()) {
+    return 'tool';
+  }
+  return value.trim();
+}
+
+export function normalizeChatRole(message: Pick<SessionMessageView, 'role' | 'name' | 'tool_call_id' | 'tool_calls'>): ChatRole {
+  const role = message.role.toLowerCase().trim();
+  if (role === 'user') {
+    return 'user';
+  }
+  if (role === 'assistant') {
+    return 'assistant';
+  }
+  if (role === 'system') {
+    return 'system';
+  }
+  if (role === 'tool' || role === 'tool_result' || role === 'toolresult' || role === 'function') {
+    return 'tool';
+  }
+  if (typeof message.tool_call_id === 'string' || Array.isArray(message.tool_calls) || typeof message.name === 'string') {
+    return 'tool';
+  }
+  return 'other';
+}
+
+export function extractMessageText(content: unknown): string {
+  if (typeof content === 'string') {
+    return content;
+  }
+  if (Array.isArray(content)) {
+    const parts: string[] = [];
+    for (const item of content) {
+      if (typeof item === 'string') {
+        parts.push(item);
+        continue;
+      }
+      if (!isRecord(item)) {
+        continue;
+      }
+      if (typeof item.text === 'string') {
+        parts.push(item.text);
+        continue;
+      }
+      if (typeof item.content === 'string') {
+        parts.push(item.content);
+      }
+    }
+    if (parts.length > 0) {
+      return parts.join('\n');
+    }
+  }
+  return stringifyUnknown(content);
+}
+
+export function extractToolCards(message: SessionMessageView): ToolCard[] {
+  const cards: ToolCard[] = [];
+  const toolCalls = Array.isArray(message.tool_calls) ? message.tool_calls : [];
+  for (const call of toolCalls) {
+    if (!isRecord(call)) {
+      continue;
+    }
+    const fn = isRecord(call.function) ? call.function : null;
+    const name = toToolName(fn?.name ?? call.name);
+    const args = fn?.arguments ?? call.arguments;
+    cards.push({
+      kind: 'call',
+      name,
+      detail: summarizeToolArgs(args),
+      callId: typeof call.id === 'string' ? call.id : undefined
+    });
+  }
+
+  const role = normalizeChatRole(message);
+  if (role === 'tool' || typeof message.tool_call_id === 'string') {
+    const text = extractMessageText(message.content).trim();
+    cards.push({
+      kind: 'result',
+      name: toToolName(message.name ?? cards[0]?.name),
+      text,
+      callId: typeof message.tool_call_id === 'string' ? message.tool_call_id : undefined
+    });
+  }
+
+  return cards;
+}
+
+export function groupChatMessages(messages: SessionMessageView[]): GroupedChatMessage[] {
+  const groups: GroupedChatMessage[] = [];
+  let lastTs = 0;
+
+  for (let index = 0; index < messages.length; index += 1) {
+    const message = messages[index];
+    const role = normalizeChatRole(message);
+    const parsedTs = Date.parse(message.timestamp);
+    const ts = Number.isFinite(parsedTs) ? parsedTs : Date.now();
+    const previous = groups[groups.length - 1];
+    const canMerge =
+      previous &&
+      previous.role === role &&
+      Math.abs(ts - lastTs) <= MERGE_WINDOW_MS;
+
+    if (canMerge) {
+      previous.messages.push(message);
+      previous.timestamp = message.timestamp;
+      lastTs = ts;
+      continue;
+    }
+
+    groups.push({
+      key: `${message.timestamp}-${index}-${role}`,
+      role,
+      messages: [message],
+      timestamp: message.timestamp
+    });
+    lastTs = ts;
+  }
+
+  return groups;
+}