Skip to content

feat(memory): align Create Memory modal layout and spacing with Create Variable modal design system#13287

Merged
olayinkaadelakun merged 7 commits into
release-1.10.0from
LE-1296
May 26, 2026
Merged

feat(memory): align Create Memory modal layout and spacing with Create Variable modal design system#13287
olayinkaadelakun merged 7 commits into
release-1.10.0from
LE-1296

Conversation

@olayinkaadelakun

@olayinkaadelakun olayinkaadelakun commented May 22, 2026

Copy link
Copy Markdown
Collaborator

Align Create Memory modal with Create Variable modal design

The Create Memory modal was inconsistent with the Create Variable modal,
which is the established design reference for form modals in the platform.
Spacing, sizing, label patterns, and structural conventions all diverged.

What changed

  • Modal size small-h-fullx-small to match the compact form modal standard
  • Section spacing gap-6gap-4 to match platform convention
  • Field group pattern flex flex-col gap-2space-y-2 for consistency
  • Removed inline asterisk markup (*) from required labels — not used in
    the reference modal
  • Removed unnecessary responsive grid wrapper around the embedding model
    field (was always full-width regardless of breakpoint)
  • Header icon sizing and color updated to match the Globe icon pattern
    (h-6 w-6 pr-1 text-primary) used in Create Variable
  • Provider hint text changed from span to div to match the hint
    pattern used elsewhere in the modal system
  • Added 4 missing i18n keys for field labels: memory.nameLabel,
    memory.embeddingModelLabel, memory.preprocessingModelLabel,
    memory.preprocessingInstructionsLabel

No logic or functionality was changed.

Test plan

  • Open Create Memory modal — layout matches Create Variable modal in
    spacing, label style, and modal width
  • All fields (name, embedding model, batch size, preprocessing toggle,
    preprocessing model, preprocessing instructions) render and function correctly
  • Preprocessing section still shows/hides correctly on toggle
  • Provider hint text appears below model selectors when a model is selected
  • Submit button disabled state respects all required field conditions
  • No hardcoded label strings remain in the modal JSX

screenshot

Before
Screenshot 2026-05-22 at 12 41 15 PM
After
Screenshot 2026-05-22 at 12 40 17 PM

Summary by CodeRabbit

  • Style
    • Redesigned Create Memory Modal interface with improved layout structure and visual presentation
    • Reorganized embedding model configuration controls and batch-size settings
    • Restructured LLM Preprocessing section with clearer label organization and spacing
    • Enhanced internationalization support with new localization strings for memory setup labels

Review Change Stack

@coderabbitai

coderabbitai Bot commented May 22, 2026

Copy link
Copy Markdown
Contributor

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 46e4f04a-6787-4020-a1c0-119ac2b75930

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Walkthrough

Added English translation keys for memory-related form labels (memory.nameLabel, memory.embeddingModelLabel, memory.preprocessingInstructionsLabel, memory.preprocessingModelLabel) and updated CreateMemoryModal to use those keys while refactoring the modal header, form layout, embedding provider display, batch size field, and LLM preprocessing section.

Changes

Memory Modal i18n Integration

Layer / File(s) Summary
Memory i18n translation keys
src/frontend/src/locales/en.json
Four new locale strings added for memory configuration UI: embedding model, name, preprocessing instructions (optional), and preprocessing model labels under the memory.* namespace.
CreateMemoryModal UI refactor with i18n integration
src/frontend/src/modals/createMemoryModal/index.tsx
Component imports useTranslation hook and refactors the entire form: modal sizing and header/content structure are updated, name field label uses i18n keys, embedding provider display reformatted, batch size input reorganized with numeric-only sanitization and on-blur validation preserved, and LLM preprocessing section conditionally rendered under preprocessingEnabled with model selection and preprocessing prompt using translated labels.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

  • langflow-ai/langflow#13116: CreateMemoryModal is modified in both PRs—main PR refactors the embedding/LLM preprocessing UI using new translation keys, while retrieved PR also updates the preprocessing/embedding model selectors (including passing explicit modelType props)—so the changes overlap at the same modal's model-selection code paths.

Suggested reviewers

  • keval718
  • Cristhianzl
  • erichare

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 1 warning)

