@lobehub/chat 1.98.1 → 1.99.0

package/src/app/[variants]/(main)/image/features/PromptInput/index.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Button, TextArea } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Sparkles } from 'lucide-react';
+import type { KeyboardEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useImageStore } from '@/store/image';
+import { createImageSelectors } from '@/store/image/selectors';
+import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
+
+import PromptTitle from './Title';
+
+interface PromptInputProps {
+  disableAnimation?: boolean;
+  showTitle?: boolean;
+}
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  container: css`
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG * 1.5}px;
+    background-color: ${token.colorBgContainer};
+    box-shadow:
+      ${token.boxShadowTertiary},
+      ${isDarkMode
+        ? `0 0 48px 32px ${token.colorBgContainerSecondary}`
+        : `0 0 0  ${token.colorBgContainerSecondary}`},
+      0 32px 0 ${token.colorBgContainerSecondary};
+  `,
+  wrapper: css`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: center;
+
+    width: 100%;
+  `,
+}));
+
+const PromptInput = ({ showTitle = false }: PromptInputProps) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('image');
+  const { value, setValue } = useGenerationConfigParam('prompt');
+  const isCreating = useImageStore(createImageSelectors.isCreating);
+  const createImage = useImageStore((s) => s.createImage);
+
+  const handleGenerate = async () => {
+    await createImage();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      if (!isCreating && value.trim()) {
+        handleGenerate();
+      }
+    }
+  };
+
+  return (
+    <Flexbox
+      gap={32}
+      style={{
+        marginTop: 48,
+      }}
+      width={'100%'}
+    >
+      {showTitle && <PromptTitle />}
+
+      <Flexbox
+        align="flex-end"
+        className={styles.container}
+        gap={12}
+        height={'100%'}
+        horizontal
+        padding={'12px 12px 12px 16px'}
+        width={'100%'}
+      >
+        <TextArea
+          autoSize={{ maxRows: 6, minRows: 3 }}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={t('config.prompt.placeholder')}
+          style={{
+            borderRadius: 0,
+            padding: 0,
+          }}
+          value={value}
+          variant={'borderless'}
+        />
+        <Button
+          disabled={!value}
+          icon={Sparkles}
+          loading={isCreating}
+          onClick={handleGenerate}
+          size={'large'}
+          style={{
+            fontWeight: 500,
+            height: 64,
+            minWidth: 64,
+            width: 64,
+          }}
+          title={isCreating ? t('generation.status.generating') : t('generation.actions.generate')}
+          type={'primary'}
+        />
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default PromptInput;

package/src/app/[variants]/(main)/image/layout.tsx

@@ -0,0 +1,19 @@
+import ServerLayout from '@/components/server/ServerLayout';
+import { isServerMode } from '@/const/version';
+
+import NotSupportClient from './NotSupportClient';
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
+
+const AiImageLayout = ServerLayout({ Desktop, Mobile });
+
+AiImageLayout.displayName = 'AiImageLayout';
+
+const Layout = (props: LayoutProps) => {
+  if (!isServerMode) return <NotSupportClient />;
+
+  return <AiImageLayout {...props} />;
+};
+
+export default Layout;

package/src/app/[variants]/(main)/image/loading.tsx

@@ -0,0 +1,3 @@
+import Loading from '@/components/Loading/BrandTextLoading';
+
+export default () => <Loading />;

package/src/app/[variants]/(main)/image/page.tsx

@@ -0,0 +1,47 @@
+import { Suspense } from 'react';
+
+import StructuredData from '@/components/StructuredData';
+import { BRANDING_NAME } from '@/const/branding';
+import InitClientDB from '@/features/InitClientDB';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
+
+import ImageWorkspace from './features/ImageWorkspace';
+import SkeletonList from './features/ImageWorkspace/SkeletonList';
+
+export const generateMetadata = async (props: DynamicLayoutProps) => {
+  const locale = await RouteVariants.getLocale(props);
+  const { t } = await translation('metadata', locale);
+  return metadataModule.generate({
+    description: t('image.description', { appName: BRANDING_NAME }),
+    title: t('image.title'),
+    url: '/image',
+  });
+};
+
+const AiImage = async (props: DynamicLayoutProps) => {
+  const { locale } = await RouteVariants.getVariantsFromProps(props);
+  const { t } = await translation('metadata', locale);
+  const ld = ldModule.generate({
+    description: t('image.description', { appName: BRANDING_NAME }),
+    title: t('image.title'),
+    url: '/image',
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <InitClientDB bottom={100} />
+      <Suspense fallback={<SkeletonList />}>
+        <ImageWorkspace />
+      </Suspense>
+    </>
+  );
+};
+
+AiImage.displayName = 'AiImage';
+
+export default AiImage;

package/src/app/[variants]/(main)/settings/system-agent/index.tsx

@@ -4,13 +4,14 @@ import { DEFAULT_REWRITE_QUERY } from '@/const/settings';
 import { isServerMode } from '@/const/version';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
-import SystemAgentForm from './features/createForm';
+import SystemAgentForm from './features/SystemAgentForm';
 
 const Page = () => {
   const { enableKnowledgeBase } = useServerConfigStore(featureFlagsSelectors);
   return (
     <>
       <SystemAgentForm systemAgentKey="topic" />
+      <SystemAgentForm systemAgentKey="generationTopic" />
       <SystemAgentForm systemAgentKey="translation" />
       <SystemAgentForm systemAgentKey="historyCompress" />
       <SystemAgentForm systemAgentKey="agentMeta" />

package/src/chains/summaryGenerationTitle.ts

@@ -0,0 +1,25 @@
+import { globalHelpers } from '@/store/global/helpers';
+import { ChatStreamPayload } from '@/types/openai/chat';
+
+export const chainSummaryGenerationTitle = (
+  prompts: string[],
+  modal: 'image' | 'video',
+): Partial<ChatStreamPayload> => {
+  const lang = globalHelpers.getCurrentLanguage();
+
+  // Format multiple prompts for better readability
+  const formattedPrompts = prompts.map((prompt, index) => `${index + 1}. ${prompt}`).join('\n');
+
+  return {
+    messages: [
+      {
+        content: `你是一位资深的 AI 艺术创作者和语言大师。你需要根据用户提供的 AI ${modal} prompt 总结出一个标题。这个标题应简洁地描述创作的核心内容，将用于标识和管理该系列作品。字数需控制在10个字以内，不需要包含标点符号，输出语言为：${lang}。`,
+        role: 'system',
+      },
+      {
+        content: `提示词：\n${formattedPrompts}`,
+        role: 'user',
+      },
+    ],
+  };
+};

package/src/components/ImageItem/index.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Image } from '@lobehub/ui';
+import { ActionIcon, Image, ImageProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { Trash } from 'lucide-react';
 import { CSSProperties, memo } from 'react';
@@ -33,7 +33,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-interface FileItemProps {
+interface ImageItemProps {
   alt?: string;
   alwaysShowClose?: boolean;
   className?: string;
@@ -41,12 +41,13 @@ interface FileItemProps {
   loading?: boolean;
   onClick?: () => void;
   onRemove?: () => void;
+  preview?: ImageProps['preview'];
   style?: CSSProperties;
   url?: string;
 }
 
-const FileItem = memo<FileItemProps>(
-  ({ editable, alt, onRemove, url, loading, alwaysShowClose }) => {
+const ImageItem = memo<ImageItemProps>(
+  ({ className, style, editable, alt, onRemove, url, loading, alwaysShowClose, preview }) => {
     const IMAGE_SIZE = editable ? MIN_IMAGE_SIZE : '100%';
     const { styles, cx } = useStyles();
     const { isSafari } = usePlatform();
@@ -69,15 +70,17 @@ const FileItem = memo<FileItemProps>(
         }
         alt={alt || ''}
         alwaysShowActions={alwaysShowClose}
+        className={className}
         height={isSafari ? 'auto' : '100%'}
         isLoading={loading}
+        preview={preview}
         size={IMAGE_SIZE as any}
         src={url}
-        style={{ height: isSafari ? 'auto' : '100%' }}
+        style={{ height: isSafari ? 'auto' : '100%', width: '100%', ...style }}
         wrapperClassName={cx(styles.image, editable && styles.editableImage)}
       />
     );
   },
 );
 
-export default FileItem;
+export default ImageItem;

package/src/{features/Conversation/Error → components/InvalidAPIKey}/APIKeyForm/Bedrock.tsx

@@ -5,13 +5,12 @@ import { Network, ShieldPlus } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { FormAction } from '@/features/Conversation/Error/style';
 import { ModelProvider } from '@/libs/model-runtime';
 import { useUserStore } from '@/store/user';
 import { keyVaultsConfigSelectors } from '@/store/user/selectors';
 
-import { FormAction } from '../style';
-
-const BedrockForm = memo(() => {
+const BedrockForm = memo<{ description: string }>(({ description }) => {
   const { t } = useTranslation('modelProvider');
   const [showRegion, setShow] = useState(false);
   const [showSessionToken, setShowSessionToken] = useState(false);
@@ -28,7 +27,7 @@ const BedrockForm = memo(() => {
   return (
     <FormAction
       avatar={<Aws.Color color={theme.colorText} size={56} />}
-      description={t('bedrock.unlock.description')}
+      description={description}
       title={t('bedrock.unlock.title')}
     >
       <InputPassword

package/src/{features/Conversation/Error → components/InvalidAPIKey}/APIKeyForm/ProviderApiKeyForm.tsx

@@ -4,23 +4,24 @@ import { ReactNode, memo, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
-import { LoadingContext } from '@/features/Conversation/Error/APIKeyForm/LoadingContext';
+import { FormAction } from '@/features/Conversation/Error/style';
 import { useProviderName } from '@/hooks/useProviderName';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
-import { FormAction } from '../style';
+import { LoadingContext } from './LoadingContext';
 import { useApiKey } from './useApiKey';
 
 interface ProviderApiKeyFormProps {
   apiKeyPlaceholder?: string;
   avatar?: ReactNode;
+  description: string;
   provider: GlobalLLMProviderKey;
   showEndpoint?: boolean;
 }
 
 const ProviderApiKeyForm = memo<ProviderApiKeyFormProps>(
-  ({ provider, avatar, showEndpoint = false, apiKeyPlaceholder }) => {
+  ({ provider, avatar, showEndpoint = false, apiKeyPlaceholder, description }) => {
     const { t } = useTranslation(['modelProvider', 'error']);
     const { t: errorT } = useTranslation('error');
     const [showProxy, setShow] = useState(false);
@@ -33,7 +34,7 @@ const ProviderApiKeyForm = memo<ProviderApiKeyFormProps>(
     return (
       <FormAction
         avatar={avatar}
-        description={t(`unlock.apiKey.description`, { name: providerName, ns: 'error' })}
+        description={description}
         title={t(`unlock.apiKey.title`, { name: providerName, ns: 'error' })}
       >
         <FormPassword

package/src/components/InvalidAPIKey/APIKeyForm/index.tsx

@@ -0,0 +1,108 @@
+import { ProviderIcon } from '@lobehub/icons';
+import { Button } from '@lobehub/ui';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { ModelProvider } from '@/libs/model-runtime';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
+
+import BedrockForm from './Bedrock';
+import { LoadingContext } from './LoadingContext';
+import ProviderApiKeyForm from './ProviderApiKeyForm';
+
+interface APIKeyFormProps {
+  bedrockDescription: string;
+  description: string;
+  id: string;
+  onClose: () => void;
+  onRecreate: () => void;
+  provider?: string;
+}
+
+const APIKeyForm = memo<APIKeyFormProps>(
+  ({ provider, description, bedrockDescription, onRecreate, onClose }) => {
+    const { t } = useTranslation('error');
+    const [loading, setLoading] = useState(false);
+
+    const apiKeyPlaceholder = useMemo(() => {
+      switch (provider) {
+        case ModelProvider.Anthropic: {
+          return 'sk-ant_*****************************';
+        }
+
+        case ModelProvider.OpenRouter: {
+          return 'sk-or-********************************';
+        }
+
+        case ModelProvider.Perplexity: {
+          return 'pplx-********************************';
+        }
+
+        case ModelProvider.ZhiPu: {
+          return '*********************.*************';
+        }
+
+        case ModelProvider.Groq: {
+          return 'gsk_*****************************';
+        }
+
+        case ModelProvider.DeepSeek: {
+          return 'sk_******************************';
+        }
+
+        case ModelProvider.Qwen: {
+          return 'sk-********************************';
+        }
+
+        case ModelProvider.Github: {
+          return 'ghp_*****************************';
+        }
+
+        default: {
+          return '*********************************';
+        }
+      }
+    }, [provider]);
+
+    return (
+      <LoadingContext value={{ loading, setLoading }}>
+        <Center gap={16} style={{ maxWidth: 300 }}>
+          {provider === ModelProvider.Bedrock ? (
+            <BedrockForm description={bedrockDescription} />
+          ) : (
+            <ProviderApiKeyForm
+              apiKeyPlaceholder={apiKeyPlaceholder}
+              avatar={<ProviderIcon provider={provider} size={80} type={'avatar'} />}
+              description={description}
+              provider={provider as GlobalLLMProviderKey}
+              showEndpoint
+            />
+          )}
+          <Flexbox gap={12} width={'100%'}>
+            <Button
+              block
+              disabled={loading}
+              onClick={() => {
+                onRecreate();
+              }}
+              style={{ marginTop: 8 }}
+              type={'primary'}
+            >
+              {t('unlock.confirm')}
+            </Button>
+            <Button
+              onClick={() => {
+                onClose();
+              }}
+            >
+              {t('unlock.closeMessage')}
+            </Button>
+          </Flexbox>
+        </Center>
+      </LoadingContext>
+    );
+  },
+);
+
+export default APIKeyForm;

package/src/{features/Conversation/Error → components/InvalidAPIKey}/APIKeyForm/useApiKey.ts

@@ -2,11 +2,12 @@ import isEqual from 'fast-deep-equal';
 import { useContext } from 'react';
 
 import { isDeprecatedEdition } from '@/const/version';
-import { LoadingContext } from '@/features/Conversation/Error/APIKeyForm/LoadingContext';
 import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { useUserStore } from '@/store/user';
 import { keyVaultsConfigSelectors } from '@/store/user/selectors';
 
+import { LoadingContext } from './LoadingContext';
+
 export const useApiKey = (provider: string) => {
   const [apiKey, baseURL, setConfig] = useUserStore((s) => [
     keyVaultsConfigSelectors.getVaultByProvider(provider as any)(s)?.apiKey,

package/src/components/InvalidAPIKey/index.tsx

@@ -0,0 +1,30 @@
+import { memo } from 'react';
+
+import { ErrorActionContainer } from '@/features/Conversation/Error/style';
+
+import APIKeyForm from './APIKeyForm';
+
+interface InvalidAPIKeyProps {
+  bedrockDescription: string;
+  description: string;
+  id: string;
+  onClose: () => void;
+  onRecreate: () => void;
+  provider?: string;
+}
+const InvalidAPIKey = memo<InvalidAPIKeyProps>(
+  ({ id, provider, description, bedrockDescription, onRecreate, onClose }) => (
+    <ErrorActionContainer>
+      <APIKeyForm
+        bedrockDescription={bedrockDescription}
+        description={description}
+        id={id}
+        onClose={onClose}
+        onRecreate={onRecreate}
+        provider={provider}
+      />
+    </ErrorActionContainer>
+  ),
+);
+
+export default InvalidAPIKey;