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

package/src/app/[variants]/(main)/group/features/Conversation/Header/ShareButton/index.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { ENABLE_TOPIC_LINK_SHARE } from '@lobechat/business-const';
 import { ActionIcon } from '@lobehub/ui';
 import { Share2 } from 'lucide-react';
 import dynamic from 'next/dynamic';
@@ -8,8 +9,12 @@ import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useWorkspaceModal } from '@/hooks/useWorkspaceModal';
+import { useChatStore } from '@/store/chat';
+
+console.log('ENABLE_TOPIC_LINK_SHARE', ENABLE_TOPIC_LINK_SHARE);
 
 const ShareModal = dynamic(() => import('@/features/ShareModal'));
+const SharePopover = dynamic(() => import('@/features/SharePopover'));
 
 interface ShareButtonProps {
   mobile?: boolean;
@@ -20,18 +25,30 @@ interface ShareButtonProps {
 const ShareButton = memo<ShareButtonProps>(({ mobile, setOpen, open }) => {
   const [isModalOpen, setIsModalOpen] = useWorkspaceModal(open, setOpen);
   const { t } = useTranslation('common');
+  const activeTopicId = useChatStore((s) => s.activeTopicId);
+
+  // Hide share button when no topic exists (no messages sent yet)
+  if (!activeTopicId) return null;
+
+  const iconButton = (
+    <ActionIcon
+      icon={Share2}
+      onClick={ENABLE_TOPIC_LINK_SHARE ? undefined : () => setIsModalOpen(true)}
+      size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}
+      title={t('share')}
+      tooltipProps={{
+        placement: 'bottom',
+      }}
+    />
+  );
 
   return (
     <>
-      <ActionIcon
-        icon={Share2}
-        onClick={() => setIsModalOpen(true)}
-        size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}
-        title={t('share')}
-        tooltipProps={{
-          placement: 'bottom',
-        }}
-      />
+      {ENABLE_TOPIC_LINK_SHARE ? (
+        <SharePopover onOpenModal={() => setIsModalOpen(true)}>{iconButton}</SharePopover>
+      ) : (
+        iconButton
+      )}
       <ShareModal onCancel={() => setIsModalOpen(false)} open={isModalOpen} />
     </>
   );

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

@@ -29,8 +29,7 @@ const AspectRatioSelect = memo<AspectRatioSelectProps>(
           {options?.map((item) => {
             const [width, height] = item.value.split(':').map(Number);
             const isWidthGreater = width > height;
-            const isEqual = width === height;
-            const isActive = isEqual ? item.value === '1:1' : active === item.value;
+            const isActive = active === item.value;
             return (
               <Block
                 align={'center'}

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;