@tuturuuu/ui 0.4.0 → 0.5.0

package/src/components/ui/chat/chat-sidebar-sections.ts

@@ -0,0 +1,199 @@
+import type { ChatConversation } from '@tuturuuu/internal-api';
+import type { ChatConversationScope } from './utils';
+
+export type ChatConversationSectionLabels = {
+  ai: string;
+  channel: string;
+  direct: string;
+  group: string;
+};
+
+export type ChatConversationSourceLabels = {
+  external: string;
+  zaloPersonal: string;
+};
+
+export interface ChatConversationSourceGroup {
+  conversations: ChatConversation[];
+  id: string;
+  label: string;
+}
+
+export interface ChatConversationSection {
+  conversations: ChatConversation[];
+  label: string | null;
+  sectionType: ChatConversation['type'];
+  sourceGroups: ChatConversationSourceGroup[];
+}
+
+const DEFAULT_SOURCE_LABELS = {
+  external: 'External source',
+  zaloPersonal: 'Zalo Personal',
+} as const satisfies ChatConversationSourceLabels;
+
+export function getChatConversationSections({
+  conversations,
+  labels,
+  scope,
+  sourceLabels = DEFAULT_SOURCE_LABELS,
+}: {
+  conversations: ChatConversation[];
+  labels: ChatConversationSectionLabels;
+  scope?: ChatConversationScope;
+  sourceLabels?: ChatConversationSourceLabels;
+}): ChatConversationSection[] {
+  if (scope === 'workspaces') {
+    return [
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'channel'
+        ),
+        label: labels.channel,
+        sectionType: 'channel',
+        sourceLabels,
+      }),
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'ai'
+        ),
+        label: labels.ai,
+        sectionType: 'ai',
+        sourceLabels,
+      }),
+    ];
+  }
+
+  if (scope === 'personal') {
+    return [
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'direct'
+        ),
+        label: labels.direct,
+        sectionType: 'direct',
+        sourceLabels,
+      }),
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'group'
+        ),
+        label: labels.group,
+        sectionType: 'group',
+        sourceLabels,
+      }),
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'channel'
+        ),
+        label: labels.channel,
+        sectionType: 'channel',
+        sourceLabels,
+      }),
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'ai'
+        ),
+        label: labels.ai,
+        sectionType: 'ai',
+        sourceLabels,
+      }),
+    ];
+  }
+
+  return [
+    createChatConversationSection({
+      conversations,
+      label: null,
+      sectionType: 'direct',
+      sourceLabels,
+    }),
+  ];
+}
+
+export function getChatConversationSourceGroups({
+  conversations,
+  labels = DEFAULT_SOURCE_LABELS,
+}: {
+  conversations: ChatConversation[];
+  labels?: ChatConversationSourceLabels;
+}) {
+  const groups = new Map<string, ChatConversationSourceGroup>();
+
+  for (const conversation of conversations) {
+    const sourceGroup = getChatConversationSourceGroup(conversation, labels);
+
+    if (!sourceGroup) continue;
+
+    const group = groups.get(sourceGroup.id);
+
+    if (group) {
+      group.conversations.push(conversation);
+    } else {
+      groups.set(sourceGroup.id, {
+        ...sourceGroup,
+        conversations: [conversation],
+      });
+    }
+  }
+
+  return [...groups.values()];
+}
+
+function createChatConversationSection({
+  conversations,
+  label,
+  sectionType,
+  sourceLabels,
+}: {
+  conversations: ChatConversation[];
+  label: string | null;
+  sectionType: ChatConversation['type'];
+  sourceLabels: ChatConversationSourceLabels;
+}): ChatConversationSection {
+  const sourceGroups = getChatConversationSourceGroups({
+    conversations,
+    labels: sourceLabels,
+  });
+  const sourceConversationIds = new Set(
+    sourceGroups.flatMap((group) =>
+      group.conversations.map((conversation) => conversation.id)
+    )
+  );
+
+  return {
+    conversations: conversations.filter(
+      (conversation) => !sourceConversationIds.has(conversation.id)
+    ),
+    label,
+    sectionType,
+    sourceGroups,
+  };
+}
+
+function getChatConversationSourceGroup(
+  conversation: ChatConversation,
+  labels: ChatConversationSourceLabels
+): Omit<ChatConversationSourceGroup, 'conversations'> | null {
+  const metadata = conversation.metadata ?? {};
+
+  if (metadata.source !== 'ai-agent-external-thread') return null;
+
+  const adapter = readString(metadata.adapter);
+
+  if (adapter !== 'zalo') return null;
+
+  const agentId = readString(metadata.agentId) ?? 'unknown-agent';
+  const channelId =
+    readString(metadata.channelId) ??
+    readString(metadata.externalChannelId) ??
+    'unknown-channel';
+
+  return {
+    id: `external:${adapter}:${agentId}:${channelId}`,
+    label: labels.zaloPersonal,
+  };
+}
+
+function readString(value: unknown) {
+  return typeof value === 'string' && value.trim() ? value.trim() : null;
+}

