reply to thread added to fake composer, working

Author: adamleithp

packages/ui/src/features/canvas/components/ChannelFeedView.tsx

@@ -48,17 +48,20 @@ import { TaskTabIcon } from "@posthog/ui/features/browser-tabs/TaskTabIcon";
 import {
   MentionText,
   mentionChipClass,
+  TaskLinkIcon,
 } from "@posthog/ui/features/canvas/components/MentionText";
 import type { ChannelFeedSystemMessage } from "@posthog/ui/features/canvas/hooks/useChannelFeedMessages";
 import { useChannelTaskData } from "@posthog/ui/features/canvas/hooks/useChannelTaskData";
 import { useTaskThread } from "@posthog/ui/features/canvas/hooks/useTaskThread";
+import { useThreadPanelStore } from "@posthog/ui/features/canvas/stores/threadPanelStore";
 import { userDisplayName } from "@posthog/ui/features/canvas/utils/userDisplay";
 import {
   type SidebarPrState,
   useTaskPrStatus,
 } from "@posthog/ui/features/sidebar/useTaskPrStatus";
 import { useInView } from "@posthog/ui/primitives/hooks/useInView";
 import { Text } from "@radix-ui/themes";
+import { useNavigate } from "@tanstack/react-router";
 import { Fragment, memo, type ReactNode, useMemo } from "react";
 
 // Feed rows poll their reply counts slower than the open thread panel — the
@@ -532,15 +535,33 @@ export function DemoMessageItem({
   fromKind,
   content,
   createdAt,
+  replyTo,
   onDelete,
 }: {
   fromName: string;
   fromKind: "human" | "agent";
   content: string;
   createdAt?: string;
-  /** When set, a hover "…" menu offers a destructive delete. */
+  /** When set, renders a Slack-style "replied to a thread: …" preview line. */
+  replyTo?: { label: string; href: string };
   onDelete?: () => void;
 }) {
+  const navigate = useNavigate();
+  const openThread = useThreadPanelStore((s) => s.openThread);
+  // The reply target is a task deep link; clicking opens that task's *thread*
+  // dock (not the full task page) in its channel home.
+  const replyMatch = replyTo?.href.match(
+    /\/website\/([^/]+)\/tasks\/([^/?#]+)/,
+  );
+  const openReplyThread = () => {
+    if (!replyMatch) return;
+    const [, replyChannelId, taskId] = replyMatch;
+    openThread(replyChannelId, taskId);
+    void navigate({
+      to: "/website/$channelId",
+      params: { channelId: replyChannelId },
+    });
+  };
   return (
     <ThreadItem className="rounded-none py-4 pr-8">
       <ThreadItemGutter>
@@ -564,6 +585,21 @@ export function DemoMessageItem({
             </ThreadItemTimestamp>
           )}
         </ThreadItemHeader>
+        {replyTo && (
+          <div className="flex items-center gap-1 text-muted-foreground text-xs">
+            <span>replied to a thread:</span>
+            {/* Opens the task's thread dock (not the task page); the live
+                task-status icon matches reference links. */}
+            <button
+              type="button"
+              onClick={openReplyThread}
+              className="inline-flex min-w-0 items-center gap-1 text-primary hover:underline"
+            >
+              {replyMatch && <TaskLinkIcon taskId={replyMatch[2]} />}
+              <span className="truncate">{replyTo.label}</span>
+            </button>
+          </div>
+        )}
         <ThreadItemBody className="wrap-break-word">
           {content ? (
             // Same renderer as real thread messages: @mentions become chips and
@@ -620,6 +656,7 @@ function DemoFeedRow({
         fromKind={demo.fromKind}
         content={demo.content}
         createdAt={message.createdAt}
+        replyTo={demo.replyTo}
         onDelete={onDelete ? () => onDelete(message.id) : undefined}
       />
     </ChatMessageScrollerItem>

packages/ui/src/features/canvas/components/InsertFakeMessageDialog.tsx

@@ -17,6 +17,10 @@ import {
 import { DemoMessageItem } from "@posthog/ui/features/canvas/components/ChannelFeedView";
 import { MentionComposer } from "@posthog/ui/features/canvas/components/MentionComposer";
 import { ReferencePicker } from "@posthog/ui/features/canvas/components/ReferencePicker";
+import {
+  type ThreadReply,
+  ThreadReplyPicker,
+} from "@posthog/ui/features/canvas/components/ThreadReplyPicker";
 import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useOrgMembers } from "@posthog/ui/features/canvas/hooks/useOrgMembers";
 import { useDemoFeedStore } from "@posthog/ui/features/canvas/stores/demoFeedStore";
@@ -55,6 +59,7 @@ export function InsertFakeMessageDialog({
   const [fromName, setFromName] = useState("");
   const [fromKind, setFromKind] = useState<"human" | "agent">("human");
   const [content, setContent] = useState("");
+  const [replyTo, setReplyTo] = useState<ThreadReply | null>(null);
 
   // Reset fields on each open so a prior draft never lingers (prev-prop compare,
   // not an effect, so there's no stale flash).
@@ -65,6 +70,7 @@ export function InsertFakeMessageDialog({
       setFromName("");
       setFromKind("human");
       setContent("");
+      setReplyTo(null);
     }
   }
 
@@ -98,6 +104,7 @@ export function InsertFakeMessageDialog({
         fromKind === "agent" ? AGENT_PERSONA : fromName.trim() || "Someone",
       fromKind,
       content: content.trim(),
+      replyTo: replyTo ?? undefined,
     });
     toast.success("Added to the channel feed");
     onOpenChange(false);
@@ -170,6 +177,16 @@ export function InsertFakeMessageDialog({
               )}
             </Field>
 
+            {/* Optional: render the message as a reply to a thread (a task). */}
+            <Field>
+              <FieldLabel>Reply to thread (optional)</FieldLabel>
+              <ThreadReplyPicker
+                channelId={channelId}
+                value={replyTo}
+                onChange={setReplyTo}
+              />
+            </Field>
+
             {/* Message body: a real thread composer, so @ opens the same member
               picker as a thread. The reference picker inserts canvas / channel /
               task / CONTEXT.md deep links. */}
@@ -202,6 +219,7 @@ export function InsertFakeMessageDialog({
                   fromName={fromName}
                   fromKind={fromKind}
                   content={content}
+                  replyTo={replyTo ?? undefined}
                 />
               </div>
             </div>

packages/ui/src/features/canvas/components/MentionText.tsx

@@ -24,7 +24,7 @@ import {
 // The task-list status icon for a `…/tasks/<id>` link — live, like the sidebar
 // and feed cards (generating spinner, PR/cloud state). Falls back to the code
 // glyph while the task loads or if it isn't cached.
-function TaskLinkIcon({ taskId }: { taskId: string }) {
+export function TaskLinkIcon({ taskId }: { taskId: string }) {
   const { data } = useQuery({ ...taskDetailQuery(taskId), staleTime: 30_000 });
   return <TaskTabIcon task={data ?? getCachedTask(taskId)} size={12} />;
 }

packages/ui/src/features/canvas/components/ThreadReplyPicker.tsx

@@ -0,0 +1,106 @@
+import { CaretDownIcon, XIcon } from "@phosphor-icons/react";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@posthog/quill";
+import type { Task } from "@posthog/shared/domain-types";
+import { TaskTabIcon } from "@posthog/ui/features/browser-tabs/TaskTabIcon";
+import { useChannelFeed } from "@posthog/ui/features/canvas/hooks/useChannelFeed";
+import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
+import { useBackendChannel } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
+import { useTasks } from "@posthog/ui/features/tasks/useTasks";
+
+export interface ThreadReply {
+  label: string;
+  href: string;
+}
+
+// Picks the thread (a task) a fake message replies to. Same task list as the
+// reference picker — this channel's tasks first, then all others.
+export function ThreadReplyPicker({
+  channelId,
+  value,
+  onChange,
+}: {
+  channelId: string;
+  value: ThreadReply | null;
+  onChange: (value: ThreadReply | null) => void;
+}) {
+  const { channels } = useChannels();
+  const channelName = channels.find((c) => c.id === channelId)?.name;
+  const { channel: backendChannel } = useBackendChannel(channelName);
+  const { tasks: channelTasks } = useChannelFeed(backendChannel?.id);
+  const { data: allTasks = [] } = useTasks();
+
+  const channelTaskIds = new Set(channelTasks.map((t) => t.id));
+  const otherTasks = allTasks.filter((t) => !channelTaskIds.has(t.id));
+
+  const taskItem = (t: Task) => (
+    <DropdownMenuItem
+      key={t.id}
+      onClick={() =>
+        onChange({
+          label: t.title || "Untitled task",
+          href: `/website/${channelId}/tasks/${t.id}`,
+        })
+      }
+    >
+      <TaskTabIcon task={t} size={14} />
+      <span className="truncate">{t.title || "Untitled task"}</span>
+    </DropdownMenuItem>
+  );
+
+  return (
+    <div className="flex items-center gap-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <Button variant="outline" size="sm" className="max-w-full">
+              <span className="truncate">
+                {value ? value.label : "Choose a thread…"}
+              </span>
+              <CaretDownIcon size={12} className="ms-auto shrink-0" />
+            </Button>
+          }
+        />
+        <DropdownMenuContent align="start" className="w-72">
+          {channelTasks.length === 0 && otherTasks.length === 0 ? (
+            <DropdownMenuItem disabled>No tasks yet</DropdownMenuItem>
+          ) : (
+            <>
+              {channelTasks.length > 0 && (
+                <DropdownMenuGroup>
+                  <DropdownMenuLabel>This channel</DropdownMenuLabel>
+                  {channelTasks.map(taskItem)}
+                </DropdownMenuGroup>
+              )}
+              {otherTasks.length > 0 && (
+                <DropdownMenuGroup>
+                  {channelTasks.length > 0 && <DropdownMenuSeparator />}
+                  <DropdownMenuLabel>Other tasks</DropdownMenuLabel>
+                  {otherTasks.map(taskItem)}
+                </DropdownMenuGroup>
+              )}
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {value && (
+        <Button
+          variant="outline"
+          size="icon-sm"
+          aria-label="Clear reply"
+          onClick={() => onChange(null)}
+        >
+          <XIcon size={13} />
+        </Button>
+      )}
+    </div>
+  );
+}

packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx

@@ -73,7 +73,12 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
       id: e.id,
       createdAt: e.createdAt,
       text: e.content,
-      demo: { fromName: e.fromName, fromKind: e.fromKind, content: e.content },
+      demo: {
+        fromName: e.fromName,
+        fromKind: e.fromKind,
+        content: e.content,
+        replyTo: e.replyTo,
+      },
     }));
     const base = [...feedMessages, ...demoMessages];
     const creation = channelCreationMessage(backendChannel);

packages/ui/src/features/canvas/hooks/useChannelFeedMessages.ts

@@ -20,6 +20,8 @@ export interface DemoFeedMessage {
   fromKind: "human" | "agent";
   /** Markdown; may embed links to canvases / other channels. */
   content: string;
+  /** When set, the message renders as a reply to this thread (a task deep link). */
+  replyTo?: { label: string; href: string };
 }
 
 // The `payload` key that marks a feed message as a demo composer post — the