@comergehq/studio 0.1.8 → 0.1.10

package/src/studio/hooks/useOptimisticChatMessages.ts

@@ -0,0 +1,128 @@
+import * as React from 'react';
+
+import type { ChatMessage } from '../../components/models/types';
+
+export type UseOptimisticChatMessagesParams = {
+  threadId: string | null;
+  shouldForkOnEdit: boolean;
+  chatMessages: ChatMessage[];
+  onSendChat: (text: string, attachments?: string[]) => void | Promise<void>;
+};
+
+export type UseOptimisticChatMessagesResult = {
+  messages: ChatMessage[];
+  onSend: (text: string, attachments?: string[]) => Promise<void>;
+};
+
+type OptimisticChatMessage = {
+  id: string;
+  content: string;
+  createdAtIso: string;
+  baseServerLastId: string | null;
+  failed: boolean;
+};
+
+function makeOptimisticId() {
+  return `optimistic:${Date.now().toString(36)}:${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function toEpochMs(createdAt: ChatMessage['createdAt']): number {
+  if (createdAt == null) return 0;
+  if (typeof createdAt === 'number') return createdAt;
+  if (createdAt instanceof Date) return createdAt.getTime();
+  const t = Date.parse(String(createdAt));
+  return Number.isFinite(t) ? t : 0;
+}
+
+function isOptimisticResolvedByServer(chatMessages: ChatMessage[], o: OptimisticChatMessage) {
+  if (o.failed) return false;
+
+  const normalize = (s: string) => s.trim();
+
+  let startIndex = -1;
+  if (o.baseServerLastId) {
+    startIndex = chatMessages.findIndex((m) => m.id === o.baseServerLastId);
+  }
+  const candidates = startIndex >= 0 ? chatMessages.slice(startIndex + 1) : chatMessages;
+
+  const target = normalize(o.content);
+  for (const m of candidates) {
+    if (m.author !== 'human') continue;
+    if (normalize(m.content) !== target) continue;
+
+    const serverMs = toEpochMs(m.createdAt);
+    const optimisticMs = Date.parse(o.createdAtIso);
+    if (Number.isFinite(optimisticMs) && optimisticMs > 0 && serverMs > 0) {
+      if (serverMs + 120_000 < optimisticMs) continue;
+    }
+    return true;
+  }
+  return false;
+}
+
+export function useOptimisticChatMessages({
+  threadId,
+  shouldForkOnEdit,
+  chatMessages,
+  onSendChat,
+}: UseOptimisticChatMessagesParams): UseOptimisticChatMessagesResult {
+  const [optimisticChat, setOptimisticChat] = React.useState<OptimisticChatMessage[]>([]);
+
+  React.useEffect(() => {
+    setOptimisticChat([]);
+  }, [threadId]);
+
+  const messages = React.useMemo(() => {
+    if (!optimisticChat || optimisticChat.length === 0) return chatMessages;
+
+    const unresolved = optimisticChat.filter((o) => !isOptimisticResolvedByServer(chatMessages, o));
+    if (unresolved.length === 0) return chatMessages;
+
+    const optimisticAsChat = unresolved.map<ChatMessage>((o) => ({
+      id: o.id,
+      author: 'human',
+      content: o.content,
+      createdAt: o.createdAtIso,
+      kind: 'optimistic',
+      meta: o.failed
+        ? { kind: 'optimistic', event: 'send.failed', status: 'error' }
+        : { kind: 'optimistic', event: 'send.pending', status: 'info' },
+    }));
+
+    const merged = [...chatMessages, ...optimisticAsChat];
+    merged.sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt)));
+    return merged;
+  }, [chatMessages, optimisticChat]);
+
+  React.useEffect(() => {
+    if (optimisticChat.length === 0) return;
+    setOptimisticChat((prev) => {
+      if (prev.length === 0) return prev;
+      const next = prev.filter((o) => !isOptimisticResolvedByServer(chatMessages, o) || o.failed);
+      return next.length === prev.length ? prev : next;
+    });
+  }, [chatMessages, optimisticChat.length]);
+
+  const onSend = React.useCallback(
+    async (text: string, attachments?: string[]) => {
+      if (shouldForkOnEdit) {
+        await onSendChat(text, attachments);
+        return;
+      }
+
+      const createdAtIso = new Date().toISOString();
+      const baseServerLastId = chatMessages.length > 0 ? chatMessages[chatMessages.length - 1]!.id : null;
+      const id = makeOptimisticId();
+
+      setOptimisticChat((prev) => [...prev, { id, content: text, createdAtIso, baseServerLastId, failed: false }]);
+
+      void Promise.resolve(onSendChat(text, attachments)).catch(() => {
+        setOptimisticChat((prev) => prev.map((m) => (m.id === id ? { ...m, failed: true } : m)));
+      });
+    },
+    [chatMessages, onSendChat, shouldForkOnEdit]
+  );
+
+  return { messages, onSend };
+}
+

package/src/studio/ui/ChatPanel.tsx

@@ -129,6 +129,7 @@ export function ChatPanel({
       messages={messages}
       showTypingIndicator={showTypingIndicator}
       topBanner={topBanner}
+      composerHorizontalPadding={0}
       listRef={listRef}
       onNearBottomChange={setNearBottom}
       overlay={

package/src/studio/ui/RuntimeRenderer.tsx

@@ -8,6 +8,11 @@ import { Text } from '../../components/primitives/Text';
 export type RuntimeRendererProps = {
   appKey: string;
   bundlePath: string | null;
+  /**
+   * When true, show the "Preparing app…" UI even if a previous bundle is available.
+   * Used to avoid briefly rendering an outdated bundle during post-edit base refresh.
+   */
+  forcePreparing?: boolean;
   /**
    * Used to force a runtime remount even when bundlePath stays constant
    * (e.g. base bundle replaced in-place).
@@ -16,8 +21,8 @@ export type RuntimeRendererProps = {
   style?: ViewStyle;
 };
 
-export function RuntimeRenderer({ appKey, bundlePath, renderToken, style }: RuntimeRendererProps) {
-  if (!bundlePath) {
+export function RuntimeRenderer({ appKey, bundlePath, forcePreparing, renderToken, style }: RuntimeRendererProps) {
+  if (!bundlePath || forcePreparing) {
     return (
       <View style={[{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }, style]}>
         <Text variant="bodyMuted">Preparing app…</Text>

package/src/studio/ui/StudioOverlay.tsx

@@ -14,6 +14,7 @@ import { ChatPanel } from './ChatPanel';
 import { ConfirmMergeFlow } from './ConfirmMergeFlow';
 import type { MergeRequestSummary } from '../../components/models/types';
 import { useTheme } from '../../theme';
+import { useOptimisticChatMessages } from '../hooks/useOptimisticChatMessages';
 
 import { MergeIcon } from '../../components/icons/MergeIcon';
 
@@ -98,17 +99,29 @@ export function StudioOverlay({
   const [commentsAppId, setCommentsAppId] = React.useState<string | null>(null);
   const [commentsCount, setCommentsCount] = React.useState<number | null>(null);
 
+  const threadId = app?.threadId ?? null;
+  const optimistic = useOptimisticChatMessages({
+    threadId,
+    shouldForkOnEdit,
+    chatMessages,
+    onSendChat,
+  });
+
   const [confirmMrId, setConfirmMrId] = React.useState<string | null>(null);
   const confirmMr = React.useMemo(
     () => (confirmMrId ? incomingMergeRequests.find((m) => m.id === confirmMrId) ?? null : null),
     [confirmMrId, incomingMergeRequests]
   );
 
-  const closeSheet = React.useCallback(() => {
-    setSheetOpen(false);
-    Keyboard.dismiss();
+  const handleSheetOpenChange = React.useCallback((open: boolean) => {
+    setSheetOpen(open);
+    if (!open) Keyboard.dismiss();
   }, []);
 
+  const closeSheet = React.useCallback(() => {
+    handleSheetOpenChange(false);
+  }, [handleSheetOpenChange]);
+
   const openSheet = React.useCallback(() => setSheetOpen(true), []);
 
   const goToChat = React.useCallback(() => {
@@ -178,7 +191,7 @@ export function StudioOverlay({
       {/* Testing glow around runtime */}
       <EdgeGlowFrame visible={isTesting} role="accent" thickness={40} intensity={1} />
 
-      <StudioBottomSheet open={sheetOpen} onOpenChange={setSheetOpen}>
+      <StudioBottomSheet open={sheetOpen} onOpenChange={handleSheetOpenChange}>
         <StudioSheetPager
           activePage={activePage}
           width={width}
@@ -209,7 +222,7 @@ export function StudioOverlay({
           }
           chat={
             <ChatPanel
-              messages={chatMessages}
+              messages={optimistic.messages}
               showTypingIndicator={chatShowTypingIndicator}
               loading={chatLoading}
               sendDisabled={chatSendDisabled}
@@ -224,7 +237,7 @@ export function StudioOverlay({
               onClose={closeSheet}
               onNavigateHome={onNavigateHome}
               onStartDraw={startDraw}
-              onSend={onSendChat}
+              onSend={optimistic.onSend}
             />
           }
         />