@intentcomputing/koko-agent-sdk 1.0.1

package/src/ui/KokoComposer.tsx

@@ -0,0 +1,174 @@
+import React, { useCallback, useState } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { useKokoAgent } from '../provider/KokoProvider';
+import { TaskStore } from '../task/TaskStore';
+import { useTaskStore } from '../task/useTaskStore';
+import { useKokoUi } from '../provider/KokoUiContext';
+import { message, type LocalizedText } from '../i18n';
+
+export type KokoComposerProps = {
+  /** Placeholder for the natural-language input. */
+  placeholder?: string;
+  /** Disable while true (in addition to running task). */
+  disabled?: boolean;
+};
+
+/**
+ * Natural-language dialog (需求 §1.1 / §3.5):
+ * 用户自由输入一句话 → 云端 Agent → 本 App 内 dump/find/tap，字幕与任务可观测。
+ */
+export function KokoComposer({
+  placeholder,
+  disabled = false,
+}: KokoComposerProps) {
+  const koko = useKokoAgent();
+  const { branding, t } = useKokoUi();
+  const { tasks, activeTaskId } = useTaskStore();
+  const [text, setText] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [hint, setHint] = useState<LocalizedText | null>(null);
+
+  const running =
+    busy || tasks.some((t) => t.id === activeTaskId && t.status === 'running');
+
+  const onSend = useCallback(async () => {
+    const goal = text.trim();
+    if (!goal || running || disabled) return;
+
+    setBusy(true);
+    setHint(null);
+    setText('');
+    TaskStore.openSheet();
+
+    try {
+      const out = await koko.runGoal(goal, {
+        onNarration: (line) => setHint(line),
+      });
+      setHint(out.success ? out.summary : message('composer.incomplete', { summary: out.summary }));
+    } catch (e) {
+      setHint(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  }, [text, running, disabled, koko]);
+
+  const onStop = useCallback(() => {
+    koko.stop();
+    koko.finishTask('cancelled', t('runtime.cancelled'));
+    setBusy(false);
+    setHint(message('composer.stopped'));
+  }, [koko, t]);
+
+  return (
+    <View style={styles.wrap}>
+      {hint ? (
+        <Text style={styles.hint} numberOfLines={2}>
+          {typeof hint === 'string' ? hint : t(hint.key, hint.vars)}
+        </Text>
+      ) : null}
+      <View style={styles.row}>
+        <TextInput
+          style={styles.input}
+          value={text}
+          onChangeText={setText}
+          placeholder={placeholder ?? branding.placeholder}
+          placeholderTextColor="rgba(255,255,255,0.35)"
+          editable={!running && !disabled}
+          returnKeyType="send"
+          onSubmitEditing={onSend}
+          blurOnSubmit={false}
+          accessibilityLabel={t('sheet.inputA11y')}
+        />
+        {running ? (
+          <Pressable
+            style={[styles.btn, styles.btnStop]}
+            onPress={onStop}
+            accessibilityRole="button"
+            accessibilityLabel={t('sheet.stopA11y')}
+          >
+            <Text style={styles.btnText}>{t('composer.stop')}</Text>
+          </Pressable>
+        ) : (
+          <Pressable
+            style={[
+              styles.btn,
+              styles.btnSend,
+              (!text.trim() || disabled) && styles.btnDisabled,
+            ]}
+            onPress={onSend}
+            disabled={!text.trim() || disabled}
+            accessibilityRole="button"
+            accessibilityLabel={t('sheet.send')}
+          >
+            {busy ? (
+              <ActivityIndicator color="#fff" />
+            ) : (
+              <Text style={styles.btnText}>{t('sheet.send')}</Text>
+            )}
+          </Pressable>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    width: '100%',
+    marginBottom: 8,
+  },
+  hint: {
+    color: 'rgba(255,255,255,0.55)',
+    fontSize: 12,
+    marginBottom: 6,
+    paddingHorizontal: 4,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    backgroundColor: 'rgba(28,28,30,0.96)',
+    borderRadius: 16,
+    paddingLeft: 14,
+    paddingRight: 6,
+    paddingVertical: 6,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(255,255,255,0.12)',
+  },
+  input: {
+    flex: 1,
+    color: '#F5F5F7',
+    fontSize: 15,
+    paddingVertical: 10,
+    maxHeight: 88,
+  },
+  btn: {
+    minWidth: 64,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  btnSend: {
+    backgroundColor: '#0A84FF',
+  },
+  btnStop: {
+    backgroundColor: '#FF453A',
+  },
+  btnDisabled: {
+    opacity: 0.4,
+  },
+  btnText: {
+    color: '#fff',
+    fontWeight: '700',
+    fontSize: 14,
+  },
+});

package/src/ui/KokoDialogHost.tsx

@@ -0,0 +1,249 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { useKokoUi } from '../provider/KokoUiContext';
+import { KokoOverlayLayer } from './KokoOverlayLayer';
+
+export type ConfirmRequest = {
+  id: string;
+  title: string;
+  message: string;
+  resolve: (ok: boolean) => void;
+};
+
+export type AskRequest = {
+  id: string;
+  question: string;
+  resolve: (answer: string | null) => void;
+};
+
+type Listener = (state: { confirm: ConfirmRequest | null; ask: AskRequest | null }) => void;
+
+class DialogBusImpl {
+  confirm: ConfirmRequest | null = null;
+  ask: AskRequest | null = null;
+  private listeners = new Set<Listener>();
+
+  subscribe(l: Listener) {
+    this.listeners.add(l);
+    l({ confirm: this.confirm, ask: this.ask });
+    return () => {
+      this.listeners.delete(l);
+    };
+  }
+
+  private emit() {
+    for (const l of this.listeners) l({ confirm: this.confirm, ask: this.ask });
+  }
+
+  requestConfirm(title: string, message: string): Promise<boolean> {
+    return new Promise((resolve) => {
+      this.confirm = {
+        id: `c_${Date.now()}`,
+        title,
+        message,
+        resolve: (ok) => {
+          this.confirm = null;
+          this.emit();
+          resolve(ok);
+        },
+      };
+      this.emit();
+    });
+  }
+
+  requestAsk(question: string): Promise<string | null> {
+    return new Promise((resolve) => {
+      this.ask = {
+        id: `a_${Date.now()}`,
+        question,
+        resolve: (answer) => {
+          this.ask = null;
+          this.emit();
+          resolve(answer);
+        },
+      };
+      this.emit();
+    });
+  }
+}
+
+export const DialogBus = new DialogBusImpl();
+
+/**
+ * Built-in confirm + ask-user modal. Mounted by KokoProvider.
+ */
+export function KokoDialogHost() {
+  const { t, branding, colors } = useKokoUi();
+  const [confirm, setConfirm] = useState<ConfirmRequest | null>(null);
+  const [ask, setAsk] = useState<AskRequest | null>(null);
+  const [answer, setAnswer] = useState('');
+
+  useEffect(
+    () =>
+      DialogBus.subscribe((s) => {
+        setConfirm(s.confirm);
+        setAsk(s.ask);
+        if (!s.ask) setAnswer('');
+      }),
+    [],
+  );
+
+  const onConfirm = useCallback((ok: boolean) => {
+    confirm?.resolve(ok);
+  }, [confirm]);
+
+  const onAskSubmit = useCallback(() => {
+    ask?.resolve(answer.trim() || null);
+  }, [ask, answer]);
+
+  const onAskCancel = useCallback(() => {
+    ask?.resolve(null);
+  }, [ask]);
+
+  const visible = Boolean(confirm || ask);
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={() => {
+      if (confirm) onConfirm(false);
+      else onAskCancel();
+    }}>
+      <KokoOverlayLayer
+        pointerEvents="auto"
+        style={[styles.backdrop, { backgroundColor: colors.overlay }]}
+      >
+        <View
+          style={[
+            styles.card,
+            { backgroundColor: colors.dialogBg, borderColor: colors.border },
+          ]}
+        >
+          {confirm ? (
+            <>
+              <Text style={[styles.title, { color: colors.text }]}>{confirm.title}</Text>
+              <Text style={[styles.body, { color: colors.textSecondary }]}>
+                {confirm.message}
+              </Text>
+              <View style={styles.row}>
+                <Pressable style={[styles.btn, styles.btnGhost]} onPress={() => onConfirm(false)}>
+                  <Text style={[styles.btnGhostText, { color: colors.textSecondary }]}>
+                    {t('dialog.cancel')}
+                  </Text>
+                </Pressable>
+                <Pressable
+                  style={[styles.btn, styles.btnPrimary, { backgroundColor: branding.primaryColor }]}
+                  onPress={() => onConfirm(true)}
+                >
+                  <Text style={styles.btnPrimaryText}>{t('dialog.confirm')}</Text>
+                </Pressable>
+              </View>
+            </>
+          ) : null}
+
+          {ask ? (
+            <>
+              <Text style={[styles.title, { color: colors.text }]}>{t('dialog.askTitle')}</Text>
+              <Text style={[styles.body, { color: colors.textSecondary }]}>{ask.question}</Text>
+              <TextInput
+                style={[
+                  styles.input,
+                  {
+                    color: colors.text,
+                    backgroundColor: colors.inputBg,
+                    borderColor: colors.border,
+                  },
+                ]}
+                value={answer}
+                onChangeText={setAnswer}
+                placeholder={t('dialog.askPlaceholder')}
+                placeholderTextColor={colors.textMuted}
+                autoFocus
+              />
+              <View style={styles.row}>
+                <Pressable style={[styles.btn, styles.btnGhost]} onPress={onAskCancel}>
+                  <Text style={[styles.btnGhostText, { color: colors.textSecondary }]}>
+                    {t('dialog.cancel')}
+                  </Text>
+                </Pressable>
+                <Pressable
+                  style={[styles.btn, styles.btnPrimary, { backgroundColor: branding.primaryColor }]}
+                  onPress={onAskSubmit}
+                >
+                  <Text style={styles.btnPrimaryText}>{t('dialog.continue')}</Text>
+                </Pressable>
+              </View>
+            </>
+          ) : null}
+        </View>
+      </KokoOverlayLayer>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.55)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 400,
+    borderRadius: 16,
+    backgroundColor: '#1C1C1E',
+    padding: 20,
+  },
+  title: {
+    color: '#F5F5F7',
+    fontSize: 17,
+    fontWeight: '700',
+    marginBottom: 8,
+  },
+  body: {
+    color: 'rgba(255,255,255,0.75)',
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 16,
+  },
+  input: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(255,255,255,0.2)',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    color: '#fff',
+    marginBottom: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 10,
+  },
+  btn: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 10,
+  },
+  btnGhost: {
+    backgroundColor: 'rgba(255,255,255,0.08)',
+  },
+  btnGhostText: {
+    color: 'rgba(255,255,255,0.75)',
+    fontWeight: '600',
+  },
+  btnPrimary: {
+    backgroundColor: '#0A84FF',
+  },
+  btnPrimaryText: {
+    color: '#fff',
+    fontWeight: '700',
+  },
+});

