feat: implement TagSelector component for improved tag management across dashboard features

- Added TagSelector component to streamline tag selection in various components.
- Refactored existing tag handling in DashboardConversationsPage, ConversationTagPicker, EditDialog, and TicketsPage to utilize the new TagSelector.
- Removed redundant tag handling functions and optimized state management for tags.
- Updated tests to ensure proper functionality of the new tag handling logic.

web/app/dashboard/conversations/_components/conversation-tag-picker.tsx

@@ -1,24 +1,9 @@
 "use client"
 
-import { CheckIcon, Loader2Icon, TagIcon } from "lucide-react"
 import { useMemo, useState } from "react"
 import { toast } from "sonner"
 
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
+import { TagBadges, TagSelector } from "@/components/tag-selector"
 import {
   addConversationTag,
   removeConversationTag,
@@ -27,39 +12,6 @@ import {
 } from "@/lib/api/agent"
 import { type TagTree } from "@/lib/api/admin"
 import { useI18n } from "@/i18n/provider"
-import { cn } from "@/lib/utils"
-
-type TagNode = TagTree & {
-  depth: number
-}
-
-function flattenTagTree(nodes: TagTree[], depth = 0): TagNode[] {
-  const result: TagNode[] = []
-  nodes.forEach((item) => {
-    result.push({ ...item, depth })
-    if (item.children.length > 0) {
-      result.push(...flattenTagTree(item.children, depth + 1))
-    }
-  })
-  return result
-}
-
-function buildTagPathMap(
-  nodes: TagTree[],
-  parentPath = ""
-): Map<number, string> {
-  const result = new Map<number, string>()
-  nodes.forEach((item) => {
-    const currentPath = parentPath ? `${parentPath} / ${item.name}` : item.name
-    result.set(item.id, currentPath)
-    if (item.children.length > 0) {
-      buildTagPathMap(item.children, currentPath).forEach((value, key) => {
-        result.set(key, value)
-      })
-    }
-  })
-  return result
-}
 
 type ConversationTagPickerProps = {
   conversation: AgentConversation
@@ -77,34 +29,45 @@ export function ConversationTagPicker({
   const t = useI18n()
   const [pendingTagId, setPendingTagId] = useState<number | null>(null)
 
-  const flattenedTags = useMemo(() => flattenTagTree(availableTags), [availableTags])
-  const selectedTagIds = useMemo(
-    () => new Set((conversation.tags ?? []).map((item) => item.id)),
+  const selectedValues = useMemo(
+    () => (conversation.tags ?? []).map((item) => item.id),
     [conversation.tags]
   )
+  const selectedTagIds = useMemo(
+    () => new Set(selectedValues),
+    [selectedValues]
+  )
 
-  async function handleToggle(tag: TagNode) {
+  async function handleChange(nextTagIds: number[]) {
     if (pendingTagId !== null) {
       return
     }
 
-    const exists = selectedTagIds.has(tag.id)
+    const tagId =
+      nextTagIds.find((id) => !selectedTagIds.has(id)) ??
+      selectedValues.find((id) => !nextTagIds.includes(id))
+
+    if (!tagId) {
+      return
+    }
+
+    const exists = selectedTagIds.has(tagId)
     const currentTags = conversation.tags ?? []
     const nextTags = exists
-      ? currentTags.filter((item) => item.id !== tag.id)
-      : [...currentTags, { id: tag.id, name: tag.name }]
+      ? currentTags.filter((item) => item.id !== tagId)
+      : [...currentTags, { id: tagId, name: "" }]
 
-    setPendingTagId(tag.id)
+    setPendingTagId(tagId)
     try {
       if (exists) {
         await removeConversationTag({
           conversationId: conversation.id,
-          tagId: tag.id,
+          tagId,
         })
       } else {
         await addConversationTag({
           conversationId: conversation.id,
-          tagId: tag.id,
+          tagId,
         })
       }
       onTagsChange(nextTags)
@@ -117,70 +80,25 @@ export function ConversationTagPicker({
   }
 
   return (
-    <Popover>
-      <PopoverTrigger
-        render={
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            className="h-7 shrink-0 gap-1 px-2 text-xs"
-            aria-label={t("conversation.editTags")}
-          />
-        }
-      >
-        <TagIcon className="size-3.5 text-muted-foreground" />
-        {t("conversation.edit")}
-      </PopoverTrigger>
-      <PopoverContent
-        align="end"
-        className="w-72 p-0"
-        onClick={(event) => event.stopPropagation()}
-      >
-        <Command>
-          <CommandInput placeholder={t("conversation.searchTags")} />
-          <CommandList>
-            {loading ? <CommandEmpty>{t("conversation.loadingTags")}</CommandEmpty> : null}
-            {!loading && flattenedTags.length === 0 ? (
-              <CommandEmpty>{t("conversation.emptyTags")}</CommandEmpty>
-            ) : null}
-            {!loading ? (
-              <CommandGroup heading={t("conversation.tagGroup")}>
-                {flattenedTags.map((tag) => {
-                  const checked = selectedTagIds.has(tag.id)
-                  const pending = pendingTagId === tag.id
-                  return (
-                    <CommandItem
-                      key={tag.id}
-                      value={`${tag.id} ${tag.name} ${tag.remark}`}
-                      disabled={pendingTagId !== null}
-                      onSelect={() => void handleToggle(tag)}
-                    >
-                      {pending ? (
-                        <Loader2Icon className="mr-2 size-4 animate-spin" />
-                      ) : (
-                        <CheckIcon
-                          className={cn(
-                            "mr-2 size-4",
-                            checked ? "opacity-100" : "opacity-0"
-                          )}
-                        />
-                      )}
-                      <span
-                        className="truncate"
-                        style={{ paddingLeft: `${tag.depth * 12}px` }}
-                      >
-                        {tag.name}
-                      </span>
-                    </CommandItem>
-                  )
-                })}
-              </CommandGroup>
-            ) : null}
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+    <TagSelector
+      mode="multiple"
+      value={selectedValues}
+      onChange={(value) => void handleChange(value)}
+      tags={availableTags}
+      loading={loading}
+      pendingTagId={pendingTagId}
+      placeholder={t("conversation.edit")}
+      triggerText={t("conversation.edit")}
+      searchPlaceholder={t("conversation.searchTags")}
+      loadingText={t("conversation.loadingTags")}
+      emptyText={t("conversation.emptyTags")}
+      align="end"
+      showSelectedBadges={false}
+      triggerVariant="ghost"
+      triggerSize="sm"
+      triggerClassName="h-7 w-auto shrink-0 justify-start gap-1 px-2 text-xs"
+      contentClassName="w-72"
+    />
   )
 }
 
@@ -197,21 +115,11 @@ export function ConversationTagBadges({
     return null
   }
 
-  const tagPathMap = buildTagPathMap(availableTags)
-
   return (
-    <div className="flex flex-wrap items-center gap-1.5">
-      {tags.map((tag) => (
-        <Badge
-          key={tag.id}
-          variant="outline"
-          className="max-w-full px-2 text-[12px] font-normal"
-        >
-          <span className="break-all">
-            {tagPathMap.get(tag.id) ?? tag.name}
-          </span>
-        </Badge>
-      ))}
-    </div>
+    <TagBadges
+      ids={tags.map((tag) => tag.id)}
+      tags={availableTags}
+      fallbackTags={tags}
+    />
   )
 }