mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-24 17:37:02 +08:00
fix(ui): distinguish Memory and Model icons (BrainCog / BrainCircuit) (#13111)
Memory base and Model Providers both rendered the plain "Brain" Lucide
icon, which QA flagged as confusing — the two sections felt
interchangeable at a glance.
Repoint each surface to its own variant per product/manager direction:
Model Providers / model trigger / settings nav: Brain → BrainCircuit
Memory base (sidebar nav, modal, details header, empty states):
Brain → BrainCog
BrainCircuit was already in use for Language Models / LLM Operations in
the component library, so the Model Providers surface now lines up with
that family. Memory keeps its own distinct glyph (cog) to read as
"managed knowledge" rather than "a model".
Test fixture in sidebarSegmentedNav.test.tsx updated. Provider-list
fixtures that happened to default to "Brain" for unrelated test data are
left as-is.
This commit is contained in:
@ -57,7 +57,7 @@ const ModelTrigger = ({
|
||||
onClick={onOpenManageProviders}
|
||||
>
|
||||
<ForwardedIconComponent
|
||||
name="Brain"
|
||||
name="BrainCircuit"
|
||||
className="h-4 w-4 flex-shrink-0 text-muted-foreground"
|
||||
/>
|
||||
<div className="text-[13px] text-muted-foreground">
|
||||
|
||||
@ -57,7 +57,7 @@ export default function CreateMemoryModal({
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<BaseModal.Header description={`Create a memory for \"${flowName}\"`}>
|
||||
<ForwardedIconComponent name="Brain" className="mr-2 h-4 w-4" />
|
||||
<ForwardedIconComponent name="BrainCog" className="mr-2 h-4 w-4" />
|
||||
Create Memory
|
||||
</BaseModal.Header>
|
||||
<BaseModal.Content className="flex flex-col gap-6 px-6 py-4">
|
||||
|
||||
@ -34,7 +34,7 @@ export function MemoriesSidebar({
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<IconComponent
|
||||
name="Brain"
|
||||
name="BrainCog"
|
||||
className="h-4 w-4 text-muted-foreground"
|
||||
/>
|
||||
<h2 className="text-sm font-semibold">Memories</h2>
|
||||
@ -69,7 +69,7 @@ export function MemoriesSidebar({
|
||||
{!filteredMemories.length ? (
|
||||
<div className="px-3 py-6 text-center">
|
||||
<IconComponent
|
||||
name="Brain"
|
||||
name="BrainCog"
|
||||
className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-50"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
|
||||
@ -39,7 +39,10 @@ export function MemoryDetailsHeader({
|
||||
return (
|
||||
<div className="flex items-center justify-between border-b border-border bg-background px-6 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<IconComponent name="Brain" className="h-5 w-5 text-muted-foreground" />
|
||||
<IconComponent
|
||||
name="BrainCog"
|
||||
className="h-5 w-5 text-muted-foreground"
|
||||
/>
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold">{memory.name}</h2>
|
||||
{memory.description && (
|
||||
|
||||
@ -11,7 +11,7 @@ export const NoMemorySelected = () => (
|
||||
>
|
||||
<span aria-hidden="true">
|
||||
<IconComponent
|
||||
name="Brain"
|
||||
name="BrainCog"
|
||||
className="mb-3 h-12 w-12 text-muted-foreground opacity-50"
|
||||
/>
|
||||
</span>
|
||||
|
||||
@ -422,7 +422,7 @@ describe("SidebarSegmentedNav", () => {
|
||||
});
|
||||
expect(NAV_ITEMS[6]).toEqual({
|
||||
id: "memories",
|
||||
icon: "Brain",
|
||||
icon: "BrainCog",
|
||||
label: "Memories",
|
||||
tooltip: "Memories",
|
||||
});
|
||||
|
||||
@ -60,7 +60,7 @@ export const NAV_ITEMS: NavItem[] = [
|
||||
},
|
||||
{
|
||||
id: "memories",
|
||||
icon: "Brain",
|
||||
icon: "BrainCog",
|
||||
label: "Memories",
|
||||
tooltip: "Memories",
|
||||
},
|
||||
|
||||
@ -75,7 +75,7 @@ export default function SettingsPage(): JSX.Element {
|
||||
href: "/settings/model-providers",
|
||||
icon: (
|
||||
<ForwardedIconComponent
|
||||
name="Brain"
|
||||
name="BrainCircuit"
|
||||
className="w-4 flex-shrink-0 justify-start stroke-[1.5]"
|
||||
/>
|
||||
),
|
||||
|
||||
@ -14,7 +14,7 @@ export default function ModelProvidersPage() {
|
||||
>
|
||||
{t("modelProviders.pageTitle")}
|
||||
<ForwardedIconComponent
|
||||
name="Brain"
|
||||
name="BrainCircuit"
|
||||
className="ml-2 h-5 w-5 text-primary"
|
||||
/>
|
||||
</h2>
|
||||
|
||||
Reference in New Issue
Block a user