@ateam-ai-mobile/ui 0.1.0

package/src/chat/MessageBubble.tsx

@@ -0,0 +1,494 @@
+import { useState, useCallback } from 'react';
+import { View, Text, Pressable, StyleSheet, Image, Platform } from 'react-native';
+import Markdown from 'react-native-markdown-display';
+import type { Message, ToolCall } from '@ateam-ai-mobile/core';
+import { TABLE_BLOCK_OPEN, TABLE_BLOCK_CLOSE, getConfig, ada, borderRadius, fontSize } from '@ateam-ai-mobile/core';
+import { AdaOrb, getHaptics } from '@ateam-ai-mobile/plugin-runtime';
+import JobProgressBar from './JobProgressBar';
+import UIActionsRow from './UIActionsRow';
+import TableCardBlock from './TableCardBlock';
+import { useLightboxStore } from '../stores/lightboxStore';
+import { getClipboard } from '../providers';
+
+const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
+
+interface Props {
+  message: Message;
+}
+
+function formatTime(date: Date): string {
+  const h = date.getHours();
+  const m = date.getMinutes().toString().padStart(2, '0');
+  return `${h}:${m}`;
+}
+
+export function DaySeparator({ date }: { date: Date }) {
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  let label: string;
+  if (isSameDay(date, today)) {
+    label = 'Today';
+  } else if (isSameDay(date, yesterday)) {
+    label = 'Yesterday';
+  } else {
+    label = date.toLocaleDateString(undefined, { weekday: 'long', month: 'short', day: 'numeric' });
+  }
+
+  return (
+    <View style={separatorStyles.container}>
+      <View style={separatorStyles.pill}>
+        <Text style={separatorStyles.text}>{label}</Text>
+      </View>
+    </View>
+  );
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+
+const separatorStyles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    marginVertical: 14,
+  },
+  pill: {
+    backgroundColor: ada.paperSoft,
+    paddingHorizontal: 14,
+    paddingVertical: 5,
+    borderRadius: 999,
+  },
+  text: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: ada.inkMuted,
+    letterSpacing: 0.4,
+    fontFamily: fontFam,
+  },
+});
+
+export default function MessageBubble({ message }: Props) {
+  const isUser = message.role === 'user';
+  const isSystem = message.role === 'system';
+  const isNotification = !isUser && message.kind === 'notification';
+  const [copied, setCopied] = useState('');
+
+  const showCopied = useCallback((label: string) => {
+    setCopied(label);
+    getHaptics()?.notification('success');
+    setTimeout(() => setCopied(''), 1500);
+  }, []);
+
+  const copyText = useCallback(async (text: string) => {
+    const clipboard = getClipboard();
+    if (!clipboard) return; // no provider — silently skip (no false "Copied!")
+    await clipboard.setString(text);
+    showCopied('Copied!');
+  }, [showCopied]);
+
+  const handleLongPress = useCallback(() => {
+    copyText(message.content);
+  }, [message.content, copyText]);
+
+  return (
+    <View style={[styles.row, isUser && styles.rowUser]}>
+      {!isUser && !isNotification && (
+        <View style={styles.avatarOrb}>
+          <AdaOrb
+            size={28}
+            state={message.jobProgress?.status === 'running' ? 'thinking' : 'idle'}
+          />
+        </View>
+      )}
+      {isNotification && <View style={styles.notificationLeftStripe} />}
+      <Pressable
+        accessibilityRole="text"
+        accessibilityLabel={`${isUser ? 'You' : isNotification ? 'Notification' : 'Ada'}: ${message.content}`}
+        accessibilityHint="Long-press to copy"
+        onLongPress={handleLongPress}
+        style={[
+          styles.bubble,
+          isUser && styles.bubbleUser,
+          isSystem && styles.bubbleSystem,
+          isNotification && styles.bubbleNotification,
+        ]}
+      >
+        {isNotification && (
+          <View style={styles.notificationHeader}>
+            <Text style={styles.notificationHeaderIcon}>🔔</Text>
+            <Text style={styles.notificationHeaderText}>Notification</Text>
+          </View>
+        )}
+        {/* Attachment thumbnails */}
+        {message.attachments && message.attachments.length > 0 && (
+          <View style={styles.attachments}>
+            {message.attachments.map((att, i) => (
+              att.previewUri ? (
+                <Pressable
+                  key={i}
+                  accessibilityRole="imagebutton"
+                  accessibilityLabel={`Photo${att.name ? `: ${att.name}` : ''}. Tap to enlarge.`}
+                  onPress={() => useLightboxStore.getState().show(att.previewUri!)}
+                >
+                  <Image
+                    source={{
+                      uri: att.previewUri,
+                      ...(att.previewUri.startsWith('http') ? {
+                        headers: { Authorization: `Bearer ${getConfig().tokenProvider.getToken()}` },
+                      } : {}),
+                    }}
+                    style={styles.attachmentImage}
+                    resizeMode="cover"
+                    onError={(e) => console.warn('[Image] Failed to load:', att.previewUri?.slice(0, 100), e.nativeEvent.error)}
+                  />
+                </Pressable>
+              ) : (
+                <View key={i} style={styles.attachmentFile}>
+                  <Text style={styles.attachmentFileName} numberOfLines={1}>{att.name}</Text>
+                </View>
+              )
+            ))}
+          </View>
+        )}
+        {isUser ? (
+          // Hide the "See attachment" placeholder when the bubble already shows the photo.
+          message.content && !(message.content === 'See attachment' && message.attachments?.length) ? (
+            <Text selectable style={styles.userText}>{message.content}</Text>
+          ) : null
+        ) : (
+          renderAssistantContent(message.content, copyText)
+        )}
+        {!!copied && (
+          <View style={styles.copiedBadge}>
+            <Text style={styles.copiedText}>{copied}</Text>
+          </View>
+        )}
+        {message.toolCalls && message.toolCalls.length > 0 && (
+          <ToolCallsBadge calls={message.toolCalls} />
+        )}
+        {message.jobProgress && (
+          <JobProgressBar progress={message.jobProgress} />
+        )}
+        {!isUser && message.actions && message.actions.length > 0 && (
+          <UIActionsRow actions={message.actions} />
+        )}
+        <Text style={[styles.timeText, isUser && styles.timeTextUser]}>
+          {formatTime(message.timestamp)}
+        </Text>
+      </Pressable>
+      {isUser && <View style={styles.avatarSpacer} />}
+    </View>
+  );
+}
+
+/**
+ * Split assistant content on table-block sentinels and render each segment:
+ * markdown text → <Markdown>, table payload → <TableCardBlock>. Falls back
+ * to plain markdown when no sentinels are present (the common case).
+ */
+function renderAssistantContent(content: string, copyText: (s: string) => void) {
+  if (!content) return null;
+  if (!content.includes(TABLE_BLOCK_OPEN)) {
+    return <MarkdownBubble content={content} copyText={copyText} />;
+  }
+
+  const segments: Array<{ kind: 'md' | 'table'; content: string }> = [];
+  let cursor = 0;
+  while (cursor < content.length) {
+    const open = content.indexOf(TABLE_BLOCK_OPEN, cursor);
+    if (open === -1) {
+      segments.push({ kind: 'md', content: content.slice(cursor) });
+      break;
+    }
+    if (open > cursor) {
+      segments.push({ kind: 'md', content: content.slice(cursor, open) });
+    }
+    const close = content.indexOf(TABLE_BLOCK_CLOSE, open + TABLE_BLOCK_OPEN.length);
+    if (close === -1) {
+      // Unterminated marker — render the rest as markdown so we don't lose data.
+      segments.push({ kind: 'md', content: content.slice(open) });
+      break;
+    }
+    const payload = content.slice(open + TABLE_BLOCK_OPEN.length, close);
+    segments.push({ kind: 'table', content: payload });
+    cursor = close + TABLE_BLOCK_CLOSE.length;
+  }
+
+  return (
+    <>
+      {segments.map((seg, i) => {
+        if (seg.kind === 'md') {
+          const trimmed = seg.content.trim();
+          if (!trimmed) return null;
+          return <MarkdownBubble key={i} content={seg.content} copyText={copyText} />;
+        }
+        try {
+          const data = JSON.parse(decodeURIComponent(seg.content));
+          return <TableCardBlock key={i} columns={data.columns} rows={data.rows} />;
+        } catch {
+          return null;
+        }
+      })}
+    </>
+  );
+}
+
+function MarkdownBubble({ content, copyText }: { content: string; copyText: (s: string) => void }) {
+  return (
+    <Markdown
+      style={markdownStyles}
+      rules={{
+        code_inline: (node) => (
+          <Text
+            key={node.key}
+            style={markdownStyles.code_inline}
+            onPress={() => copyText(node.content)}
+          >
+            {node.content}
+          </Text>
+        ),
+        fence: (node) => (
+          <Pressable
+            key={node.key}
+            onPress={() => copyText(node.content)}
+            style={markdownStyles.fence}
+          >
+            <Text style={markdownStyles.fenceText}>{node.content}</Text>
+          </Pressable>
+        ),
+      }}
+    >
+      {content}
+    </Markdown>
+  );
+}
+
+function ToolCallsBadge({ calls }: { calls: ToolCall[] }) {
+  const [expanded, setExpanded] = useState(false);
+  const label = calls
+    .filter(c => c.name === 'send_message_to_skill')
+    .map(c => (c.args as any).skill_name || c.skill)
+    .filter(Boolean)
+    .join(', ') || 'Tool call';
+
+  return (
+    <View style={styles.toolCalls}>
+      <Pressable style={styles.toolToggle} onPress={() => setExpanded(!expanded)}>
+        <Text style={styles.toolLabel}>{label}</Text>
+        <Text style={styles.toolChevron}>{expanded ? '▲' : '▼'}</Text>
+      </Pressable>
+      {expanded && calls.map((tc, i) => (
+        <View key={i} style={styles.toolItem}>
+          <Text style={styles.toolName}>{tc.name}</Text>
+          {tc.skill && <Text style={styles.toolSkill}>{tc.skill}</Text>}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginBottom: 12,
+    paddingHorizontal: 12,
+    gap: 8,
+  },
+  rowUser: {
+    justifyContent: 'flex-end',
+  },
+  avatarOrb: {
+    width: 28,
+    height: 28,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  avatarSpacer: {
+    width: 28,
+    height: 28,
+  },
+  bubble: {
+    maxWidth: '78%',
+    backgroundColor: ada.botBubble,
+    borderWidth: 1,
+    borderColor: ada.botBubbleBorder,
+    borderRadius: borderRadius.xl,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  bubbleUser: {
+    backgroundColor: ada.userBubble,
+    borderColor: 'transparent',
+  },
+  bubbleSystem: {
+    backgroundColor: ada.orangeSoft,
+    borderColor: ada.orange,
+    maxWidth: '90%',
+  },
+  bubbleNotification: {
+    backgroundColor: ada.orangeSoft,
+    borderColor: 'rgba(255, 122, 40, 0.35)',
+    borderRadius: borderRadius.lg,
+    maxWidth: '90%',
+  },
+  notificationLeftStripe: {
+    width: 3,
+    alignSelf: 'stretch',
+    backgroundColor: ada.orange,
+    borderRadius: 2,
+    marginRight: 4,
+  },
+  notificationHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    marginBottom: 6,
+  },
+  notificationHeaderIcon: {
+    fontSize: 12,
+  },
+  notificationHeaderText: {
+    color: ada.orangeDeep,
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 0.6,
+    textTransform: 'uppercase',
+    fontFamily: fontFam,
+  },
+  userText: {
+    color: ada.userBubbleText,
+    fontSize: fontSize.md,
+    lineHeight: 22,
+    fontFamily: fontFam,
+  },
+  timeText: {
+    fontSize: 11,
+    color: ada.inkMuted,
+    alignSelf: 'flex-end',
+    marginTop: 4,
+    fontFamily: fontFam,
+  },
+  timeTextUser: {
+    color: 'rgba(250,246,238,0.55)',
+  },
+  attachments: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+    marginBottom: 8,
+  },
+  attachmentImage: {
+    width: 120,
+    height: 90,
+    borderRadius: 8,
+  },
+  attachmentFile: {
+    backgroundColor: 'rgba(255,255,255,0.15)',
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  attachmentFileName: {
+    color: 'rgba(255,255,255,0.8)',
+    fontSize: 11,
+    maxWidth: 100,
+  },
+  copiedBadge: {
+    position: 'absolute',
+    top: 6,
+    right: 6,
+    backgroundColor: '#5A8A5C',
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: borderRadius.sm,
+  },
+  copiedText: {
+    color: '#fff',
+    fontSize: fontSize.xs,
+    fontWeight: '600',
+  },
+  toolCalls: {
+    marginTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: ada.border,
+    paddingTop: 6,
+  },
+  toolToggle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  toolLabel: {
+    color: ada.inkSoft,
+    fontSize: fontSize.xs,
+    fontWeight: '500',
+  },
+  toolChevron: {
+    color: ada.inkMuted,
+    fontSize: 8,
+  },
+  toolItem: {
+    marginTop: 4,
+    paddingLeft: 8,
+  },
+  toolName: {
+    color: ada.inkSoft,
+    fontSize: fontSize.xs,
+    fontFamily: 'monospace',
+  },
+  toolSkill: {
+    color: ada.orangeDeep,
+    fontSize: fontSize.xs,
+  },
+});
+
+const markdownStyles = StyleSheet.create({
+  body: {
+    color: ada.botBubbleText,
+    fontSize: fontSize.md,
+    lineHeight: 22,
+    fontFamily: fontFam,
+  },
+  paragraph: {
+    marginTop: 0,
+    marginBottom: 4,
+  },
+  strong: {
+    fontWeight: '700',
+    color: ada.botBubbleText,
+  },
+  em: {
+    fontStyle: 'italic',
+  },
+  code_inline: {
+    backgroundColor: ada.paperDeep,
+    color: ada.orangeDeep,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    borderRadius: 4,
+    fontFamily: 'monospace',
+    fontSize: fontSize.sm,
+  },
+  fence: {
+    backgroundColor: ada.paperDeep,
+    padding: 10,
+    borderRadius: 10,
+  },
+  fenceText: {
+    fontFamily: 'monospace',
+    fontSize: fontSize.sm,
+    color: ada.ink,
+  },
+  link: {
+    color: ada.orangeDeep,
+  },
+  list_item: {
+    color: ada.botBubbleText,
+  },
+  bullet_list: {
+    marginVertical: 4,
+  },
+});

package/src/chat/TableCardBlock.tsx

@@ -0,0 +1,96 @@
+import { View, Text, StyleSheet, Platform } from 'react-native';
+import { ada, borderRadius, fontSize, spacing } from '@ateam-ai-mobile/core';
+
+const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
+
+interface Props {
+  columns: string[];
+  rows: any[][];
+}
+
+/**
+ * Renders tabular data as a vertical stack of cards — one card per row.
+ * The first column becomes the card title; remaining columns become
+ * key:value rows inside the card. Built specifically for narrow phone
+ * screens where horizontal markdown tables become unreadable.
+ */
+export default function TableCardBlock({ columns, rows }: Props) {
+  if (!columns?.length || !rows?.length) return null;
+
+  const [titleCol, ...detailCols] = columns;
+
+  return (
+    <View style={styles.wrap}>
+      {rows.map((row, i) => {
+        const cells = Array.isArray(row) ? row : [row];
+        const title = cells[0];
+        return (
+          <View key={i} style={styles.card}>
+            <Text style={styles.title}>{String(title ?? '')}</Text>
+            {detailCols.length > 0 && (
+              <View style={styles.details}>
+                {detailCols.map((col, ci) => {
+                  const value = cells[ci + 1];
+                  if (value == null || value === '') return null;
+                  return (
+                    <View key={ci} style={styles.row}>
+                      <Text style={styles.label}>{String(col)}</Text>
+                      <Text style={styles.value}>{String(value)}</Text>
+                    </View>
+                  );
+                })}
+              </View>
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    marginVertical: 6,
+    gap: 8,
+  },
+  card: {
+    backgroundColor: ada.paper,
+    borderRadius: borderRadius.md,
+    borderWidth: 1,
+    borderColor: ada.border,
+    padding: spacing.md,
+  },
+  title: {
+    color: ada.ink,
+    fontSize: fontSize.md,
+    fontWeight: '600',
+    fontFamily: fontFam,
+    letterSpacing: -0.2,
+    marginBottom: 6,
+  },
+  details: {
+    gap: 4,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+  },
+  label: {
+    color: ada.inkMuted,
+    fontSize: fontSize.xs,
+    fontFamily: fontFam,
+    fontWeight: '500',
+    width: 84,
+    textTransform: 'uppercase',
+    letterSpacing: 0.6,
+    paddingTop: 2,
+  },
+  value: {
+    flex: 1,
+    color: ada.inkSoft,
+    fontSize: fontSize.sm,
+    fontFamily: fontFam,
+    lineHeight: 18,
+  },
+});

package/src/chat/TypingIndicator.tsx

@@ -0,0 +1,20 @@
+import { View, StyleSheet } from 'react-native';
+import { AdaOrb } from '@ateam-ai-mobile/plugin-runtime';
+
+export default function TypingIndicator() {
+  return (
+    <View style={styles.row}>
+      <AdaOrb size={32} state="thinking" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 4,
+  },
+});