@adminide-stack/yantra-mobile 12.0.108-alpha.0 → 12.0.109-alpha.0

package/lib/features/webbuilder/components/ProjectChat.js

@@ -0,0 +1,580 @@
+import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useMemo,useEffect}from'react';import {StyleSheet,KeyboardAvoidingView,FlatList,View,Text,TextInput,Platform,ActivityIndicator}from'react-native';import {WebView}from'react-native-webview';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Tap,DIM}from'../../inbox/components/Tap.js';import {AssistantMarkdown}from'../../chat/AssistantMarkdown.js';import {ToolTimeline}from'../../chat/ToolTimeline.js';import {parseToolActivity}from'../../chat/toolActivity.js';import {displayHost}from'../buildFragments.js';import {DESKTOP_VIEWPORT_SCRIPT}from'./PreviewFrame.js';import {PreviewPlaceholder}from'./PreviewPlaceholder.js';import {webbuilderAgentSuggestions}from'../webbuilderPrompts.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function elapsedLabel(seconds) {
+  if (seconds < 60) return `${seconds}s`;
+  return `${Math.floor(seconds / 60)}m ${String(seconds % 60).padStart(2, "0")}s`;
+}
+function useElapsed(startedAt) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!startedAt) return void 0;
+    const timer = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(timer);
+  }, [startedAt]);
+  return startedAt ? Math.max(0, Math.floor((now - startedAt) / 1e3)) : 0;
+}
+function UserBubble({
+  text,
+  theme
+}) {
+  return /* @__PURE__ */ jsx(View, { style: styles.userRow, children: /* @__PURE__ */ jsx(View, { style: [styles.userBubble, {
+    backgroundColor: theme.chip
+  }], children: /* @__PURE__ */ jsx(Text, { style: [styles.userText, {
+    color: theme.ink
+  }], selectable: true, children: text }) }) });
+}
+function AgentAvatar({
+  theme
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: styles.agentHead, children: [
+    /* @__PURE__ */ jsx(View, { style: [styles.agentMark, {
+      backgroundColor: theme.accent
+    }], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 14, color: theme.accentInk }) }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.agentName, {
+      color: theme.ink
+    }], children: "Web Builder" })
+  ] });
+}
+function AgentTurn({
+  content,
+  active,
+  theme
+}) {
+  const parsed = useMemo(() => parseToolActivity(content, active), [content, active]);
+  return /* @__PURE__ */ jsxs(View, { style: styles.agentTurn, children: [
+    /* @__PURE__ */ jsx(AgentAvatar, { theme }),
+    parsed.steps.length ? /* @__PURE__ */ jsx(ToolTimeline, { steps: parsed.steps, active, isDark: theme.isDark }) : null,
+    parsed.text ? /* @__PURE__ */ jsx(AssistantMarkdown, { text: parsed.text, streaming: active, isDark: theme.isDark }) : null
+  ] });
+}
+function LiveTurn({
+  streaming,
+  building,
+  theme
+}) {
+  var _a;
+  const elapsed = useElapsed((_a = building == null ? void 0 : building.startedAt) != null ? _a : null);
+  const parsed = useMemo(() => parseToolActivity(streaming != null ? streaming : "", true), [streaming]);
+  const showStatus = !parsed.text && parsed.steps.length === 0;
+  return /* @__PURE__ */ jsxs(View, { style: styles.agentTurn, children: [
+    /* @__PURE__ */ jsx(AgentAvatar, { theme }),
+    parsed.steps.length ? /* @__PURE__ */ jsx(ToolTimeline, { steps: parsed.steps, active: true, isDark: theme.isDark }) : null,
+    parsed.text ? /* @__PURE__ */ jsx(AssistantMarkdown, { text: parsed.text, streaming: true, isDark: theme.isDark }) : null,
+    showStatus ? /* @__PURE__ */ jsxs(View, { style: [styles.working, {
+      backgroundColor: theme.card,
+      borderColor: theme.border
+    }], children: [
+      /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.accent }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.workingText, {
+        color: theme.ink
+      }], numberOfLines: 2, children: (building == null ? void 0 : building.statusText) || "Thinking\u2026" }),
+      building ? /* @__PURE__ */ jsx(Text, { style: [styles.workingTime, {
+        color: theme.muted
+      }], children: elapsedLabel(elapsed) }) : null
+    ] }) : null
+  ] });
+}
+function timeOf(ms) {
+  if (!ms) return "";
+  const d = new Date(ms);
+  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+function SiteCard({
+  build,
+  title,
+  busy,
+  onOpen,
+  onPublish,
+  theme
+}) {
+  const url = build.previewUrl;
+  const [loaded, setLoaded] = useState(false);
+  const [asleep, setAsleep] = useState(false);
+  useEffect(() => {
+    setLoaded(false);
+    setAsleep(false);
+  }, [url]);
+  const status = build.liveUrl ? `Live \xB7 ${displayHost(build.liveUrl)}` : `Not published \xB7 ${timeOf(build.updatedAt)}`;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.site, {
+    backgroundColor: theme.card,
+    borderColor: theme.border,
+    shadowColor: theme.isDark ? "#000" : "#1c1917"
+  }], children: [
+    /* @__PURE__ */ jsxs(Tap, { onPress: onOpen, accessibilityRole: "button", accessibilityLabel: `Open ${title}`, style: styles.siteHead, pressedStyle: DIM, children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.siteGlobe, {
+        backgroundColor: build.liveUrl ? theme.good : theme.accent
+      }], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "web", size: 24, color: theme.accentInk }) }),
+      /* @__PURE__ */ jsxs(View, { style: styles.siteHeadText, children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.siteTitle, {
+          color: theme.ink
+        }], numberOfLines: 1, children: title }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.siteStatus, {
+          color: theme.muted
+        }], numberOfLines: 1, children: status })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Tap, { onPress: onOpen, accessibilityRole: "button", accessibilityLabel: `Open the preview of ${title}`, children: /* @__PURE__ */ jsxs(View, { style: [styles.siteView, {
+      backgroundColor: theme.stage,
+      borderColor: theme.border
+    }], pointerEvents: "none", children: [
+      url ? /* @__PURE__ */ jsx(WebView, { source: {
+        uri: url
+      }, style: [styles.siteWeb, !loaded && styles.hidden], scrollEnabled: false, javaScriptEnabled: true, domStorageEnabled: true, originWhitelist: ["*"], scalesPageToFit: true, injectedJavaScript: DESKTOP_VIEWPORT_SCRIPT, onLoadEnd: () => setLoaded(true), onHttpError: (event) => {
+        if (event.nativeEvent.statusCode >= 500) setAsleep(true);
+      }, onError: () => setAsleep(true) }) : null,
+      asleep ? /* @__PURE__ */ jsx(View, { style: [styles.siteLoading, {
+        backgroundColor: theme.stage
+      }], children: /* @__PURE__ */ jsx(PreviewPlaceholder, { theme, compact: true }) }) : null,
+      !asleep && (!url || !loaded) ? /* @__PURE__ */ jsxs(View, { style: styles.siteLoading, children: [
+        /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.accent }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.siteLoadingText, {
+          color: theme.muted
+        }], children: "Loading preview\u2026" })
+      ] }) : null,
+      busy && loaded && !asleep ? /* @__PURE__ */ jsxs(View, { style: [styles.siteBusy, {
+        backgroundColor: theme.card
+      }], children: [
+        /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.accent }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.siteBusyText, {
+          color: theme.ink
+        }], children: "Updating\u2026" })
+      ] }) : null
+    ] }) }),
+    /* @__PURE__ */ jsxs(View, { style: styles.siteFoot, children: [
+      /* @__PURE__ */ jsx(Tap, { onPress: onOpen, accessibilityRole: "button", style: [styles.siteBtn, {
+        backgroundColor: theme.chip
+      }], pressedStyle: DIM, testID: "webbuilder-card-preview", children: /* @__PURE__ */ jsx(Text, { style: [styles.siteBtnText, {
+        color: theme.ink
+      }], children: "Preview" }) }),
+      /* @__PURE__ */ jsx(Tap, { onPress: onPublish, disabled: !build.sandboxId, accessibilityRole: "button", style: [styles.siteBtn, {
+        backgroundColor: theme.ink
+      }, !build.sandboxId && styles.disabled], pressedStyle: DIM, testID: "webbuilder-card-publish", children: /* @__PURE__ */ jsx(Text, { style: [styles.siteBtnText, {
+        color: theme.card
+      }], children: "Publish" }) })
+    ] })
+  ] });
+}
+function ProjectChat({
+  messages,
+  streaming,
+  busy,
+  error,
+  connected,
+  building,
+  build,
+  siteTitle,
+  onSend,
+  onOpenPreview,
+  onPublish,
+  theme,
+  bottomInset
+}) {
+  const [draft, setDraft] = useState("");
+  const listRef = useRef(null);
+  const [atBottom, setAtBottom] = useState(true);
+  const live = busy || Boolean(building);
+  const rows = useMemo(() => {
+    const out = messages.map((m) => ({
+      kind: "message",
+      id: m.id,
+      message: m
+    }));
+    if (build) out.push({
+      kind: "site",
+      id: `site-${build.key}`
+    });
+    if (live) out.push({
+      kind: "live",
+      id: "live"
+    });
+    return out;
+  }, [messages, build, live]);
+  useEffect(() => {
+    if (!atBottom) return void 0;
+    const timer = setTimeout(() => {
+      var _a;
+      return (_a = listRef.current) == null ? void 0 : _a.scrollToEnd({
+        animated: true
+      });
+    }, 80);
+    return () => clearTimeout(timer);
+  }, [rows.length, streaming]);
+  const send = (text) => {
+    const words = text.trim();
+    if (!words) return;
+    onSend(words);
+    setDraft("");
+  };
+  const suggestions = messages.length === 0 && !live ? webbuilderAgentSuggestions(Boolean(build), siteTitle) : [];
+  return /* @__PURE__ */ jsxs(KeyboardAvoidingView, { style: styles.fill, behavior: Platform.OS === "ios" ? "padding" : void 0, keyboardVerticalOffset: Platform.OS === "ios" ? 96 : 0, children: [
+    /* @__PURE__ */ jsx(FlatList, { ref: listRef, data: rows, keyExtractor: (row) => row.id, contentContainerStyle: styles.list, keyboardShouldPersistTaps: "handled", scrollEventThrottle: 100, onScroll: (event) => {
+      const {
+        layoutMeasurement,
+        contentOffset,
+        contentSize
+      } = event.nativeEvent;
+      setAtBottom(layoutMeasurement.height + contentOffset.y >= contentSize.height - 48);
+    }, ListEmptyComponent: /* @__PURE__ */ jsxs(View, { style: styles.empty, children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.emptyMark, {
+        backgroundColor: theme.accentSoft
+      }], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 26, color: theme.accent }) }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.emptyTitle, {
+        color: theme.ink
+      }], children: build ? `What should change on ${siteTitle}?` : "Describe your idea" }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.emptyBody, {
+        color: theme.muted
+      }], children: build ? "Ask for new sections, another look, copy changes or fixes." : "Tell me what the site is for and I'll build it step by step." })
+    ] }), renderItem: ({
+      item
+    }) => {
+      var _a;
+      if (item.kind === "live") return /* @__PURE__ */ jsx(LiveTurn, { streaming, building, theme });
+      if (item.kind === "site" && build) {
+        return /* @__PURE__ */ jsx(SiteCard, { build, title: siteTitle, busy: live, onOpen: onOpenPreview, onPublish, theme });
+      }
+      if (item.kind !== "message") return null;
+      const m = item.message;
+      if (m.role === "user") return /* @__PURE__ */ jsx(UserBubble, { text: (_a = m.displayContent) != null ? _a : m.content, theme });
+      return /* @__PURE__ */ jsx(AgentTurn, { content: m.content, active: false, theme });
+    } }),
+    !atBottom ? /* @__PURE__ */ jsx(Tap, { onPress: () => {
+      var _a;
+      setAtBottom(true);
+      (_a = listRef.current) == null ? void 0 : _a.scrollToEnd({
+        animated: true
+      });
+    }, accessibilityRole: "button", accessibilityLabel: "Jump to the latest", style: [styles.jump, {
+      backgroundColor: theme.card,
+      borderColor: theme.border,
+      shadowColor: theme.isDark ? "#000" : "#1c1917"
+    }], pressedStyle: DIM, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-down", size: 20, color: theme.ink }) }) : null,
+    suggestions.length ? /* @__PURE__ */ jsx(View, { style: styles.suggestions, children: suggestions.slice(0, 3).map((s) => /* @__PURE__ */ jsx(Tap, { onPress: () => {
+      var _a;
+      return send((_a = s.prompt) != null ? _a : s.label);
+    }, accessibilityRole: "button", style: [styles.suggestion, {
+      backgroundColor: theme.card,
+      borderColor: theme.border
+    }], pressedStyle: DIM, children: /* @__PURE__ */ jsx(Text, { style: [styles.suggestionText, {
+      color: theme.ink
+    }], numberOfLines: 1, children: s.label }) }, s.id)) }) : null,
+    error ? /* @__PURE__ */ jsxs(View, { style: [styles.error, {
+      backgroundColor: theme.critSoft
+    }], children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "alert-circle-outline", size: 16, color: theme.crit }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.errorText, {
+        color: theme.crit
+      }], children: error })
+    ] }) : null,
+    /* @__PURE__ */ jsxs(View, { style: [styles.composerDock, {
+      backgroundColor: theme.screen,
+      paddingBottom: Math.max(bottomInset, 10)
+    }], children: [
+      /* @__PURE__ */ jsxs(View, { style: [styles.composer, {
+        backgroundColor: theme.card,
+        borderColor: theme.border,
+        shadowColor: theme.isDark ? "#000" : "#1c1917"
+      }], children: [
+        /* @__PURE__ */ jsx(TextInput, { value: draft, onChangeText: setDraft, placeholder: "Message Web Builder", placeholderTextColor: theme.faint, multiline: true, style: [styles.input, {
+          color: theme.ink
+        }], accessibilityLabel: "Message the agent", testID: "webbuilder-chat-input" }),
+        /* @__PURE__ */ jsx(Tap, { onPress: () => send(draft), disabled: !draft.trim() || !connected, accessibilityRole: "button", accessibilityLabel: "Send", style: [styles.send, {
+          backgroundColor: draft.trim() && connected ? theme.accent : theme.chip
+        }], pressedStyle: DIM, testID: "webbuilder-chat-send", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-up", size: 20, color: draft.trim() && connected ? theme.accentInk : theme.faint }) })
+      ] }),
+      !connected ? /* @__PURE__ */ jsx(Text, { style: [styles.connecting, {
+        color: theme.muted
+      }], children: "Connecting to Web Builder\u2026" }) : null
+    ] })
+  ] });
+}
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1
+  },
+  list: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 12,
+    gap: 18,
+    flexGrow: 1
+  },
+  userRow: {
+    alignItems: "flex-end"
+  },
+  userBubble: {
+    maxWidth: "86%",
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 20,
+    borderBottomRightRadius: 6
+  },
+  userText: {
+    fontSize: 16,
+    lineHeight: 22
+  },
+  agentTurn: {
+    gap: 8
+  },
+  agentHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  agentMark: {
+    width: 24,
+    height: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  agentName: {
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  working: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    alignSelf: "flex-start",
+    maxWidth: "100%",
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 14,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  workingText: {
+    flexShrink: 1,
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  workingTime: {
+    fontSize: 13,
+    fontVariant: ["tabular-nums"]
+  },
+  site: {
+    borderRadius: 22,
+    borderWidth: StyleSheet.hairlineWidth,
+    overflow: "hidden",
+    shadowOpacity: 0.06,
+    shadowRadius: 14,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    elevation: 2
+  },
+  siteHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 14,
+    padding: 16
+  },
+  siteGlobe: {
+    width: 48,
+    height: 48,
+    borderRadius: 14,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  siteHeadText: {
+    flex: 1,
+    gap: 2
+  },
+  siteTitle: {
+    fontSize: 18,
+    fontWeight: "700",
+    letterSpacing: -0.2
+  },
+  siteStatus: {
+    fontSize: 14
+  },
+  siteView: {
+    height: 240,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    overflow: "hidden"
+  },
+  siteWeb: {
+    flex: 1,
+    backgroundColor: "transparent"
+  },
+  hidden: {
+    opacity: 0
+  },
+  siteLoading: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8
+  }),
+  siteLoadingText: {
+    fontSize: 13
+  },
+  siteBusy: {
+    position: "absolute",
+    top: 10,
+    right: 10,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 999
+  },
+  siteBusyText: {
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  siteFoot: {
+    flexDirection: "row",
+    gap: 10,
+    padding: 14
+  },
+  siteBtn: {
+    flex: 1,
+    height: 46,
+    borderRadius: 23,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  siteBtnText: {
+    fontSize: 16,
+    fontWeight: "700"
+  },
+  disabled: {
+    opacity: 0.35
+  },
+  empty: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 32,
+    gap: 8
+  },
+  emptyMark: {
+    width: 56,
+    height: 56,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 6
+  },
+  emptyTitle: {
+    fontSize: 18,
+    fontWeight: "700",
+    textAlign: "center"
+  },
+  emptyBody: {
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: "center"
+  },
+  suggestions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingBottom: 8
+  },
+  suggestion: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 999,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  suggestionText: {
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  error: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 8,
+    marginHorizontal: 16,
+    marginBottom: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 12
+  },
+  errorText: {
+    flex: 1,
+    fontSize: 13,
+    lineHeight: 18
+  },
+  composerDock: {
+    paddingHorizontal: 14,
+    paddingTop: 8
+  },
+  composer: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 8,
+    minHeight: 58,
+    borderRadius: 29,
+    borderWidth: StyleSheet.hairlineWidth,
+    paddingLeft: 18,
+    paddingRight: 8,
+    paddingVertical: 8,
+    shadowOpacity: 0.1,
+    shadowRadius: 18,
+    shadowOffset: {
+      width: 0,
+      height: 6
+    },
+    elevation: 6
+  },
+  jump: {
+    position: "absolute",
+    right: 16,
+    bottom: 104,
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    borderWidth: StyleSheet.hairlineWidth,
+    alignItems: "center",
+    justifyContent: "center",
+    shadowOpacity: 0.12,
+    shadowRadius: 10,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    elevation: 4
+  },
+  input: {
+    flex: 1,
+    fontSize: 17,
+    lineHeight: 22,
+    maxHeight: 120,
+    paddingTop: 10,
+    paddingBottom: 10
+  },
+  send: {
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  connecting: {
+    fontSize: 12,
+    textAlign: "center",
+    marginTop: 6
+  }
+});export{ProjectChat};//# sourceMappingURL=ProjectChat.js.map