@chaaskit/client 0.1.0

package/src/components/MessageItem.tsx

@@ -0,0 +1,300 @@
+import { useState } from 'react';
+import { Copy, Check, RefreshCw, ThumbsUp, ThumbsDown, User, Bot, GitBranch } from 'lucide-react';
+import { useNavigate } from 'react-router';
+import type { Message } from '@chaaskit/shared';
+import { useChatStore } from '../stores/chatStore';
+import { useTheme } from '../contexts/ThemeContext';
+import { useConfig } from '../contexts/ConfigContext';
+import { useAppPath } from '../hooks/useAppPath';
+import MarkdownRenderer from './content/MarkdownRenderer';
+import ToolCallDisplay, { UIResourceWidget } from './ToolCallDisplay';
+import BranchModal from './BranchModal';
+import { MessageContentWithMentions } from './MentionChip';
+
+interface MessageItemProps {
+  message: Message;
+  isStreaming?: boolean;
+  messageIndex?: number;
+  previousMessage?: Message;
+}
+
+export default function MessageItem({ message, isStreaming, messageIndex = 0, previousMessage }: MessageItemProps) {
+  const [copied, setCopied] = useState(false);
+  const [showBranchModal, setShowBranchModal] = useState(false);
+  const [feedback, setFeedback] = useState<'up' | 'down' | null>(null);
+  const { regenerateMessage, branchFromMessage, sendMessage, isStreaming: isGlobalStreaming } = useChatStore();
+  const { theme } = useTheme();
+  const config = useConfig();
+  const navigate = useNavigate();
+  const appPath = useAppPath();
+
+  const isUser = message.role === 'user';
+  const showToolCalls = config.mcp?.showToolCalls !== false;
+
+  // Branching logic:
+  // - Can't branch from first message (nothing to branch from)
+  // - For user messages: branch from previous message, pre-fill with current content
+  // - For assistant messages: branch from this message
+  const canBranch = messageIndex > 0;
+  const branchTargetMessage = isUser ? previousMessage : message;
+  const branchInitialContent = isUser ? message.content : '';
+
+  async function handleCopy() {
+    await navigator.clipboard.writeText(message.content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  async function handleRegenerate() {
+    if (isGlobalStreaming) return;
+    await regenerateMessage(message.id);
+  }
+
+  async function handleBranch(content?: string) {
+    if (!branchTargetMessage) return;
+    // Create the branch (without the new message)
+    const newThread = await branchFromMessage(branchTargetMessage.id);
+    navigate(appPath(`/thread/${newThread.id}`));
+    // If there's content, send it as a message to trigger AI response
+    if (content) {
+      await sendMessage(content);
+    }
+  }
+
+  async function handleFeedback(type: 'up' | 'down') {
+    // Toggle off if clicking the same feedback
+    const newFeedback = feedback === type ? null : type;
+    setFeedback(newFeedback);
+
+    if (newFeedback) {
+      try {
+        await fetch(`/api/chat/feedback/${message.id}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ type: newFeedback }),
+          credentials: 'include',
+        });
+      } catch (error) {
+        console.error('Failed to submit feedback:', error);
+        // Revert on error
+        setFeedback(feedback);
+      }
+    }
+  }
+
+  // For assistant messages, collect tool calls with UI resources
+  const toolCallsWithResults = !isUser && message.toolCalls?.map((toolCall) => ({
+    toolCall,
+    toolResult: message.toolResults?.find((r) => r.toolCallId === toolCall.id),
+  })) || [];
+
+  // Check if any tool has a UI resource to render
+  const uiResources = toolCallsWithResults
+    .filter((tc) => tc.toolResult?.uiResource?.text)
+    .map((tc) => tc.toolResult!.uiResource!);
+
+  // Debug logging
+  if (!isUser && message.toolCalls?.length) {
+    console.log('[MessageItem] Rendering message with toolCalls:', message.toolCalls.length);
+    console.log('[MessageItem] toolResults:', message.toolResults?.length || 0, message.toolResults?.map(tr => ({ id: tr.toolCallId, hasUiResource: !!tr.uiResource, textLen: tr.uiResource?.text?.length })));
+    console.log('[MessageItem] uiResources to render:', uiResources.length);
+  }
+
+  // User messages render normally
+  if (isUser) {
+    return (
+      <>
+        <div className="group flex gap-3 flex-row-reverse animate-fade-in">
+          {/* Avatar */}
+          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-primary">
+            <User size={12} className="text-white" />
+          </div>
+
+          {/* Message Content */}
+          <div className="flex max-w-[85%] flex-col sm:max-w-[80%] items-end">
+            <div className="rounded-lg px-3 py-2 sm:px-3 sm:py-2 bg-user-message-bg text-user-message-text">
+              <p className="whitespace-pre-wrap text-sm">
+                <MessageContentWithMentions content={message.content} />
+              </p>
+            </div>
+
+            {/* File Attachments */}
+            {message.files && message.files.length > 0 && (
+              <div className="mt-2 flex flex-wrap gap-2">
+                {message.files.map((file) => (
+                  <div
+                    key={file.id}
+                    className="rounded-lg bg-background-secondary px-3 py-1 text-sm text-text-secondary"
+                  >
+                    {file.name}
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Action Buttons */}
+            <div className="mt-2 flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 touch-device:opacity-100 sm:gap-1">
+              <button
+                onClick={handleCopy}
+                className="rounded p-1.5 text-text-muted hover:bg-background-secondary hover:text-text-primary active:bg-background-secondary sm:p-1"
+                title="Copy"
+                aria-label="Copy message"
+              >
+                {copied ? <Check size={16} className="sm:h-[14px] sm:w-[14px]" /> : <Copy size={16} className="sm:h-[14px] sm:w-[14px]" />}
+              </button>
+              {canBranch && (
+                <button
+                  onClick={() => setShowBranchModal(true)}
+                  disabled={isGlobalStreaming}
+                  className="rounded p-1.5 text-text-muted hover:bg-background-secondary hover:text-text-primary active:bg-background-secondary disabled:opacity-50 sm:p-1"
+                  title="Edit and resend this message"
+                  aria-label="Branch conversation with edited message"
+                >
+                  <GitBranch size={16} className="sm:h-[14px] sm:w-[14px]" />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Branch Modal - for user messages, we branch from previous message */}
+        {canBranch && branchTargetMessage && (
+          <BranchModal
+            isOpen={showBranchModal}
+            onClose={() => setShowBranchModal(false)}
+            onBranch={handleBranch}
+            messagePreview={branchTargetMessage.content.slice(0, 200) + (branchTargetMessage.content.length > 200 ? '...' : '')}
+            initialContent={branchInitialContent}
+          />
+        )}
+      </>
+    );
+  }
+
+  // Assistant messages: Tool calls → UI widgets → Text response
+  return (
+    <div className="animate-fade-in space-y-3">
+      {/* 1. Tool Execution Cards (outside bubble) */}
+      {showToolCalls && toolCallsWithResults.length > 0 && (
+        <div className="space-y-2">
+          {toolCallsWithResults.map(({ toolCall, toolResult }) => (
+            <ToolCallDisplay
+              key={toolCall.id}
+              toolCall={toolCall}
+              toolResult={toolResult}
+              hideUiResource
+            />
+          ))}
+        </div>
+      )}
+
+      {/* 2. UI Resource Widgets (outside bubble, full width) */}
+      {uiResources.length > 0 && (
+        <div className="space-y-3">
+          {uiResources.map((uiResource, index) => (
+            <UIResourceWidget key={index} uiResource={uiResource} theme={theme} />
+          ))}
+        </div>
+      )}
+
+      {/* 3. Text Response Bubble (with avatar) */}
+      {(message.content || isStreaming) && (
+        <div className="group flex gap-3">
+          {/* Avatar */}
+          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-secondary overflow-hidden">
+            {config.ui?.logo ? (
+              <img src={typeof config.ui.logo === 'string' ? config.ui.logo : (theme === 'dark' ? config.ui.logo.dark : config.ui.logo.light)} alt="" className="h-full w-full object-cover" />
+            ) : (
+              <Bot size={12} className="text-white" />
+            )}
+          </div>
+
+          {/* Message Content */}
+          <div className="flex max-w-[85%] flex-col sm:max-w-[80%] items-start">
+            <div className="rounded-lg px-3 py-2 sm:px-3 sm:py-2 bg-assistant-message-bg text-assistant-message-text">
+              <div className="markdown-content text-sm">
+                <MarkdownRenderer content={message.content} />
+                {isStreaming && (
+                  <span className="typing-indicator ml-1">
+                    <span className="inline-block h-2 w-2 rounded-full bg-current" />
+                    <span className="ml-1 inline-block h-2 w-2 rounded-full bg-current" />
+                    <span className="ml-1 inline-block h-2 w-2 rounded-full bg-current" />
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            {!isStreaming && (
+              <div className="mt-2 flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 touch-device:opacity-100 sm:gap-1">
+                <button
+                  onClick={handleCopy}
+                  className="rounded p-1.5 text-text-muted hover:bg-background-secondary hover:text-text-primary active:bg-background-secondary sm:p-1"
+                  title="Copy"
+                  aria-label="Copy message"
+                >
+                  {copied ? <Check size={16} className="sm:h-[14px] sm:w-[14px]" /> : <Copy size={16} className="sm:h-[14px] sm:w-[14px]" />}
+                </button>
+                <button
+                  onClick={handleRegenerate}
+                  disabled={isGlobalStreaming}
+                  className="rounded p-1.5 text-text-muted hover:bg-background-secondary hover:text-text-primary active:bg-background-secondary disabled:opacity-50 sm:p-1"
+                  title="Regenerate"
+                  aria-label="Regenerate response"
+                >
+                  <RefreshCw size={16} className="sm:h-[14px] sm:w-[14px]" />
+                </button>
+                {canBranch && (
+                  <button
+                    onClick={() => setShowBranchModal(true)}
+                    disabled={isGlobalStreaming}
+                    className="rounded p-1.5 text-text-muted hover:bg-background-secondary hover:text-text-primary active:bg-background-secondary disabled:opacity-50 sm:p-1"
+                    title="Branch from here"
+                    aria-label="Branch conversation from this message"
+                  >
+                    <GitBranch size={16} className="sm:h-[14px] sm:w-[14px]" />
+                  </button>
+                )}
+                <button
+                  onClick={() => handleFeedback('up')}
+                  className={`rounded p-1.5 sm:p-1 ${
+                    feedback === 'up'
+                      ? 'bg-success/20 text-success'
+                      : 'text-text-muted hover:bg-success/10 hover:text-success active:bg-success/10'
+                  }`}
+                  title="Good response"
+                  aria-label="Mark as good response"
+                >
+                  <ThumbsUp size={16} className="sm:h-[14px] sm:w-[14px]" />
+                </button>
+                <button
+                  onClick={() => handleFeedback('down')}
+                  className={`rounded p-1.5 sm:p-1 ${
+                    feedback === 'down'
+                      ? 'bg-error/20 text-error'
+                      : 'text-text-muted hover:bg-error/10 hover:text-error active:bg-error/10'
+                  }`}
+                  title="Bad response"
+                  aria-label="Mark as bad response"
+                >
+                  <ThumbsDown size={16} className="sm:h-[14px] sm:w-[14px]" />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Branch Modal */}
+      {canBranch && branchTargetMessage && (
+        <BranchModal
+          isOpen={showBranchModal}
+          onClose={() => setShowBranchModal(false)}
+          onBranch={handleBranch}
+          messagePreview={branchTargetMessage.content.slice(0, 200) + (branchTargetMessage.content.length > 200 ? '...' : '')}
+          initialContent={branchInitialContent}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/MessageList.tsx

@@ -0,0 +1,159 @@
+import { useRef, useEffect } from 'react';
+import type { Message, MCPContent, UIResource } from '@chaaskit/shared';
+import { Bot } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+import { useConfig } from '../contexts/ConfigContext';
+import MessageItem from './MessageItem';
+import ToolCallDisplay, { UIResourceWidget } from './ToolCallDisplay';
+
+interface PendingToolCall {
+  id: string;
+  name: string;
+  serverId: string;
+  input: Record<string, unknown>;
+}
+
+interface CompletedToolCall extends PendingToolCall {
+  result: MCPContent[];
+  isError?: boolean;
+  uiResource?: UIResource;
+}
+
+interface MessageListProps {
+  messages: Message[];
+  streamingContent?: string;
+  pendingToolCalls?: PendingToolCall[];
+  completedToolCalls?: CompletedToolCall[];
+}
+
+export default function MessageList({
+  messages,
+  streamingContent,
+  pendingToolCalls = [],
+  completedToolCalls = [],
+}: MessageListProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const { theme } = useTheme();
+  const config = useConfig();
+  const showToolCalls = config.mcp?.showToolCalls !== false;
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, streamingContent, pendingToolCalls, completedToolCalls]);
+
+  const hasToolActivity = pendingToolCalls.length > 0 || completedToolCalls.length > 0;
+  const isStreaming = Boolean(streamingContent) || hasToolActivity;
+
+  // Get UI resources from completed tool calls for separate rendering
+  const uiResources = completedToolCalls
+    .filter((tc) => tc.uiResource?.text)
+    .map((tc) => tc.uiResource!);
+
+  // Debug logging
+  console.log('[MessageList] Rendering messages:', messages.length, 'isStreaming:', isStreaming);
+  messages.forEach((msg, i) => {
+    if (msg.role === 'assistant' && msg.toolCalls?.length) {
+      console.log(`[MessageList] Message ${i} has toolCalls:`, msg.toolCalls.length, 'toolResults:', msg.toolResults?.length || 0);
+      console.log(`[MessageList] Message ${i} uiResources:`, msg.toolResults?.filter(tr => tr.uiResource?.text).length || 0);
+    }
+  });
+  if (completedToolCalls.length > 0) {
+    console.log('[MessageList] Streaming completedToolCalls:', completedToolCalls.length);
+    console.log('[MessageList] completedToolCalls uiResources:', completedToolCalls.map(tc => ({ name: tc.name, hasUiResource: !!tc.uiResource, textLen: tc.uiResource?.text?.length })));
+    console.log('[MessageList] uiResources to render:', uiResources.length);
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-3 py-3 sm:px-4 sm:py-6">
+      <div className="space-y-3 sm:space-y-4">
+        {messages.map((message, index) => (
+          <MessageItem
+            key={message.id}
+            message={message}
+            messageIndex={index}
+            previousMessage={index > 0 ? messages[index - 1] : undefined}
+          />
+        ))}
+
+        {/* Streaming message: Tool calls → UI widgets → Text response */}
+        {isStreaming && (
+          <div className="animate-fade-in space-y-3">
+            {/* 1. Tool Execution Cards (outside bubble) */}
+            {showToolCalls && hasToolActivity && (
+              <div className="space-y-2">
+                {/* Completed tool calls */}
+                {completedToolCalls.map((call) => (
+                  <ToolCallDisplay
+                    key={call.id}
+                    toolCall={{
+                      id: call.id,
+                      serverId: call.serverId,
+                      toolName: call.name,
+                      arguments: call.input,
+                      status: call.isError ? 'error' : 'completed',
+                    }}
+                    toolResult={{
+                      toolCallId: call.id,
+                      content: call.result,
+                      isError: call.isError,
+                    }}
+                    hideUiResource
+                  />
+                ))}
+
+                {/* Pending tool calls */}
+                {pendingToolCalls.map((call) => (
+                  <ToolCallDisplay
+                    key={call.id}
+                    toolCall={{
+                      id: call.id,
+                      serverId: call.serverId,
+                      toolName: call.name,
+                      arguments: call.input,
+                      status: 'pending',
+                    }}
+                    isPending
+                  />
+                ))}
+              </div>
+            )}
+
+            {/* 2. UI Resource Widgets (outside bubble, full width) */}
+            {uiResources.length > 0 && (
+              <div className="space-y-3">
+                {uiResources.map((uiResource, index) => (
+                  <UIResourceWidget key={index} uiResource={uiResource} theme={theme} />
+                ))}
+              </div>
+            )}
+
+            {/* 3. Text Response Bubble (with avatar) */}
+            {streamingContent && (
+              <div className="group flex gap-3">
+                {/* Avatar */}
+                <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-secondary">
+                  <Bot size={12} className="text-white" />
+                </div>
+
+                {/* Content */}
+                <div className="flex max-w-[85%] flex-col sm:max-w-[80%] items-start">
+                  <div className="rounded-lg px-3 py-2 sm:px-3 sm:py-2 bg-assistant-message-bg text-assistant-message-text">
+                    <div className="markdown-content text-sm">
+                      <span className="whitespace-pre-wrap">{streamingContent}</span>
+                      <span className="typing-indicator ml-1">
+                        <span className="inline-block h-2 w-2 rounded-full bg-current" />
+                        <span className="ml-1 inline-block h-2 w-2 rounded-full bg-current" />
+                        <span className="ml-1 inline-block h-2 w-2 rounded-full bg-current" />
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+      <div ref={bottomRef} />
+    </div>
+  );
+}

package/src/components/OAuthAppsSection.tsx

@@ -0,0 +1,124 @@
+import { useState, useEffect } from 'react';
+import { Loader2, ExternalLink, Trash2, Shield } from 'lucide-react';
+import { useConfig } from '../contexts/ConfigContext';
+import { api } from '../utils/api';
+
+interface OAuthApp {
+  clientId: string;
+  clientName: string;
+  clientUri?: string;
+  scope?: string;
+  authorizedAt: string;
+}
+
+export default function OAuthAppsSection() {
+  const config = useConfig();
+  const [apps, setApps] = useState<OAuthApp[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [revokingId, setRevokingId] = useState<string | null>(null);
+
+  // Check if OAuth is enabled
+  const oauthEnabled = config.mcp?.server?.oauth?.enabled;
+
+  useEffect(() => {
+    if (oauthEnabled) {
+      loadApps();
+    }
+  }, [oauthEnabled]);
+
+  async function loadApps() {
+    setIsLoading(true);
+    try {
+      const response = await api.get<{ apps: OAuthApp[] }>('/api/oauth/apps');
+      setApps(response.apps);
+    } catch (error) {
+      console.error('Failed to load OAuth apps:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function handleRevoke(clientId: string) {
+    setRevokingId(clientId);
+    try {
+      await api.delete(`/api/oauth/apps/${clientId}`);
+      setApps((prev) => prev.filter((app) => app.clientId !== clientId));
+    } catch (error) {
+      console.error('Failed to revoke app:', error);
+    } finally {
+      setRevokingId(null);
+    }
+  }
+
+  // Don't render if OAuth is not enabled
+  if (!oauthEnabled) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-lg border border-border bg-background-secondary p-4">
+      <div className="mb-3 flex items-center gap-2">
+        <Shield size={18} className="text-primary" />
+        <h3 className="font-medium text-text-primary">Connected Applications</h3>
+      </div>
+
+      {isLoading ? (
+        <div className="flex items-center justify-center py-4">
+          <Loader2 className="h-5 w-5 animate-spin text-text-muted" />
+        </div>
+      ) : apps.length === 0 ? (
+        <p className="text-sm text-text-muted">
+          No applications have been authorized to access your account.
+        </p>
+      ) : (
+        <div className="space-y-3">
+          {apps.map((app) => (
+            <div
+              key={app.clientId}
+              className="flex items-center justify-between rounded-lg border border-border bg-background p-3"
+            >
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-text-primary truncate">
+                    {app.clientName}
+                  </span>
+                  {app.clientUri && (
+                    <a
+                      href={app.clientUri}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-text-muted hover:text-primary"
+                    >
+                      <ExternalLink size={14} />
+                    </a>
+                  )}
+                </div>
+                <div className="mt-0.5 text-xs text-text-muted">
+                  Authorized {new Date(app.authorizedAt).toLocaleDateString()}
+                  {app.scope && (
+                    <span className="ml-2">
+                      Scopes: {app.scope}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <button
+                onClick={() => handleRevoke(app.clientId)}
+                disabled={revokingId === app.clientId}
+                className="ml-3 flex items-center gap-1 rounded-lg px-2 py-1 text-xs text-error hover:bg-error/10 disabled:opacity-50"
+              >
+                {revokingId === app.clientId ? (
+                  <Loader2 size={12} className="animate-spin" />
+                ) : (
+                  <Trash2 size={12} />
+                )}
+                Revoke
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}