@lobehub/lobehub 2.0.0-next.276 → 2.0.0-next.278

package/src/app/[variants]/(main)/image/_layout/ConfigPanel/components/ImageNum.tsx

@@ -1,116 +1,15 @@
 'use client';
 
 import { ENABLE_BUSINESS_FEATURES } from '@lobechat/business-const';
-import { ActionIcon, Flexbox, InputNumber } from '@lobehub/ui';
-import { createStaticStyles, cx } from 'antd-style';
+import { ActionIcon, Flexbox, InputNumber, Segmented } from '@lobehub/ui';
 import { Check, Plus, X } from 'lucide-react';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useImageStore } from '@/store/image';
 import { imageGenerationConfigSelectors } from '@/store/image/selectors';
 
 const DEFAULT_IMAGE_NUM_MAX = ENABLE_BUSINESS_FEATURES ? 8 : 50;
-
-const styles = createStaticStyles(({ css, cssVar }) => ({
-  actionButton: css`
-    flex-shrink: 0;
-  `,
-
-  button: css`
-    cursor: pointer;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    min-width: 40px;
-    height: 32px;
-    padding-block: 0;
-    padding-inline: 12px;
-    border: 1px solid ${cssVar.colorBorder};
-    border-radius: ${cssVar.borderRadius}px;
-
-    font-size: 14px;
-    font-weight: 500;
-    color: ${cssVar.colorText};
-
-    background: ${cssVar.colorBgContainer};
-
-    transition: all 0.2s ease;
-
-    &:hover {
-      border-color: ${cssVar.colorPrimary};
-      background: ${cssVar.colorBgTextHover};
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-
-      &:hover {
-        border-color: ${cssVar.colorBorder};
-        background: ${cssVar.colorBgContainer};
-      }
-    }
-  `,
-
-  cancelButton: css`
-    border-color: ${cssVar.colorBorder};
-    color: ${cssVar.colorTextTertiary};
-
-    &:hover {
-      border-color: ${cssVar.colorBorderSecondary};
-      color: ${cssVar.colorText};
-      background: ${cssVar.colorBgTextHover};
-    }
-  `,
-
-  confirmButton: css`
-    border-color: ${cssVar.colorSuccess};
-    color: ${cssVar.colorSuccess};
-
-    &:hover {
-      border-color: ${cssVar.colorSuccessHover};
-      color: ${cssVar.colorSuccessHover};
-      background: ${cssVar.colorSuccessBg};
-    }
-  `,
-
-  container: css`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  `,
-
-  editContainer: css`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    width: 100%;
-  `,
-
-  input: css`
-    flex: 1;
-    min-width: 80px;
-
-    .ant-input {
-      font-weight: 500;
-      text-align: center;
-    }
-  `,
-
-  selectedButton: css`
-    border-color: ${cssVar.colorPrimary};
-    color: ${cssVar.colorPrimary};
-    background: ${cssVar.colorPrimaryBg};
-
-    &:hover {
-      border-color: ${cssVar.colorPrimary};
-      color: ${cssVar.colorPrimary};
-      background: ${cssVar.colorPrimaryBgHover};
-    }
-  `,
-}));
+const CUSTOM_VALUE = '__custom__';
 
 interface ImageNumSelectorProps {
   disabled?: boolean;
@@ -130,34 +29,52 @@ const ImageNum = memo<ImageNumSelectorProps>(
 
     const isCustomValue = !presetCounts.includes(imageNum);
 
-    // 处理预设按钮点击
-    const handlePresetClick = useCallback(
-      (count: number) => {
+    const options = useMemo(() => {
+      const items = presetCounts.map((count) => ({
+        label: String(count),
+        value: count,
+      }));
+
+      // Add custom option or show current custom value
+      if (isCustomValue) {
+        items.push({
+          label: String(imageNum),
+          value: imageNum,
+        });
+      } else {
+        items.push({
+          label: <Plus size={16} style={{ verticalAlign: 'middle' }} />,
+          value: CUSTOM_VALUE,
+        } as any);
+      }
+
+      return items;
+    }, [presetCounts, isCustomValue, imageNum]);
+
+    const handleChange = useCallback(
+      (value: number | string) => {
         if (disabled) return;
-        setImageNum(count);
+
+        if (value === CUSTOM_VALUE || (isCustomValue && value === imageNum)) {
+          // Enter edit mode
+          setCustomCount(imageNum);
+          customCountRef.current = imageNum;
+          setIsEditing(true);
+        } else {
+          setImageNum(value as number);
+        }
       },
-      [disabled, setImageNum],
+      [disabled, isCustomValue, imageNum, setImageNum],
     );
 
-    // 进入编辑模式
-    const handleEditStart = useCallback(() => {
-      if (disabled) return;
-      setCustomCount(imageNum);
-      customCountRef.current = imageNum;
-      setIsEditing(true);
-    }, [disabled, imageNum]);
-
-    // 确认自定义输入
     const handleCustomConfirm = useCallback(() => {
       let count = customCountRef.current;
 
-      // 如果解析失败或输入为空，使用当前值
       if (count === null) {
         setIsEditing(false);
         return;
       }
 
-      // 智能处理超出范围的值 (作为二次保险)
       if (count > max) {
         count = max;
       } else if (count < min) {
@@ -174,10 +91,7 @@ const ImageNum = memo<ImageNumSelectorProps>(
       setCustomCount(null);
     }, []);
 
-    // 处理输入变化
     const handleInputChange = useCallback((value: number | string | null) => {
-      console.log('handleInputChange', value);
-
       if (value === null) {
         setCustomCount(null);
         customCountRef.current = null;
@@ -192,10 +106,8 @@ const ImageNum = memo<ImageNumSelectorProps>(
       }
     }, []);
 
-    // 自动聚焦和选择输入框内容
     useEffect(() => {
       if (isEditing) {
-        // 延迟聚焦以确保 input 已渲染
         setTimeout(() => {
           if (inputRef.current) {
             inputRef.current.focus();
@@ -205,16 +117,12 @@ const ImageNum = memo<ImageNumSelectorProps>(
       }
     }, [isEditing]);
 
-    // 验证输入是否有效
-    const isValidInput = useCallback(() => {
-      return customCount !== null;
-    }, [customCount]);
+    const isValidInput = customCount !== null;
 
     if (isEditing) {
       return (
-        <div className={styles.editContainer}>
+        <Flexbox gap={8} horizontal style={{ width: '100%' }}>
           <InputNumber
-            className={styles.input}
             max={max}
             min={min}
             onChange={handleInputChange}
@@ -228,59 +136,32 @@ const ImageNum = memo<ImageNumSelectorProps>(
             placeholder={`${min}-${max}`}
             ref={inputRef}
             size="small"
+            style={{ flex: 1 }}
             value={customCount}
           />
           <ActionIcon
-            className={cx(styles.actionButton, styles.confirmButton)}
-            disabled={!isValidInput()}
+            color="success"
+            disabled={!isValidInput}
             icon={Check}
             onClick={handleCustomConfirm}
             size="small"
+            variant="filled"
           />
-          <ActionIcon
-            className={cx(styles.actionButton, styles.cancelButton)}
-            icon={X}
-            onClick={handleCustomCancel}
-            size="small"
-          />
-        </div>
+          <ActionIcon icon={X} onClick={handleCustomCancel} size="small" variant="filled" />
+        </Flexbox>
       );
     }
 
     return (
-      <Flexbox className={styles.container} horizontal>
-        {presetCounts.map((count) => (
-          <button
-            className={cx(styles.button, imageNum === count && styles.selectedButton)}
-            disabled={disabled}
-            key={count}
-            onClick={() => handlePresetClick(count)}
-            type="button"
-          >
-            {count}
-          </button>
-        ))}
-
-        {isCustomValue ? (
-          <button
-            className={cx(styles.button, styles.selectedButton)}
-            disabled={disabled}
-            onClick={handleEditStart}
-            type="button"
-          >
-            {imageNum}
-          </button>
-        ) : (
-          <button
-            className={styles.button}
-            disabled={disabled}
-            onClick={handleEditStart}
-            type="button"
-          >
-            <Plus size={16} />
-          </button>
-        )}
-      </Flexbox>
+      <Segmented
+        block
+        disabled={disabled}
+        onChange={handleChange}
+        options={options}
+        style={{ width: '100%' }}
+        value={isCustomValue ? imageNum : imageNum}
+        variant="filled"
+      />
     );
   },
 );

package/src/app/[variants]/(main)/image/_layout/ConfigPanel/components/ResolutionSelect.tsx

@@ -1,86 +1,41 @@
-import { Flexbox } from '@lobehub/ui';
-import { createStaticStyles, cx } from 'antd-style';
-import { memo, useCallback } from 'react';
+import { Segmented } from '@lobehub/ui';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
-  button: css`
-    cursor: pointer;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    min-width: 60px;
-    height: 32px;
-    padding-block: 0;
-    padding-inline: 16px;
-    border: 1px solid ${cssVar.colorBorder};
-    border-radius: ${cssVar.borderRadius}px;
-
-    font-size: 14px;
-    font-weight: 500;
-    color: ${cssVar.colorText};
-
-    background: ${cssVar.colorBgContainer};
-
-    transition: all 0.2s ease;
-
-    &:hover {
-      border-color: ${cssVar.colorPrimary};
-      background: ${cssVar.colorBgTextHover};
-    }
-  `,
-
-  container: css`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  `,
-
-  selectedButton: css`
-    border-color: ${cssVar.colorPrimary};
-    color: ${cssVar.colorPrimary};
-    background: ${cssVar.colorPrimaryBg};
-
-    &:hover {
-      border-color: ${cssVar.colorPrimary};
-      color: ${cssVar.colorPrimary};
-      background: ${cssVar.colorPrimaryBgHover};
-    }
-  `,
-}));
-
 const ResolutionSelect = memo(() => {
   const { t } = useTranslation('image');
   const { value, setValue, enumValues } = useGenerationConfigParam('resolution');
 
-  const handleClick = useCallback(
-    (resolution: string) => {
-      setValue(resolution);
+  const handleChange = useCallback(
+    (resolution: string | number) => {
+      setValue(String(resolution));
     },
     [setValue],
   );
 
-  if (!enumValues || enumValues.length === 0) {
+  const options = useMemo(() => {
+    if (!enumValues || enumValues.length === 0) return [];
+    return enumValues.map((resolution) => ({
+      label: t(`config.resolution.options.${resolution}`, { defaultValue: resolution }),
+      value: resolution,
+    }));
+  }, [enumValues, t]);
+
+  if (options.length === 0) {
     return null;
   }
 
   return (
-    <Flexbox className={styles.container} horizontal>
-      {enumValues.map((resolution) => (
-        <button
-          className={cx(styles.button, value === resolution && styles.selectedButton)}
-          key={resolution}
-          onClick={() => handleClick(resolution)}
-          type="button"
-        >
-          {t(`config.resolution.options.${resolution}`, { defaultValue: resolution })}
-        </button>
-      ))}
-    </Flexbox>
+    <Segmented
+      block
+      onChange={handleChange}
+      options={options}
+      style={{ width: '100%' }}
+      value={value}
+      variant="filled"
+    />
   );
 });
 

package/src/app/[variants]/(mobile)/router/mobileRouter.config.tsx

@@ -254,4 +254,22 @@ export const mobileRoutes: RouteConfig[] = [
     path: '/onboarding',
   },
   ...BusinessMobileRoutesWithoutMainLayout,
+
+  // Share topic route (outside main layout)
+  {
+    children: [
+      {
+        element: dynamicElement(
+          () => import('../../share/t/[id]'),
+          'Mobile > Share > Topic',
+        ),
+        path: ':id',
+      },
+    ],
+    element: dynamicElement(
+      () => import('../../share/t/[id]/_layout'),
+      'Mobile > Share > Topic > Layout',
+    ),
+    path: '/share/t',
+  },
 ];

package/src/app/[variants]/router/desktopRouter.config.tsx

@@ -398,6 +398,24 @@ export const desktopRoutes: RouteConfig[] = [
   // Onboarding route (outside main layout)
 
   ...BusinessDesktopRoutesWithoutMainLayout,
+
+  // Share topic route (outside main layout)
+  {
+    children: [
+      {
+        element: dynamicElement(
+          () => import('../share/t/[id]'),
+          'Desktop > Share > Topic',
+        ),
+        path: ':id',
+      },
+    ],
+    element: dynamicElement(
+      () => import('../share/t/[id]/_layout'),
+      'Desktop > Share > Topic > Layout',
+    ),
+    path: '/share/t',
+  },
 ];
 
 // Desktop onboarding route (SPA-only)

package/src/app/[variants]/share/t/[id]/SharedMessageList.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Flexbox } from '@lobehub/ui';
+import { memo, useCallback, useMemo } from 'react';
+
+import { ChatList, ConversationProvider, MessageItem } from '@/features/Conversation';
+import { useChatStore } from '@/store/chat';
+import { messageMapKey } from '@/store/chat/utils/messageMapKey';
+
+interface SharedMessageListProps {
+  agentId: string | null;
+  groupId: string | null;
+  shareId: string;
+  topicId: string;
+}
+
+const SharedMessageList = memo<SharedMessageListProps>(({ agentId, groupId, shareId, topicId }) => {
+  const context = useMemo(
+    () => ({
+      agentId: agentId ?? '',
+      groupId: groupId ?? undefined,
+      topicId,
+      topicShareId: shareId,
+    }),
+    [agentId, groupId, shareId, topicId],
+  );
+
+  // Sync messages to chatStore for artifact selectors to work
+  const chatKey = useMemo(() => messageMapKey(context), [context]);
+  const replaceMessages = useChatStore((s) => s.replaceMessages);
+  const messages = useChatStore((s) => s.dbMessagesMap[chatKey]);
+
+  const itemContent = useCallback(
+    (index: number, id: string) => <MessageItem disableEditing id={id} index={index} key={id} />,
+    [],
+  );
+
+  return (
+    <ConversationProvider
+      context={context}
+      hasInitMessages={!!messages}
+      messages={messages}
+      onMessagesChange={(messages) => {
+        replaceMessages(messages, { context });
+      }}
+    >
+      <Flexbox flex={1}>
+        <ChatList disableActionsBar itemContent={itemContent} />
+      </Flexbox>
+    </ConversationProvider>
+  );
+});
+
+export default SharedMessageList;

package/src/app/[variants]/share/t/[id]/_layout/index.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { Avatar, Flexbox } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles, cssVar } from 'antd-style';
+import NextLink from 'next/link';
+import { PropsWithChildren, memo, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, Outlet, useParams } from 'react-router-dom';
+import useSWR from 'swr';
+
+import { ProductLogo } from '@/components/Branding';
+import { DEFAULT_AVATAR } from '@/const/meta';
+import GroupAvatar from '@/features/GroupAvatar';
+import UserAvatar from '@/features/User/UserAvatar';
+import { lambdaClient } from '@/libs/trpc/client';
+import { useAgentStore } from '@/store/agent';
+import { useUserStore } from '@/store/user';
+import { authSelectors } from '@/store/user/slices/auth/selectors';
+
+import SharePortal from '../features/Portal';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    width: 100vw;
+    min-height: 100vh;
+    background: ${token.colorBgLayout};
+  `,
+  content: css`
+    flex: 1;
+    width: 100%;
+    padding-block: 24px;
+    padding-inline: 24px;
+  `,
+  footer: css`
+    padding-block: 16px;
+    padding-inline: 24px;
+    color: ${token.colorTextTertiary};
+    text-align: center;
+  `,
+  header: css`
+    height: 52px;
+    padding: 8px;
+  `,
+}));
+
+const ShareTopicLayout = memo<PropsWithChildren>(({ children }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('chat');
+  const { id } = useParams<{ id: string }>();
+  const dispatchAgentMap = useAgentStore((s) => s.internal_dispatchAgentMap);
+  const isLogin = useUserStore(authSelectors.isLogin);
+
+  const { data } = useSWR(
+    id ? ['shared-topic', id] : null,
+    () => lambdaClient.share.getSharedTopic.query({ shareId: id! }),
+    { revalidateOnFocus: false },
+  );
+
+  // Set agent meta to agentStore for avatar display
+  useEffect(() => {
+    if (data?.agentId && data.agentMeta) {
+      const meta = {
+        avatar: data.agentMeta.avatar ?? undefined,
+        backgroundColor: data.agentMeta.backgroundColor ?? undefined,
+        title: data.agentMeta.title ?? undefined,
+      };
+      dispatchAgentMap(data.agentId, meta);
+    }
+  }, [data?.agentId, data?.agentMeta, dispatchAgentMap]);
+
+  const isGroup = !!data?.groupId;
+  const isInboxAgent = !isGroup && data?.agentMeta?.slug === 'inbox';
+  const agentOrGroupTitle =
+    data?.groupMeta?.title || (isInboxAgent ? 'LobeAI' : data?.agentMeta?.title);
+  const agentMarketIdentifier = data?.agentMeta?.marketIdentifier;
+
+  // Build group avatars for GroupAvatar component
+  const groupAvatars = useMemo(() => {
+    if (!isGroup || !data?.groupMeta?.members) return [];
+    return data.groupMeta.members.map((member) => ({
+      avatar: member.avatar || DEFAULT_AVATAR,
+      backgroundColor: member.backgroundColor || undefined,
+    }));
+  }, [isGroup, data?.groupMeta?.members]);
+
+  const renderAgentOrGroupAvatar = () => {
+    // For group: use GroupAvatar with members
+    if (isGroup && groupAvatars.length > 0) {
+      return <GroupAvatar avatars={groupAvatars} size={24} />;
+    }
+
+    // For inbox agent: skip avatar as it's the same as product icon
+    if (isInboxAgent) {
+      return null;
+    }
+
+    // For agent: use single Avatar
+    if (data?.agentMeta?.avatar) {
+      return (
+        <Avatar
+          avatar={data.agentMeta.avatar}
+          background={data.agentMeta.backgroundColor || cssVar.colorFillTertiary}
+          shape="square"
+          size={24}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  const renderAgentOrGroupTitle = () => {
+    if (!agentOrGroupTitle) return null;
+
+    // If agent has marketIdentifier, render as link to assistant page
+    if (agentMarketIdentifier && !data?.groupMeta?.title) {
+      return (
+        <a href={`/community/assistant/${agentMarketIdentifier}`} rel="noreferrer" target="_blank">
+          <Typography.Text ellipsis strong>
+            {agentOrGroupTitle}
+          </Typography.Text>
+        </a>
+      );
+    }
+
+    return (
+      <Typography.Text ellipsis strong>
+        {agentOrGroupTitle}
+      </Typography.Text>
+    );
+  };
+
+  return (
+    <Flexbox className={styles.container}>
+      <Flexbox align="center" className={styles.header} gap={12} horizontal justify="space-between">
+        <Flexbox align="center" flex={1} gap={12} horizontal>
+          {isLogin ? (
+            <Link to="/">
+              <ProductLogo size={24} />
+            </Link>
+          ) : (
+            <NextLink href="/login">
+              <ProductLogo size={24} />
+            </NextLink>
+          )}
+          {renderAgentOrGroupAvatar()}
+          {renderAgentOrGroupTitle()}
+        </Flexbox>
+        {data?.title && (
+          <Typography.Text ellipsis strong style={{ textAlign: 'center' }}>
+            {data.title}
+          </Typography.Text>
+        )}
+        <Flexbox align="center" flex={1} horizontal justify="flex-end">
+          {isLogin && <UserAvatar size={24} />}
+        </Flexbox>
+      </Flexbox>
+      <Flexbox className={styles.content} horizontal style={{ overflow: 'hidden' }}>
+        <Flexbox flex={1} style={{ overflow: 'hidden' }}>
+          {children ?? <Outlet />}
+        </Flexbox>
+        <SharePortal />
+      </Flexbox>
+      <Typography.Text className={styles.footer}>{t('sharePageDisclaimer')}</Typography.Text>
+    </Flexbox>
+  );
+});
+
+export default ShareTopicLayout;