Show IM channel source on threads

frontend/src/app/workspace/chats/page.tsx

@@ -5,6 +5,10 @@ import { useEffect, useMemo, useState } from "react";
 
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  ThreadChannelBadge,
+  ThreadChannelIcon,
+} from "@/components/workspace/thread-channel-source";
 import {
   WorkspaceBody,
   WorkspaceContainer,
@@ -12,7 +16,11 @@ import {
 } from "@/components/workspace/workspace-container";
 import { useI18n } from "@/core/i18n/hooks";
 import { useThreads } from "@/core/threads/hooks";
-import { pathOfThread, titleOfThread } from "@/core/threads/utils";
+import {
+  channelSourceOfThread,
+  pathOfThread,
+  titleOfThread,
+} from "@/core/threads/utils";
 import { formatTimeAgo } from "@/core/utils/datetime";
 
 export default function ChatsPage() {
@@ -47,20 +55,30 @@ export default function ChatsPage() {
           <main className="min-h-0 flex-1">
             <ScrollArea className="size-full py-4">
               <div className="mx-auto flex size-full max-w-(--container-width-md) flex-col">
-                {filteredThreads?.map((thread) => (
-                  <Link key={thread.thread_id} href={pathOfThread(thread)}>
-                    <div className="flex flex-col gap-2 border-b p-4">
-                      <div>
-                        <div>{titleOfThread(thread)}</div>
-                      </div>
-                      {thread.updated_at && (
-                        <div className="text-muted-foreground text-sm">
-                          {formatTimeAgo(thread.updated_at)}
+                {filteredThreads?.map((thread) => {
+                  const channelSource = channelSourceOfThread(thread);
+                  return (
+                    <Link key={thread.thread_id} href={pathOfThread(thread)}>
+                      <div className="flex flex-col gap-2 border-b p-4">
+                        <div className="flex min-w-0 items-center gap-2">
+                          <ThreadChannelIcon source={channelSource} />
+                          <div className="min-w-0 flex-1 truncate">
+                            {titleOfThread(thread)}
+                          </div>
+                          <ThreadChannelBadge
+                            source={channelSource}
+                            className="hidden sm:inline-flex"
+                          />
                         </div>
-                      )}
-                    </div>
-                  </Link>
-                ))}
+                        {thread.updated_at && (
+                          <div className="text-muted-foreground text-sm">
+                            {formatTimeAgo(thread.updated_at)}
+                          </div>
+                        )}
+                      </div>
+                    </Link>
+                  );
+                })}
               </div>
             </ScrollArea>
           </main>

frontend/src/components/workspace/recent-chat-list.tsx

@@ -55,10 +55,16 @@ import {
   useThreads,
 } from "@/core/threads/hooks";
 import type { AgentThread, AgentThreadState } from "@/core/threads/types";
-import { pathOfThread, titleOfThread } from "@/core/threads/utils";
+import {
+  channelSourceOfThread,
+  pathOfThread,
+  titleOfThread,
+} from "@/core/threads/utils";
 import { env } from "@/env";
 import { isIMEComposing } from "@/lib/ime";
 
+import { ThreadChannelIcon } from "./thread-channel-source";
+
 export function RecentChatList() {
   const { t } = useI18n();
   const router = useRouter();
@@ -182,6 +188,7 @@ export function RecentChatList() {
             <div className="flex w-full flex-col gap-1">
               {threads.map((thread) => {
                 const isActive = pathOfThread(thread) === pathname;
+                const channelSource = channelSourceOfThread(thread);
                 return (
                   <SidebarMenuItem
                     key={thread.thread_id}
@@ -190,10 +197,23 @@ export function RecentChatList() {
                     <SidebarMenuButton isActive={isActive} asChild>
                       <div>
                         <Link
-                          className="text-muted-foreground block w-full whitespace-nowrap group-hover/side-menu-item:overflow-hidden"
+                          className="text-muted-foreground flex min-w-0 items-center gap-1.5 whitespace-nowrap pr-7 group-hover/side-menu-item:overflow-hidden"
                           href={pathOfThread(thread)}
                         >
-                          {titleOfThread(thread)}
+                          <ThreadChannelIcon source={channelSource} />
+                          <span className="min-w-0 truncate">
+                            {titleOfThread(thread)}
+                          </span>
+                          {channelSource && (
+                            <span
+                              className="bg-muted text-muted-foreground ml-auto inline-flex h-5 max-w-14 shrink-0 items-center rounded-md px-1.5 text-[10px] font-medium"
+                              title={`${channelSource.label} channel`}
+                            >
+                              <span className="truncate">
+                                {channelSource.label}
+                              </span>
+                            </span>
+                          )}
                         </Link>
                         {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY !== "true" && (
                           <DropdownMenu>

frontend/src/components/workspace/thread-channel-source.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { ChannelProviderIcon } from "@/components/workspace/channels/channel-provider-icon";
+import type { ChannelThreadSource } from "@/core/threads/utils";
+import { cn } from "@/lib/utils";
+
+type ThreadChannelIconProps = {
+  source: ChannelThreadSource | null;
+  className?: string;
+};
+
+export function ThreadChannelIcon({
+  source,
+  className,
+}: ThreadChannelIconProps) {
+  if (!source) {
+    return null;
+  }
+
+  return (
+    <span
+      aria-label={`${source.label} channel`}
+      title={`${source.label} channel`}
+      className={cn("inline-flex shrink-0 items-center", className)}
+    >
+      <ChannelProviderIcon provider={source.provider} className="size-4" />
+    </span>
+  );
+}
+
+type ThreadChannelBadgeProps = {
+  source: ChannelThreadSource | null;
+  className?: string;
+};
+
+export function ThreadChannelBadge({
+  source,
+  className,
+}: ThreadChannelBadgeProps) {
+  if (!source) {
+    return null;
+  }
+
+  return (
+    <span
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-6 max-w-32 items-center gap-1 rounded-md px-2 text-xs font-medium",
+        className,
+      )}
+      title={`${source.label} channel`}
+    >
+      <ChannelProviderIcon provider={source.provider} className="size-3.5" />
+      <span className="truncate">{source.label}</span>
+    </span>
+  );
+}

frontend/src/core/threads/utils.ts

@@ -2,6 +2,12 @@ import type { Message } from "@langchain/langgraph-sdk";
 
 import type { AgentThread, AgentThreadContext } from "./types";
 
+export type ChannelThreadSource = {
+  type: "im_channel";
+  provider: string;
+  label: string;
+};
+
 type ThreadRouteTarget =
   | string
   | {
@@ -49,3 +55,42 @@ export function textOfMessage(message: Message) {
 export function titleOfThread(thread: AgentThread) {
   return thread.values?.title ?? "Untitled";
 }
+
+const CHANNEL_PROVIDER_LABELS: Record<string, string> = {
+  dingtalk: "DingTalk",
+  discord: "Discord",
+  feishu: "Feishu",
+  slack: "Slack",
+  telegram: "Telegram",
+  wechat: "WeChat",
+  wecom: "WeCom",
+};
+
+function labelOfChannelProvider(provider: string) {
+  return CHANNEL_PROVIDER_LABELS[provider] ?? provider;
+}
+
+export function channelSourceOfThread(
+  thread: Pick<AgentThread, "metadata">,
+): ChannelThreadSource | null {
+  const source = thread.metadata?.channel_source;
+  if (!source || typeof source !== "object" || Array.isArray(source)) {
+    return null;
+  }
+
+  if (Reflect.get(source, "type") !== "im_channel") {
+    return null;
+  }
+
+  const provider = Reflect.get(source, "provider");
+  if (typeof provider !== "string" || provider.trim().length === 0) {
+    return null;
+  }
+
+  const normalizedProvider = provider.trim().toLowerCase();
+  return {
+    type: "im_channel",
+    provider: normalizedProvider,
+    label: labelOfChannelProvider(normalizedProvider),
+  };
+}