@ateam-ai-mobile/ui 0.1.0

package/src/chat/ChatInput.tsx

@@ -0,0 +1,134 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import {
+  View,
+  TextInput,
+  Pressable,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import Svg, { Path, Line, Polygon } from 'react-native-svg';
+import { colors, borderRadius } from '@ateam-ai-mobile/core';
+import { getHaptics } from '@ateam-ai-mobile/plugin-runtime';
+
+interface Props {
+  onSend: (text: string) => void;
+  onCallStart?: () => void;
+  loading: boolean;
+  /** Pre-fill the composer (e.g. from bridge.prepareMessage). The text is
+   *  placed in the input and focused — not sent. */
+  prefill?: string;
+  placeholder?: string;
+}
+
+export default function ChatInput({ onSend, onCallStart, loading, prefill, placeholder }: Props) {
+  const [text, setText] = useState('');
+  const [height, setHeight] = useState(40);
+  const inputRef = useRef<TextInput>(null);
+
+  useEffect(() => {
+    if (prefill) {
+      setText(prefill);
+      inputRef.current?.focus();
+    }
+  }, [prefill]);
+
+  // NOTE: no `loading` guard and no editable={!loading} — sending WHILE a
+  // chain runs is a feature (backend Chain Additions router decides
+  // attach/cancel/new), and the input must never be disabled mid-run.
+  const handleSend = useCallback(() => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    getHaptics()?.impact('light');
+    onSend(trimmed);
+    setText('');
+    setHeight(40);
+  }, [text, loading, onSend]);
+
+  const canSend = text.trim().length > 0;
+
+  return (
+    <View style={styles.dock}>
+      <View style={styles.inputRow}>
+        {onCallStart && (
+          <Pressable style={styles.callBtn} onPress={onCallStart}>
+            <Svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke={colors.light.accent} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+              <Path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.63A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" />
+            </Svg>
+          </Pressable>
+        )}
+        <TextInput
+          ref={inputRef}
+          style={[styles.input, { height: Math.min(Math.max(40, height), 120) }]}
+          value={text}
+          onChangeText={setText}
+          onContentSizeChange={e => setHeight(e.nativeEvent.contentSize.height)}
+          placeholder={placeholder || 'Message A-Team...'}
+          placeholderTextColor={colors.light.textMuted}
+          multiline
+          returnKeyType="default"
+          blurOnSubmit={false}
+          onSubmitEditing={() => {
+            if (Platform.OS === 'web') handleSend();
+          }}
+        />
+        <Pressable
+          style={[styles.sendBtn, canSend && styles.sendBtnActive]}
+          onPress={handleSend}
+          disabled={!canSend}
+        >
+          <Svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke={canSend ? '#fff' : colors.light.textMuted} strokeWidth={2}>
+            <Line x1="22" y1="2" x2="11" y2="13" />
+            <Polygon points="22 2 15 22 11 13 2 9 22 2" />
+          </Svg>
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  dock: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: colors.light.bgPrimary,
+    borderTopWidth: 0.5,
+    borderTopColor: colors.light.border,
+  },
+  inputRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    backgroundColor: colors.light.bgInput,
+    borderRadius: borderRadius.xl,
+    borderWidth: 1,
+    borderColor: colors.light.border,
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+    gap: 4,
+  },
+  callBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    color: colors.light.textPrimary,
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    maxHeight: 120,
+  },
+  sendBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: colors.light.bgTertiary,
+  },
+  sendBtnActive: {
+    backgroundColor: colors.light.accent,
+  },
+});

package/src/chat/JobProgressBar.tsx

