From 6a912d10311d9e63b0924acc68ac5660e7d31c6c Mon Sep 17 00:00:00 2001 From: yoyoyohamapi <8338436+yoyoyohamapi@users.noreply.github.com> Date: Tue, 27 May 2025 02:00:41 +0000 Subject: [PATCH] fix(core): workspace embedding ui opt (#12532) ### TL;DR fix: workspace embedding ui optimization > CLOSE BS-3531 > CLOSE BS-3532 > CLOSE BS-3533 > CLOSE BS-3534 > CLOSE BS-3535 > CLOSE BS-3536 > CLOSE BS-3553 ## Summary by CodeRabbit - **New Features** - Added a localized "Upload file" label for improved internationalization in embedding settings. - **Style** - Improved layout and text overflow handling for attachments and ignored documents. - Enhanced visual alignment and consistency across embedding-related components. - Updated progress indicator color for better theme integration. - **Bug Fixes** - Adjusted text truncation and spacing to prevent layout issues with long filenames and document titles. - **Chores** - Updated translation completeness percentage for the "es-CL" locale. --- .../view/attachments.tsx | 3 ++- .../view/embedding-progress.tsx | 6 ++++- .../view/embedding-settings.tsx | 4 ++- .../view/ignored-docs.tsx | 4 ++- .../view/styles-css.ts | 27 ++++++++++++++++++- packages/frontend/i18n/src/i18n.gen.ts | 4 +++ packages/frontend/i18n/src/resources/en.json | 1 + 7 files changed, 44 insertions(+), 5 deletions(-) diff --git a/packages/frontend/core/src/modules/workspace-indexer-embedding/view/attachments.tsx b/packages/frontend/core/src/modules/workspace-indexer-embedding/view/attachments.tsx index 7cdaab67f..b8f6e2df9 100644 --- a/packages/frontend/core/src/modules/workspace-indexer-embedding/view/attachments.tsx +++ b/packages/frontend/core/src/modules/workspace-indexer-embedding/view/attachments.tsx @@ -79,7 +79,8 @@ const PersistedItem: React.FC<{ attachment: PersistedAttachmentFile }> = ({ className={attachmentTitle} data-testid="workspace-embedding-setting-attachment-persisted-item" > - {attachment.fileName} + + {attachment.fileName} ); }; diff --git a/packages/frontend/core/src/modules/workspace-indexer-embedding/view/embedding-progress.tsx b/packages/frontend/core/src/modules/workspace-indexer-embedding/view/embedding-progress.tsx index ffbf5f4f5..e0f5e3022 100644 --- a/packages/frontend/core/src/modules/workspace-indexer-embedding/view/embedding-progress.tsx +++ b/packages/frontend/core/src/modules/workspace-indexer-embedding/view/embedding-progress.tsx @@ -1,5 +1,6 @@ import { Progress } from '@affine/component'; import { useI18n } from '@affine/i18n'; +import { cssVarV2 } from '@toeverything/theme/v2'; import { embeddingProgress, embeddingProgressTitle } from './styles-css'; @@ -51,7 +52,10 @@ const EmbeddingProgress: React.FC = ({ status }) => { testId="embedding-progress" value={progress} readonly - style={{ visibility: loading ? 'hidden' : 'visible' }} + style={{ + visibility: loading ? 'hidden' : 'visible', + color: cssVarV2('text/primary'), + }} /> ); diff --git a/packages/frontend/core/src/modules/workspace-indexer-embedding/view/embedding-settings.tsx b/packages/frontend/core/src/modules/workspace-indexer-embedding/view/embedding-settings.tsx index 3598bf66f..71256615d 100644 --- a/packages/frontend/core/src/modules/workspace-indexer-embedding/view/embedding-settings.tsx +++ b/packages/frontend/core/src/modules/workspace-indexer-embedding/view/embedding-settings.tsx @@ -219,7 +219,9 @@ export const EmbeddingSettings: React.FC = () => { data-testid="workspace-embedding-setting-upload-button" variant="primary" > - {t['Upload']()} + {t[ + 'com.affine.settings.workspace.indexer-embedding.embedding.upload-file' + ]()} diff --git a/packages/frontend/core/src/modules/workspace-indexer-embedding/view/ignored-docs.tsx b/packages/frontend/core/src/modules/workspace-indexer-embedding/view/ignored-docs.tsx index 74802f663..e4c7db34e 100644 --- a/packages/frontend/core/src/modules/workspace-indexer-embedding/view/ignored-docs.tsx +++ b/packages/frontend/core/src/modules/workspace-indexer-embedding/view/ignored-docs.tsx @@ -56,7 +56,9 @@ const DocItem: React.FC = ({ doc }) => { >
- {docTitle} + + {docTitle} +
diff --git a/packages/frontend/core/src/modules/workspace-indexer-embedding/view/styles-css.ts b/packages/frontend/core/src/modules/workspace-indexer-embedding/view/styles-css.ts index 8d0a0abdc..cc3d02803 100644 --- a/packages/frontend/core/src/modules/workspace-indexer-embedding/view/styles-css.ts +++ b/packages/frontend/core/src/modules/workspace-indexer-embedding/view/styles-css.ts @@ -8,6 +8,7 @@ export const attachmentsWrapper = css({ width: '100%', alignItems: 'center', padding: '8px', + marginTop: '-13px', gap: '4px', isolation: 'isolate', border: `1px solid ${cssVar('borderColor')}`, @@ -37,6 +38,15 @@ export const attachmentTitle = css({ display: 'flex', alignItems: 'center', gap: '4px', + width: '95%', + + '.attachment-title-text': { + flex: 1, + minWidth: 0, + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + }, }); export const attachmentError = css({ @@ -55,6 +65,7 @@ export const excludeDocsWrapper = css({ width: '100%', alignItems: 'center', padding: '8px', + marginTop: '-13px', gap: '4px', isolation: 'isolate', border: `1px solid ${cssVar('borderColor')}`, @@ -83,9 +94,20 @@ export const docItem = css({ export const docItemTitle = css({ fontSize: '14px', fontWeight: 500, + paddingRight: '12px', color: cssVar('textPrimaryColor'), display: 'flex', alignItems: 'center', + gap: '4px', + flex: 1, + overflow: 'hidden', + textOverflow: 'ellipsis', + + '.ignore-doc-title': { + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + overflow: 'hidden', + }, }); export const docItemIcon = css({ @@ -97,11 +119,13 @@ export const docItemIcon = css({ export const docItemInfo = css({ display: 'flex', + flex: '0 0 auto', fontSize: '12px', fontWeight: 400, color: cssVar('textSecondaryColor'), gap: '12px', alignItems: 'center', + justifyContent: 'flex-end', }); export const embeddingProgress = css({ @@ -109,7 +133,7 @@ export const embeddingProgress = css({ flexDirection: 'column', alignItems: 'center', width: '100%', - paddingBottom: '16px', + paddingBottom: '24px', fontSize: '14px', fontWeight: 400, color: cssVar('textSecondaryColor'), @@ -121,4 +145,5 @@ export const embeddingProgressTitle = css({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', + fontSize: '12px', }); diff --git a/packages/frontend/i18n/src/i18n.gen.ts b/packages/frontend/i18n/src/i18n.gen.ts index 22227a1aa..2141448cd 100644 --- a/packages/frontend/i18n/src/i18n.gen.ts +++ b/packages/frontend/i18n/src/i18n.gen.ts @@ -6231,6 +6231,10 @@ export function useAFFiNEI18N(): { * `Select doc` */ ["com.affine.settings.workspace.indexer-embedding.embedding.select-doc"](): string; + /** + * `Upload file` + */ + ["com.affine.settings.workspace.indexer-embedding.embedding.upload-file"](): string; /** * `Workspace Embedding` */ diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index ba31f9eb3..b30c37e8a 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -1556,6 +1556,7 @@ "com.affine.settings.workspace.indexer-embedding.embedding.title": "Embedding", "com.affine.settings.workspace.indexer-embedding.embedding.description": "Embedding allows AI to retrieve your content. If the indexer uses local settings, it may affect some of the results of the Embedding.", "com.affine.settings.workspace.indexer-embedding.embedding.select-doc": "Select doc", + "com.affine.settings.workspace.indexer-embedding.embedding.upload-file": "Upload file", "com.affine.settings.workspace.indexer-embedding.embedding.switch.title": "Workspace Embedding", "com.affine.settings.workspace.indexer-embedding.embedding.switch.description": "AI can call files embedded in the workspace.", "com.affine.settings.workspace.indexer-embedding.embedding.switch.error": "Failed to update workspace doc embedding enabled",