package/src/components/ui/chat/chat-sidebar.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useVirtualizer } from '@tanstack/react-virtual';
 import {
   Bot,
   Funnel,
@@ -13,7 +12,7 @@ import {
 import type { ChatConversation, ChatMessage } from '@tuturuuu/internal-api';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
-import { type ReactNode, type UIEvent, useMemo, useRef, useState } from 'react';
+import { type ReactNode, useState } from 'react';
 import { Button } from '../button';
 import {
   DropdownMenu,
@@ -24,12 +23,18 @@ import {
   DropdownMenuTrigger,
 } from '../dropdown-menu';
 import { Input } from '../input';
-import { ConversationRow, SearchResultList } from './chat-sidebar-items';
+import { ConversationGroups } from './chat-sidebar-conversation-groups';
+import { SearchResultList } from './chat-sidebar-items';
 import type {
   ChatConversationArchiveFilter,
   ChatConversationScope,
 } from './utils';
 
+export {
+  getChatConversationSections,
+  getChatConversationSourceGroups,
+} from './chat-sidebar-sections';
+
 interface ChatSidebarProps {
   actions?: ReactNode;
   archiveFilter?: ChatConversationArchiveFilter;
@@ -51,6 +56,7 @@ interface ChatSidebarProps {
   scope?: ChatConversationScope;
   showControls?: boolean;
   showTitle?: boolean;
+  sourceGroupStorageKey?: string | null;
   searchValue: string;
   selectedConversationId?: string | null;
 }
@@ -76,6 +82,7 @@ export function ChatSidebar({
   scope,
   showControls = true,
   showTitle = true,
+  sourceGroupStorageKey,
   searchValue,
   selectedConversationId,
 }: ChatSidebarProps) {
@@ -154,6 +161,7 @@ export function ChatSidebar({
             archiveFilter={archiveFilter}
             scope={scope}
             selectedConversationId={selectedConversationId}
+            sourceGroupStorageKey={sourceGroupStorageKey}
           />
         ) : (
           <div className="p-6 text-center">
@@ -171,261 +179,6 @@ export function ChatSidebar({
   );
 }
 
-type ConversationListItem =
-  | { key: string; label: string; type: 'archive-label' }
-  | {
-      key: string;
-      label: string;
-      sectionType: ChatConversation['type'];
-      type: 'group-label';
-    }
-  | { conversation: ChatConversation; key: string; type: 'conversation' }
-  | { key: string; type: 'loader' };
-
-type ChatConversationSectionLabels = {
-  ai: string;
-  channel: string;
-  direct: string;
-  group: string;
-};
-
-export function getChatConversationSections({
-  conversations,
-  labels,
-  scope,
-}: {
-  conversations: ChatConversation[];
-  labels: ChatConversationSectionLabels;
-  scope?: ChatConversationScope;
-}) {
-  if (scope === 'workspaces') {
-    return [
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'channel'
-        ),
-        label: labels.channel,
-        sectionType: 'channel' as const,
-      },
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'ai'
-        ),
-        label: labels.ai,
-        sectionType: 'ai' as const,
-      },
-    ];
-  }
-
-  if (scope === 'personal') {
-    return [
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'direct'
-        ),
-        label: labels.direct,
-        sectionType: 'direct' as const,
-      },
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'group'
-        ),
-        label: labels.group,
-        sectionType: 'group' as const,
-      },
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'channel'
-        ),
-        label: labels.channel,
-        sectionType: 'channel' as const,
-      },
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'ai'
-        ),
-        label: labels.ai,
-        sectionType: 'ai' as const,
-      },
-    ];
-  }
-
-  return [
-    {
-      conversations,
-      label: null,
-      sectionType: 'direct' as const,
-    },
-  ];
-}
-
-function ConversationGroups({
-  archiveFilter,
-  conversations,
-  currentUserId,
-  hasMoreConversations,
-  isFetchingMoreConversations,
-  onArchiveConversation,
-  onLoadMoreConversations,
-  onPinConversation,
-  onSelectConversation,
-  scope,
-  selectedConversationId,
-}: {
-  archiveFilter: ChatConversationArchiveFilter;
-  conversations: ChatConversation[];
-  currentUserId: string;
-  hasMoreConversations?: boolean;
-  isFetchingMoreConversations?: boolean;
-  onArchiveConversation?: (conversationId: string) => void;
-  onLoadMoreConversations?: () => Promise<unknown> | undefined;
-  onPinConversation?: (conversationId: string, pinned: boolean) => void;
-  onSelectConversation: (conversationId: string) => void;
-  scope?: ChatConversationScope;
-  selectedConversationId?: string | null;
-}) {
-  const t = useTranslations('chat');
-  const parentRef = useRef<HTMLDivElement | null>(null);
-  const groups = useMemo(
-    () =>
-      getChatConversationSections({
-        conversations,
-        labels: {
-          ai: t('ai_agents'),
-          channel: t('channels'),
-          direct: t('direct_messages'),
-          group: t('groups'),
-        },
-        scope,
-      }),
-    [conversations, scope, t]
-  );
-  const items = useMemo<ConversationListItem[]>(() => {
-    const next: ConversationListItem[] = [];
-    if (archiveFilter !== 'active') {
-      next.push({
-        key: 'archive-label',
-        label:
-          archiveFilter === 'archived'
-            ? t('showing_archived_chats')
-            : t('showing_all_chats'),
-        type: 'archive-label',
-      });
-    }
-
-    for (const [index, group] of groups.entries()) {
-      if (group.conversations.length === 0) continue;
-      if (group.label) {
-        next.push({
-          key: `group-${group.label}-${index}`,
-          label: group.label,
-          sectionType: group.sectionType,
-          type: 'group-label',
-        });
-      }
-
-      for (const conversation of group.conversations) {
-        next.push({
-          conversation,
-          key: conversation.id,
-          type: 'conversation',
-        });
-      }
-    }
-
-    if (hasMoreConversations) next.push({ key: 'loader', type: 'loader' });
-    return next;
-  }, [archiveFilter, groups, hasMoreConversations, t]);
-
-  const virtualizer = useVirtualizer({
-    count: items.length,
-    estimateSize: (index) => {
-      const item = items[index];
-      if (item?.type === 'conversation') return 36;
-      if (item?.type === 'loader') return 44;
-      return 30;
-    },
-    getItemKey: (index) => items[index]?.key ?? index,
-    getScrollElement: () => parentRef.current,
-    overscan: 8,
-  });
-  const virtualItems = virtualizer.getVirtualItems();
-
-  function maybeLoadMore(event: UIEvent<HTMLDivElement>) {
-    if (!(hasMoreConversations && onLoadMoreConversations)) return;
-    if (isFetchingMoreConversations) return;
-
-    const target = event.currentTarget;
-    const distanceToEnd =
-      target.scrollHeight - target.scrollTop - target.clientHeight;
-    if (distanceToEnd < 180) {
-      void onLoadMoreConversations();
-    }
-  }
-
-  return (
-    <div
-      className="h-full overflow-y-auto overflow-x-hidden overscroll-contain p-2"
-      onScroll={maybeLoadMore}
-      ref={parentRef}
-    >
-      <div
-        className="relative"
-        style={{ height: `${virtualizer.getTotalSize()}px` }}
-      >
-        {virtualItems.map((virtualItem) => {
-          const item = items[virtualItem.index];
-          if (!item) return null;
-
-          return (
-            <div
-              className="absolute inset-x-0 top-0"
-              data-index={virtualItem.index}
-              key={virtualItem.key}
-              ref={virtualizer.measureElement}
-              style={{ transform: `translateY(${virtualItem.start}px)` }}
-            >
-              {item.type === 'archive-label' ? (
-                <p className="px-2 py-1 text-muted-foreground text-xs">
-                  {item.label}
-                </p>
-              ) : item.type === 'group-label' ? (
-                <h3 className="flex items-center gap-1.5 px-2 py-1.5 font-medium text-muted-foreground text-xs uppercase">
-                  <ConversationSectionIcon type={item.sectionType} />
-                  {item.label}
-                </h3>
-              ) : item.type === 'loader' ? (
-                <div className="flex items-center justify-center py-2 text-muted-foreground text-xs">
-                  <LoaderCircle className="mr-2 size-3.5 animate-spin" />
-                  {t('loading_conversations')}
-                </div>
-              ) : (
-                <ConversationRow
-                  conversation={item.conversation}
-                  currentUserId={currentUserId}
-                  isSelected={item.conversation.id === selectedConversationId}
-                  onArchiveConversation={onArchiveConversation}
-                  onPinConversation={onPinConversation}
-                  onSelectConversation={onSelectConversation}
-                />
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function ConversationSectionIcon({ type }: { type: ChatConversation['type'] }) {
-  const className = 'size-3.5 shrink-0';
-
-  if (type === 'channel') return <Hash className={className} />;
-  if (type === 'ai') return <Bot className={className} />;
-  if (type === 'group') return <Users className={className} />;
-  return <MessageCircle className={className} />;
-}
-
 export function ChatConversationFilterMenu({
   archiveFilter,
   className,

package/src/components/ui/chat/chat-workspace.tsx

@@ -48,6 +48,7 @@ import {
   filterChatConversations,
   getChatConversationTypesForScope,
   getChatSelectionStorageKey,
+  getChatSourceGroupStorageKey,
   getConversationTitle,
   isReadOnlyChatConversation,
   normalizeChatConversationScope,
@@ -123,6 +124,9 @@ export function ChatWorkspace({
   const selectionStorageKey = conversationScope
     ? getChatSelectionStorageKey(wsId, conversationScope)
     : null;
+  const sourceGroupStorageKey = conversationScope
+    ? getChatSourceGroupStorageKey(wsId, conversationScope)
+    : null;
   const requestedConversationPending = Boolean(
     requestedConversationId &&
       !conversationIds.has(requestedConversationId) &&
@@ -491,6 +495,7 @@ export function ChatWorkspace({
           searchResults={searchResults}
           searchValue={searchValue}
           selectedConversationId={activeConversationId}
+          sourceGroupStorageKey={sourceGroupStorageKey}
           scope={conversationScope ?? undefined}
         />
       ) : null}

package/src/components/ui/chat/utils.ts

@@ -244,6 +244,13 @@ export function getChatSelectionStorageKey(
   return `tuturuuu.chat.selectedConversation.${wsId}.${scope}`;
 }
 
+export function getChatSourceGroupStorageKey(
+  wsId: string,
+  scope: ChatConversationScope
+) {
+  return `tuturuuu.chat.collapsedSourceGroups.${wsId}.${scope}`;
+}
+
 export function resolveChatConversationSelection({
   conversationIds,
   requestedConversationId,

package/src/components/ui/custom/settings/task-settings.tsx

@@ -21,6 +21,12 @@ import { Switch } from '@tuturuuu/ui/switch';
 import { useTranslations } from 'next-intl';
 import { useEffect } from 'react';
 import { TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID } from '../../tu-do/shared/task-due-date-visibility';
+import {
+  clampTaskSoundEffectsVolume,
+  DEFAULT_TASK_SOUND_EFFECTS_VOLUME,
+  TASK_SOUND_EFFECTS_ENABLED_CONFIG_ID,
+  TASK_SOUND_EFFECTS_VOLUME_CONFIG_ID,
+} from '../../tu-do/shared/task-sound-effects';
 
 interface TaskSettingsData {
   task_auto_assign_to_self: boolean;
@@ -74,6 +80,18 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
     isLoading: showReviewDueDatesLoading,
     isPending: showReviewDueDatesPending,
   } = useUserBooleanConfig(TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID, false);
+  const {
+    value: soundEffectsEnabled,
+    setValue: setSoundEffectsEnabled,
+    isLoading: soundEffectsEnabledLoading,
+    isPending: soundEffectsEnabledPending,
+  } = useUserBooleanConfig(TASK_SOUND_EFFECTS_ENABLED_CONFIG_ID, true);
+  const { data: soundEffectsVolume, isLoading: soundEffectsVolumeLoading } =
+    useUserConfig(
+      TASK_SOUND_EFFECTS_VOLUME_CONFIG_ID,
+      String(DEFAULT_TASK_SOUND_EFFECTS_VOLUME)
+    );
+  const updateSoundEffectsVolume = useUpdateUserConfig();
 
   const { data: submitShortcut, isLoading: submitShortcutLoading } =
     useUserConfig('TASK_SUBMIT_SHORTCUT', 'enter');
@@ -128,9 +146,19 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
     updateSettings.mutate({ fade_completed_tasks: checked });
   };
 
+  const handleSoundEffectsVolumeChange = (value: string) => {
+    updateSoundEffectsVolume.mutate({
+      configId: TASK_SOUND_EFFECTS_VOLUME_CONFIG_ID,
+      value: String(clampTaskSoundEffectsVolume(value)),
+    });
+  };
+
   const effectiveAutoAssignValue = isPersonalWorkspace
     ? true
     : (settings?.task_auto_assign_to_self ?? false);
+  const normalizedSoundEffectsVolume = String(
+    clampTaskSoundEffectsVolume(soundEffectsVolume)
+  );
 
   return (
     <div className="space-y-8">
@@ -163,6 +191,54 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
           />
         </SettingItemTab>
         <Separator />
+        <SettingItemTab
+          title={t('sound_effects')}
+          description={t('sound_effects_description')}
+        >
+          <Switch
+            aria-label={t('sound_effects')}
+            checked={soundEffectsEnabled}
+            onCheckedChange={setSoundEffectsEnabled}
+            disabled={soundEffectsEnabledLoading || soundEffectsEnabledPending}
+          />
+        </SettingItemTab>
+        <Separator />
+        <SettingItemTab
+          title={t('sound_effects_volume')}
+          description={t('sound_effects_volume_description')}
+        >
+          <Select
+            value={normalizedSoundEffectsVolume}
+            onValueChange={handleSoundEffectsVolumeChange}
+            disabled={
+              soundEffectsVolumeLoading ||
+              updateSoundEffectsVolume.isPending ||
+              !soundEffectsEnabled
+            }
+          >
+            <SelectTrigger
+              aria-label={t('sound_effects_volume')}
+              className="w-36"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="15">
+                {t('sound_effects_volume_soft')}
+              </SelectItem>
+              <SelectItem value="35">
+                {t('sound_effects_volume_balanced')}
+              </SelectItem>
+              <SelectItem value="60">
+                {t('sound_effects_volume_lively')}
+              </SelectItem>
+              <SelectItem value="85">
+                {t('sound_effects_volume_bold')}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </SettingItemTab>
+        <Separator />
         <SettingItemTab
           title={t('draft_mode')}
           description={t('draft_mode_description')}