@@ -0,0 +1,221 @@
+import { useEffect, useRef, useState } from 'react';
+import { View, Text, Animated, StyleSheet } from 'react-native';
+import type { JobProgress } from '@ateam-ai-mobile/core';
+import { ada, fontSize, borderRadius } from '@ateam-ai-mobile/core';
+
+// Semantic warm-palette colors for terminal states (kept local — Ada palette
+// is mostly orange/ink, but progress states need a small warm green/red/amber
+// vocabulary to stay readable).
+const WARM_GREEN = '#5A8A5C';
+const WARM_GREEN_SOFT = 'rgba(90, 138, 92, 0.14)';
+const WARM_RED = '#C15545';
+const WARM_RED_SOFT = 'rgba(193, 85, 69, 0.14)';
+const WARM_AMBER = '#D49A4E';
+const WARM_AMBER_SOFT = 'rgba(212, 154, 78, 0.16)';
+
+interface Props {
+  progress: JobProgress;
+}
+
+export default function JobProgressBar({ progress }: Props) {
+  const pulseAnim = useRef(new Animated.Value(0.5)).current;
+  const [elapsed, setElapsed] = useState(0);
+
+  const isRunning = progress.status === 'running';
+  const isDone = progress.status === 'done';
+  const isError = progress.status === 'error';
+  const isPaused = progress.status === 'paused';
+
+  // Pulse animation while running
+  useEffect(() => {
+    if (!isRunning) {
+      pulseAnim.setValue(1);
+      return;
+    }
+    const anim = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseAnim, { toValue: 1, duration: 800, useNativeDriver: true }),
+        Animated.timing(pulseAnim, { toValue: 0.5, duration: 800, useNativeDriver: true }),
+      ]),
+    );
+    anim.start();
+    return () => anim.stop();
+  }, [isRunning, pulseAnim]);
+
+  // Elapsed timer — ticks every second while running, clears on terminal state
+  useEffect(() => {
+    if (!isRunning || !progress.chainStartedAt) {
+      setElapsed(0);
+      return;
+    }
+    const start = progress.chainStartedAt;
+    setElapsed(Math.floor((Date.now() - start) / 1000));
+    const id = setInterval(() => {
+      setElapsed(Math.floor((Date.now() - start) / 1000));
+    }, 1000);
+    return () => clearInterval(id);
+  }, [isRunning, progress.chainStartedAt]);
+
+  const statusColor = isDone
+    ? WARM_GREEN
+    : isError
+      ? WARM_RED
+      : isPaused
+        ? WARM_AMBER
+        : ada.orange;
+
+  const statusBg = isDone
+    ? WARM_GREEN_SOFT
+    : isError
+      ? WARM_RED_SOFT
+      : isPaused
+        ? WARM_AMBER_SOFT
+        : ada.orangeSoft;
+
+  // Terminal states — simple one-liner
+  if (isDone || isError) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.row}>
+          <View style={[styles.dot, { backgroundColor: statusColor }]} />
+          <Text style={[styles.label, { color: statusColor }]}>
+            {isDone ? 'Completed' : 'Failed'}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  if (isPaused) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.row}>
+          <View style={[styles.dot, { backgroundColor: statusColor }]} />
+          <Text style={[styles.label, { color: statusColor }]}>
+            Waiting for your reply
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  // Running — voice-agent-style compact line:
+  // ● messaging-agent → whatsapp.send  ·  iter 3  ·  0:42
+  const elapsedStr = progress.chainStartedAt
+    ? `${Math.floor(elapsed / 60)}:${String(elapsed % 60).padStart(2, '0')}`
+    : null;
+
+  const metaParts = [
+    progress.iteration != null && progress.iteration > 0 ? `iter ${progress.iteration}` : null,
+    elapsedStr,
+  ].filter(Boolean) as string[];
+
+  const lp = progress.liveProgress;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.row}>
+        <Animated.View
+          style={[styles.dot, { backgroundColor: ada.orange, opacity: pulseAnim }]}
+        />
+        <Text style={styles.skill} numberOfLines={1}>
+          {progress.skillSlug || 'Processing...'}
+        </Text>
+        {!!progress.currentTool && (
+          <Text style={styles.tool} numberOfLines={1}>
+            {` → ${progress.currentTool}`}
+          </Text>
+        )}
+        {metaParts.length > 0 && (
+          <Text style={styles.meta} numberOfLines={1}>
+            {`  ·  ${metaParts.join('  ·  ')}`}
+          </Text>
+        )}
+      </View>
+      {/* Live progress from adas_emit_progress() — shown during fat tool execution */}
+      {!!lp?.message && (
+        <View style={styles.liveProgressRow}>
+          {lp.step != null && lp.total != null && (
+            <Text style={styles.liveProgressStep}>[{lp.step}/{lp.total}]</Text>
+          )}
+          <Text style={styles.liveProgressMsg} numberOfLines={1}>{lp.message}</Text>
+        </View>
+      )}
+      <View style={[styles.progressTrack, { backgroundColor: statusBg }]}>
+        <Animated.View
+          style={[styles.progressFill, { backgroundColor: ada.orange, opacity: pulseAnim }]}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 8,
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: ada.border,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+    overflow: 'hidden',
+  },
+  dot: {
+    width: 7,
+    height: 7,
+    borderRadius: 4,
+    marginRight: 6,
+    flexShrink: 0,
+  },
+  label: {
+    fontSize: fontSize.xs,
+    fontWeight: '600',
+  },
+  // Running state text segments
+  skill: {
+    fontSize: fontSize.xs,
+    fontWeight: '600',
+    color: ada.orange,
+    flexShrink: 1,
+  },
+  tool: {
+    fontSize: fontSize.xs,
+    color: ada.inkMuted,
+    flexShrink: 2,
+  },
+  meta: {
+    fontSize: fontSize.xs,
+    color: ada.inkMuted,
+    flexShrink: 0,
+  },
+  liveProgressRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 4,
+    gap: 4,
+  },
+  liveProgressStep: {
+    fontSize: fontSize.xs,
+    fontWeight: '600',
+    color: ada.inkMuted,
+  },
+  liveProgressMsg: {
+    fontSize: fontSize.xs,
+    color: ada.orange,
+    flex: 1,
+  },
+  progressTrack: {
+    height: 3,
+    borderRadius: 2,
+    marginTop: 6,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    width: '60%',
+    borderRadius: 2,
+  },
+});