package/src/ui/KokoEntryButton.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native';
+import { TaskStore } from '../task/TaskStore';
+import { useTaskStore } from '../task/useTaskStore';
+import { KokoOverlayLayer } from './KokoOverlayLayer';
+
+export type KokoEntryButtonProps = {
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Demo convenience button. Production hosts should draw their own entry UI
+ * and call `openKokoChat()` / `agent.openChat()`.
+ *
+ * Marked as overlay so dump/tap skip it — otherwise the agent mistakes it for
+ * an in-app control near bottom tabs (e.g. 我的).
+ */
+export function KokoEntryButton({
+  label = 'Koko',
+  style,
+}: KokoEntryButtonProps) {
+  const { tasks, activeTaskId } = useTaskStore();
+  const running = tasks.some((t) => t.id === activeTaskId && t.status === 'running');
+
+  return (
+    <KokoOverlayLayer pointerEvents="box-none" style={styles.wrap}>
+      <Pressable
+        style={[styles.btn, style, running && styles.btnDim]}
+        onPress={() => {
+          // Never open the sheet mid-run — Modal backdrop blocks host taps.
+          if (running) return;
+          TaskStore.openSheet();
+        }}
+        accessibilityRole="button"
+        accessibilityLabel="Open chat"
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+      >
+        <Text style={styles.text}>{label}</Text>
+      </Pressable>
+    </KokoOverlayLayer>
+  );
+}
+
+/** Imperative open for custom host buttons (preferred). */
+export function openKokoChat(taskId?: string | null) {
+  TaskStore.openSheet(taskId);
+}
+
+export function closeKokoChat() {
+  TaskStore.closeSheet();
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    alignSelf: 'flex-start',
+  },
+  btn: {
+    backgroundColor: '#111827',
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 12,
+    alignSelf: 'flex-start',
+  },
+  btnDim: {
+    opacity: 0.45,
+  },
+  text: {
+    color: '#F9FAFB',
+    fontWeight: '700',
+    fontSize: 14,
+  },
+});