Check name Status Explanation Resolution
Test Coverage For New Implementations ❌ Error PR refactors CreateMemoryModal UI layout/spacing without adding test files, despite test plan items requiring verification of field rendering and layout changes. Add CreateMemoryModal.test.tsx with component tests verifying UI rendering, field visibility, toggle behavior, and layout consistency with Create Variable modal.
Test Quality And Coverage ⚠️ Warning PR lacks component rendering tests for the modal UI refactoring. Only hook tests exist for business logic; no tests validate layout, spacing, or translation key usage in the component. Add React Testing Library tests to verify modal layout/spacing, field rendering with translation keys, preprocessing toggle behavior, and button disabled states per the PR's stated test plan.
✅ Passed checks (7 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title clearly and specifically describes the main change: aligning the Create Memory modal layout and spacing with the Create Variable modal design system, which is directly supported by all changes in the changeset.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Test File Naming And Structure ✅ Passed Test file useCreateMemoryModal.test.tsx uses *.test.tsx pattern, @testing-library/react framework, proper describe/setup structure, and descriptive tests covering both positive and negative scenarios.
Excessive Mock Usage Warning ✅ Passed The test has 3 module mocks for external dependencies (store, hooks), which is appropriate for unit testing a custom hook. Mocks test error handling, model filtering, and API payload validation.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch LE-1296

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions Bot added the enhancement New feature or request label May 22, 2026
@github-actions github-actions Bot added enhancement New feature or request and removed enhancement New feature or request labels May 22, 2026
@olayinkaadelakun olayinkaadelakun self-assigned this May 22, 2026
@github-actions

github-actions Bot commented May 22, 2026

Copy link
Copy Markdown
Contributor

⚠️ Test Coverage Advisor — tests appear to be missing

This PR changes source code but does not add or modify any test files.
This is an advisory check: it will not block this PR or any other job —
please add tests if the change is testable.

Frontend (TS/TSX) — no *.test.* / *.spec.* / tests/ change found

src/frontend/src/modals/createMemoryModal/index.tsx

Advisory check only — it always passes and is never a required status.

@codecov

codecov Bot commented May 22, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 0% with 133 lines in your changes missing coverage. Please review.
✅ Project coverage is 55.92%. Comparing base (22b17d1) to head (7fa9cb3).

Files with missing lines Patch % Lines
...rc/frontend/src/modals/createMemoryModal/index.tsx 0.00% 133 Missing ⚠️

❌ Your patch check has failed because the patch coverage (0.00%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage.
❌ Your project check has failed because the head coverage (51.97%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

Impacted file tree graph

@@                Coverage Diff                 @@
##           release-1.10.0   #13287      +/-   ##
==================================================
+ Coverage           55.80%   55.92%   +0.12%     
==================================================
  Files                2179     2179              
  Lines              206451   207190     +739     
  Branches            29457    32369    +2912     
==================================================
+ Hits               115203   115872     +669     
- Misses              89895    89966      +71     
+ Partials             1353     1352       -1     
Flag Coverage Δ
backend 60.72% <ø> (+<0.01%) ⬆️
frontend 55.77% <0.00%> (+0.18%) ⬆️
lfx 51.97% <ø> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
...rc/frontend/src/modals/createMemoryModal/index.tsx 4.92% <0.00%> (-0.20%) ⬇️

... and 102 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions github-actions Bot added enhancement New feature or request and removed enhancement New feature or request labels May 22, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/frontend/src/modals/createMemoryModal/index.tsx`:
- Around line 99-101: Several user-facing strings in createMemoryModal (the
"Provider:" label next to selectedEmbeddingModel[0].provider, the "LLM
Preprocessing" heading, its descriptive text, and the batch-size help aria-label
at the batch-size control) remain hardcoded; replace each literal with the
appropriate i18n translation key using the same translation function/hook
already used in this file (e.g., t(...) or translate(...)). Update the JSX nodes
that render "Provider:", the LLM preprocessing title and description, and the
aria-label on the batch-size control so they call the translation helper with
clear keys (e.g., memory.modal.provider, memory.modal.llmPreprocessing.title,
memory.modal.llmPreprocessing.description, memory.modal.batchSize.help) and keep
selectedEmbeddingModel[0].provider as the dynamic value. Ensure
pluralization/context keys match other translations and run the app to verify
the strings are pulled from the locale files.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9117eb1b-5694-429a-bc44-3666a92c8d45

📥 Commits

Reviewing files that changed from the base of the PR and between cf3c2d3 and d5d6d45.

📒 Files selected for processing (2)
  • src/frontend/src/locales/en.json
  • src/frontend/src/modals/createMemoryModal/index.tsx

Comment on lines +99 to +101
<div className="text-xs text-muted-foreground">
Provider: {selectedEmbeddingModel[0].provider}
</span>
</div>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Replace remaining hardcoded modal copy with translation keys.

A few user-facing strings are still hardcoded in the refactored modal (Provider:, LLM Preprocessing, preprocessing description, and the batch-size help aria-label), which leaves this dialog partially untranslated.

Suggested patch
@@
-              <div className="text-xs text-muted-foreground">
-                Provider: {selectedEmbeddingModel[0].provider}
-              </div>
+              <div className="text-xs text-muted-foreground">
+                {t("memory.providerLabel")} {selectedEmbeddingModel[0].provider}
+              </div>
@@
-                  aria-label="Batch size help"
+                  aria-label={t("memory.batchSizeHelpAriaLabel")}
@@
-                LLM Preprocessing
+                {t("memory.preprocessingToggleLabel")}
@@
-                Summarize messages with an LLM before ingestion
+                {t("memory.preprocessingToggleDescription")}
@@
-                  <div className="text-xs text-muted-foreground">
-                    Provider: {selectedPreprocessingModel[0].provider}
-                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {t("memory.providerLabel")} {selectedPreprocessingModel[0].provider}
+                  </div>
--- a/src/frontend/src/locales/en.json
+++ b/src/frontend/src/locales/en.json
@@
   "memory.batchSize": "Batch Size",
+  "memory.batchSizeHelpAriaLabel": "Batch size help",
@@
   "memory.preprocessing": "Preprocessing:",
+  "memory.preprocessingToggleLabel": "LLM Preprocessing",
+  "memory.preprocessingToggleDescription": "Summarize messages with an LLM before ingestion",

Also applies to: 115-116, 145-149, 177-179

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/frontend/src/modals/createMemoryModal/index.tsx` around lines 99 - 101,
Several user-facing strings in createMemoryModal (the "Provider:" label next to
selectedEmbeddingModel[0].provider, the "LLM Preprocessing" heading, its
descriptive text, and the batch-size help aria-label at the batch-size control)
remain hardcoded; replace each literal with the appropriate i18n translation key
using the same translation function/hook already used in this file (e.g., t(...)
or translate(...)). Update the JSX nodes that render "Provider:", the LLM
preprocessing title and description, and the aria-label on the batch-size
control so they call the translation helper with clear keys (e.g.,
memory.modal.provider, memory.modal.llmPreprocessing.title,
memory.modal.llmPreprocessing.description, memory.modal.batchSize.help) and keep
selectedEmbeddingModel[0].provider as the dynamic value. Ensure
pluralization/context keys match other translations and run the app to verify
the strings are pulled from the locale files.

@github-actions

github-actions Bot commented May 22, 2026

Copy link
Copy Markdown
Contributor

Frontend Unit Test Coverage Report

Coverage Summary

Lines Statements Branches Functions
Coverage: 40%
40.22% (51162/127202) 68.51% (6967/10169) 39.01% (1147/2940)

Unit Test Results

Tests Skipped Failures Errors Time
4448 0 💤 0 ❌ 0 🔥 9m 55s ⏱️

@github-actions github-actions Bot added enhancement New feature or request and removed enhancement New feature or request labels May 25, 2026
@github-actions github-actions Bot added enhancement New feature or request and removed enhancement New feature or request labels May 25, 2026

@Cristhianzl Cristhianzl left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@github-actions github-actions Bot added the lgtm This PR has been approved by a maintainer label May 25, 2026
@github-actions github-actions Bot added enhancement New feature or request and removed enhancement New feature or request labels May 26, 2026
Olayinka Adelakun added 2 commits May 26, 2026 11:52
…, and scrollbar position in Create Memory modal
…, and scrollbar position in Create Memory modal
@github-actions github-actions Bot added enhancement New feature or request and removed enhancement New feature or request labels May 26, 2026
@olayinkaadelakun
olayinkaadelakun added this pull request to the merge queue May 26, 2026
Merged via the queue into release-1.10.0 with commit 8452d41 May 26, 2026
113 of 115 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request lgtm This PR has been approved by a maintainer

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants