feat: mentions

Author: 0xHericles

apps/web/index.css

@@ -67,3 +67,10 @@
     }
   }
 }
+
+/* Tiptap */
+
+.mention {
+  @apply bg-blue-500/5 text-blue-500 border border-blue-500/20 rounded-lg px-1.5
+    py-0.5 box-decoration-clone;
+}

apps/web/package.json

@@ -18,6 +18,8 @@
     "@hookform/resolvers": "^5.0.1",
     "@tanstack/react-query": "^5.72.0",
     "@tiptap/extension-placeholder": "^2.11.7",
+    "@tiptap/extension-mention": "^2.11.7",
+    "tippy.js": "^6.3.7",
     "@tiptap/react": "^2.11.7",
     "@tiptap/starter-kit": "^2.11.7",
     "dockview-react": "^4.2.1",

apps/web/src/components/chat/ChatInput.tsx

@@ -1,6 +1,7 @@
 import {
   AgentNotFoundError,
   LEGACY_API_SERVER_URL,
+  listTools,
   MODELS,
   useAgent,
   useWriteFile,
@@ -10,11 +11,12 @@ import { Icon } from "@deco/ui/components/icon.tsx";
 import { cn } from "@deco/ui/lib/utils.ts";
 import { Suspense, useEffect, useRef, useState } from "react";
 import { ErrorBoundary } from "../../ErrorBoundary.tsx";
+import { useSelectedModel } from "../../hooks/useSelectedModel.ts";
+import { useChatContext } from "./context.tsx";
+import type { MentionItem } from "./extensions/Mention.ts";
 import { ModelSelector } from "./ModelSelector.tsx";
 import { RichTextArea } from "./RichText.tsx";
-import { useChatContext } from "./context.tsx";
 import ToolsButton from "./ToolsButton.tsx";
-import { useSelectedModel } from "../../hooks/useSelectedModel.ts";
 
 export function ChatInput({ withoutTools }: { withoutTools?: boolean }) {
   return (
@@ -44,6 +46,7 @@ ChatInput.UI = (
   const {
     agentRoot,
     chat: { stop, input, handleInputChange, handleSubmit, status },
+    setStreamTools,
   } = useChatContext();
   const [isUploading, setIsUploading] = useState(false);
   const [files, setFiles] = useState<FileList | undefined>(undefined);
@@ -68,10 +71,35 @@ ChatInput.UI = (
 
   const writeFileMutation = useWriteFile();
 
-  const handleRichTextChange = (markdown: string) => {
+  const handleRichTextChange = async (
+    markdown: string,
+    mentions?: MentionItem[],
+  ) => {
     handleInputChange(
       { target: { value: markdown } } as React.ChangeEvent<HTMLTextAreaElement>,
     );
+
+    if (mentions?.length) {
+      const tools = await mentions.reduce(async (promise, mention) => {
+        const acc = await promise;
+        const integrationTools = await listTools(mention.connection);
+        if (integrationTools.tools.length > 0) {
+          const integrationId = mention.id;
+          acc[integrationId] = integrationTools.tools.map((tool) => tool.name);
+        }
+        return acc;
+      }, Promise.resolve({} as Record<string, string[]>));
+
+      // Only update stream tools if we have actual tools
+      if (Object.keys(tools).length > 0) {
+        setStreamTools(tools);
+      } else {
+        setStreamTools(null);
+      }
+    } else {
+      // If no mentions, remove the tools
+      setStreamTools(null);
+    }
   };
 
   // Auto-focus when loading state changes from true to false

apps/web/src/components/chat/ChatMessages.tsx

@@ -93,6 +93,7 @@ export function ChatMessages() {
                 key={message.id}
                 message={message}
                 isStreaming={isStreaming}
+                agentId={agentId}
                 isLastMessage={messages.length === index + 1}
               />
             ))}

apps/web/src/components/chat/Message.tsx

@@ -1,14 +1,17 @@
 import type { Message } from "@ai-sdk/react";
+import { useAgent } from "@deco/sdk";
 import { Button } from "@deco/ui/components/button.tsx";
 import { Icon } from "@deco/ui/components/icon.tsx";
 import { cn } from "@deco/ui/lib/utils.ts";
 import { useMemo } from "react";
+import { AgentAvatar } from "../common/Avatar.tsx";
 import { MemoizedMarkdown } from "./Markdown.tsx";
-import { ToolMessage } from "./ToolMessage.tsx";
 import { ReasoningPart } from "./ReasoningPart.tsx";
+import { ToolMessage } from "./ToolMessage.tsx";
 
 interface ChatMessageProps {
   message: Message;
+  agentId: string;
   isStreaming?: boolean;
   isLastMessage?: boolean;
 }
@@ -111,8 +114,11 @@ function mergeParts(parts: Part[] | undefined): MessagePart[] {
 }
 
 export function ChatMessage(
-  { message, isStreaming = false, isLastMessage = false }: ChatMessageProps,
+  { message, agentId, isStreaming = false, isLastMessage = false }:
+    ChatMessageProps,
 ) {
+  const { data: agent } = useAgent(agentId);
+
   const isUser = message.role === "user";
   const timestamp = new Date(message.createdAt || Date.now())
     .toLocaleTimeString([], {
@@ -167,17 +173,27 @@ export function ChatMessage(
   return (
     <div
       className={cn(
-        "w-full group relative flex items-start gap-4 px-4 z-20 text-slate-700 group",
+        "w-full group relative flex items-start gap-3 px-4 z-20 text-slate-700 group",
         isUser ? "flex-row-reverse py-4" : "flex-row",
       )}
     >
+      {!isUser && (
+        <div className="flex-shrink-0">
+          <AgentAvatar
+            name={agent?.name}
+            avatar={agent?.avatar}
+            className="h-8 w-8 rounded-lg"
+          />
+        </div>
+      )}
       <div
         className={cn(
           "flex flex-col gap-1",
           isUser ? "items-end max-w-[70%]" : "w-full items-start",
         )}
       >
         <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          {!isUser && <span className="font-medium">{agent?.name}</span>}
           <span>{timestamp}</span>
         </div>
 

apps/web/src/components/chat/RichText.tsx

@@ -1,33 +1,27 @@
+import { type Integration, useIntegrations } from "@deco/sdk";
 import { cn } from "@deco/ui/lib/utils.ts";
 import Placeholder from "@tiptap/extension-placeholder";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import { useEffect } from "react";
 import { Markdown } from "tiptap-markdown";
+import {
+  Mention,
+  type MentionItem,
+  useMentionSuggestion,
+} from "./extensions/Mention.ts";
 import { NoNewLine } from "./extensions/NoNewLine.ts";
 
-export interface Mention {
-  id: string;
-  type: string;
-  content?: string;
-  label?: string;
-  title?: string;
-  models?: Array<{
-    model: string;
-    instructions: string;
-  }>;
-  selectedModel?: string;
-}
-
 interface RichTextAreaProps {
   value: string;
-  onChange: (markdown: string) => void;
+  onChange: (markdown: string, mentions?: MentionItem[]) => void;
   onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
   onKeyUp?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
   onPaste?: (event: React.ClipboardEvent) => void;
   disabled?: boolean;
   placeholder?: string;
   className?: string;
+  integrations?: Integration[];
 }
 
 export function RichTextArea({
@@ -40,13 +34,17 @@ export function RichTextArea({
   placeholder,
   className,
 }: RichTextAreaProps) {
+  const { data: integrations } = useIntegrations();
+  const suggestion = useMentionSuggestion({ integrations });
+
   const editor = useEditor({
     extensions: [
       StarterKit,
       Markdown.configure({
         html: true,
       }),
       NoNewLine,
+      Mention(suggestion),
       Placeholder.configure({
         placeholder: placeholder ?? "Type a message...",
       }),
@@ -58,7 +56,12 @@ export function RichTextArea({
         html: true,
       });
 
-      onChange(markdown);
+      const mentions = editor.getJSON().content?.flatMap((node) =>
+        node.content?.filter((child) => child.type === "mention")
+          .map((child) => child.attrs) || []
+      ).filter(Boolean) as MentionItem[];
+
+      onChange(markdown, mentions);
     },
     editorProps: {
       attributes: {

apps/web/src/components/chat/ToolMessage.tsx

@@ -1,13 +1,13 @@
 import type { Message } from "@ai-sdk/react";
+import { Button } from "@deco/ui/components/button.tsx";
 import { Icon } from "@deco/ui/components/icon.tsx";
 import { Spinner } from "@deco/ui/components/spinner.tsx";
-import { Button } from "@deco/ui/components/button.tsx";
 import { cn } from "@deco/ui/lib/utils.ts";
-import { useEffect, useRef, useState } from "react";
-import { openPanel } from "../dock/index.tsx";
+import { useRef, useState } from "react";
 import { useChatContext } from "./context.tsx";
 import { Picker } from "./Picker.tsx";
 import { AgentCard } from "./tools/AgentCard.tsx";
+import { HandoffResponse } from "./tools/HandoffResponse.tsx";
 import { Preview } from "./tools/Preview.tsx";
 import { parseHandoffTool } from "./utils/parse.ts";
 
@@ -28,6 +28,7 @@ const CUSTOM_UI_TOOLS = [
   "CONFIRM",
   "CONFIGURE",
   "AGENT_CREATE",
+  "HANDOFF_",
 ] as const;
 type CustomUITool = typeof CUSTOM_UI_TOOLS[number];
 
@@ -43,7 +44,7 @@ interface ToolInvocation {
 }
 
 function isCustomUITool(toolName: string): toolName is CustomUITool {
-  return CUSTOM_UI_TOOLS.includes(toolName as CustomUITool);
+  return CUSTOM_UI_TOOLS.some((tool) => toolName.startsWith(tool));
 }
 
 function ToolStatus({
@@ -89,32 +90,6 @@ function ToolStatus({
     ).replace(/"(\w+)":/g, '"$1":');
   };
 
-  useEffect(() => {
-    if (
-      tool.state === "result" &&
-      tool.result?.data &&
-      tool.toolName.startsWith("HANDOFF_")
-    ) {
-      const { threadId, agentId } = tool.result.data as {
-        threadId: string;
-        agentId: string;
-      };
-
-      const panelId = `chat-${threadId}`;
-
-      openPanel({
-        id: panelId,
-        component: "chatView",
-        title: parseHandoffTool(tool.toolName),
-        params: {
-          threadId,
-          agentId,
-          key: `${panelId}-${Date.now()}`,
-        },
-      });
-    }
-  }, [tool.state]);
-
   const onClick = () => {
     setIsExpanded((prev) => {
       const newState = !prev;
@@ -224,8 +199,16 @@ function CustomToolUI({ tool, isLastMessage }: {
 }) {
   const { select } = useChatContext();
 
-  if (tool.state !== "result" || !tool.result?.data) return null;
+  if (tool.toolName.startsWith("HANDOFF_") && tool.state !== "result") {
+    return (
+      <div className="flex items-center gap-2 text-sm text-muted-foreground p-4 border border-slate-200 rounded-2xl">
+        <Spinner size="xs" variant="default" />
+        <span>Delegating to {parseHandoffTool(tool.toolName)}</span>
+      </div>
+    );
+  }
 
+  if (tool.state !== "result" || !tool.result?.data) return null;
   switch (tool.toolName) {
     case "RENDER": {
       return (
@@ -268,6 +251,13 @@ function CustomToolUI({ tool, isLastMessage }: {
       );
     }
     default: {
+      if (tool.toolName.startsWith("HANDOFF_")) {
+        const { threadId, agentId } = tool.result.data as {
+          threadId: string;
+          agentId: string;
+        };
+        return <HandoffResponse agentId={agentId} threadId={threadId} />;
+      }
       return null;
     }
   }