✨ feat(ui): move new topic button to navigation panel

[Innei]

💻 Change Type

• ✨ feat
• 🐛 fix
• ♻️ refactor
• 💄 style
• 👷 build
• ⚡️ perf
• ✅ test
• 📝 docs
• 🔨 chore

🔗 Related Issue

N/A

🔀 Description of Change

This PR improves the UX of the chat sidebar by relocating the "Add New Topic" button from the header into the navigation panel.

Changes:

• Move "Add New Topic" button from sidebar header to navigation panel
• Integrate with existing NavItem component for consistent styling
• Add loading state indicator during topic creation
• Auto-navigate from agent profile back to chat when creating new topic
• Remove now-unused AddTopicButton component from header layout

Benefits:

• Better visual hierarchy in the sidebar
• Consistent button styling with other navigation items
• Improved discoverability alongside related navigation actions

🧪 How to Test

• Tested locally
• Added/updated tests
• No tests needed

Testing steps:

1. Open a chat with any agent
2. Verify the new topic button appears in the navigation panel
3. Click the new topic button to create a new topic
4. Verify loading state appears during creation
5. When viewing agent profile, click new topic button and verify it navigates back to chat first

📸 Screenshots / Videos

Before	After
New topic button in header	New topic button in navigation panel

📝 Additional Information

No breaking changes. This is a UI enhancement that maintains existing functionality while improving the user experience.

Summary by Sourcery

Relocate the chat "New Topic" action into the sidebar navigation for improved UX and consistency.

New Features:

• Add a "New Topic" navigation item in the chat sidebar nav with loading feedback and topic-creation handling.

Enhancements:

• Remove the header-level "Add Topic" button and rely on the new navigation entry, including redirecting from agent profile back to chat before creating a topic.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
lobehub	Ready	Preview, Comment	Jan 8, 2026 5:30am

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Moves the "Add New Topic" action from the sidebar header into the navigation panel by wiring it through the existing NavItem component, adding a loading state via useActionSWR, and handling navigation back from the agent profile before topic creation, while removing the now-unused header button wiring.

Sequence diagram for creating a new topic from the navigation panel

sequenceDiagram
  actor User
  participant NavItem
  participant NavComponent
  participant Router
  participant ChatStore
  participant ActionSWR

  User->>NavItem: click
  NavItem->>NavComponent: onClick handleNewTopic
  alt isProfileActive and agentId exists
    NavComponent->>Router: push /agent/{agentId}
  end
  NavComponent->>ActionSWR: mutate openNewTopicOrSaveTopic
  ActionSWR->>ChatStore: openNewTopicOrSaveTopic
  ChatStore-->>ActionSWR: topic created
  ActionSWR-->>NavItem: isValidating false
  NavItem-->>User: loading indicator hidden

Loading

Flow diagram for handleNewTopic logic in Nav component

flowchart TD
  A[User clicks NavItem new topic] --> B[handleNewTopic]
  B --> C{isProfileActive and agentId exists}
  C -- Yes --> D[router.push /agent/agentId]
  C -- No --> E[Skip navigation]
  D --> F[useActionSWR mutate openNewTopicOrSaveTopic]
  E --> F[useActionSWR mutate openNewTopicOrSaveTopic]
  F --> G[openNewTopicOrSaveTopic in chat store]
  G --> H[New topic created]
  F --> I[isValidating true shown as loading on NavItem]
  H --> J[isValidating false, loading hidden]

Loading

File-Level Changes

Change	Details	Files
Add a "New Topic" NavItem in the sidebar navigation that triggers topic creation with loading state and correct routing.	Initialize a second translation hook for the topic namespace to label the new navigation item. Select openNewTopicOrSaveTopic from the chat store and wrap it with useActionSWR to obtain mutate and isValidating. Implement handleNewTopic to navigate from the agent profile route back to the chat route when needed, then call mutate to create or open a topic. Render a NavItem at the start of the navigation bar with a plus-message icon, loading indicator bound to isValidating, click handler bound to handleNewTopic, and title sourced from the topic translation key.	src/app/[variants]/(main)/chat/_layout/Sidebar/Header/Nav.tsx
Remove the legacy header-level AddTopicButton in favor of the new navigation item.	Remove the AddTopicButon import from the header component. Update the SideBarHeaderLayout usage to drop the right-hand AddTopicButon prop, leaving only the Agent component on the left. Keep Nav rendered below the header layout so navigation (including the new topic item) now owns the add-topic action.	src/app/[variants]/(main)/chat/_layout/Sidebar/Header/index.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[gru-agent]

TestGru Assignment

Summary

Link	CommitId	Status	Reason
Detail	a9d7e5f	🚫 Skipped	No files need to be tested {"src/app/[variants]/(main)/chat/_layout/Sidebar/Header/Nav.tsx":"File path does not match include patterns.","src/app/[variants]/(main)/chat/_layout/Sidebar/Header/index.tsx":"File path does not match include patterns."}

History Assignment

Tip

You can @gru-agent and leave your feedback. TestGru will make adjustments based on your input

[sourcery-ai]

Hey - I've found 2 issues, and left some high level feedback:

• Consider wrapping handleNewTopic in a useCallback with isProfileActive, agentId, and mutate as dependencies so the memoized Nav component and NavItem props remain stable and avoid unnecessary re-renders.
• You might want to extract the 'openNewTopicOrSaveTopic' action key into a shared constant to avoid string mismatches between useActionSWR and the store action name over time.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Consider wrapping `handleNewTopic` in a `useCallback` with `isProfileActive`, `agentId`, and `mutate` as dependencies so the memoized `Nav` component and `NavItem` props remain stable and avoid unnecessary re-renders.
- You might want to extract the `'openNewTopicOrSaveTopic'` action key into a shared constant to avoid string mismatches between `useActionSWR` and the store action name over time.

## Individual Comments

### Comment 1
<location> `src/app/[variants]/(main)/chat/_layout/Sidebar/Header/Nav.tsx:33-36` </location>
<code_context>
   const toggleCommandMenu = useGlobalStore((s) => s.toggleCommandMenu);
   const hideProfile = isInbox || !isAgentEditable;
   const switchTopic = useChatStore((s) => s.switchTopic);
+  const [openNewTopicOrSaveTopic] = useChatStore((s) => [s.openNewTopicOrSaveTopic]);
+
+  const { mutate, isValidating } = useActionSWR('openNewTopicOrSaveTopic', openNewTopicOrSaveTopic);
</code_context>

<issue_to_address>
**suggestion (performance):** Avoid wrapping the selector result in an array to reduce unnecessary re-renders.

`useChatStore((s) => [s.openNewTopicOrSaveTopic])` allocates a new array on every store change, so the selector value is never referentially equal and can trigger extra renders. Instead, select the function directly so the reference stays stable:

```ts
const openNewTopicOrSaveTopic = useChatStore((s) => s.openNewTopicOrSaveTopic);
```

This reduces unnecessary re-renders when other store fields change.

```suggestion
  const switchTopic = useChatStore((s) => s.switchTopic);
  const openNewTopicOrSaveTopic = useChatStore((s) => s.openNewTopicOrSaveTopic);

  const { mutate, isValidating } = useActionSWR('openNewTopicOrSaveTopic', openNewTopicOrSaveTopic);
```
</issue_to_address>

### Comment 2
<location> `src/app/[variants]/(main)/chat/_layout/Sidebar/Header/Nav.tsx:37-43` </location>
<code_context>

   return (
     <Flexbox gap={1} paddingInline={4}>
+      <NavItem
+        icon={MessageSquarePlusIcon}
+        loading={isValidating}
+        onClick={handleNewTopic}
+        title={tTopic('actions.addNewTopic')}
+      />
       {!hideProfile && (
</code_context>

<issue_to_address>
**suggestion (bug_risk):** Consider disabling the click action while `isValidating` is true to avoid duplicate topic actions.

`loading={isValidating}` only changes the visual state; `onClick={handleNewTopic}` can still fire multiple times while the request is in flight. To avoid duplicate `openNewTopicOrSaveTopic` mutations, either early-return in `handleNewTopic` when `isValidating` is true, or treat `loading` as a disabled state in `NavItem` so clicks are ignored while pending.

```suggestion
  const handleNewTopic = () => {
    // Avoid triggering multiple new topic actions while a request is in flight
    if (isValidating) return;

    // If in agent sub-route, navigate back to agent chat first
    if (isProfileActive && agentId) {
      router.push(urlJoin('/agent', agentId));
    }
    mutate();
  };
```
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[Copilot]

Pull request overview

This PR enhances the chat sidebar UX by moving the "Add New Topic" button from the header into the navigation panel for better visual hierarchy and discoverability.

Key Changes

• Relocated new topic button from sidebar header to navigation panel
• Integrated with NavItem component for consistent styling
• Removed AddTopicButon component reference from header layout

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/app/[variants]/(main)/chat/_layout/Sidebar/Header/index.tsx	Removed AddTopicButon import and component from header layout
src/app/[variants]/(main)/chat/_layout/Sidebar/Header/Nav.tsx	Added new topic button as NavItem with loading state and navigation logic

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.10%. Comparing base (e80b073) to head (234b666).
⚠️ Report is 3 commits behind head on next.

Additional details and impacted files

@@            Coverage Diff            @@
##             next   #11325     +/-   ##
=========================================
  Coverage   76.10%   76.10%             
=========================================
  Files        1128     1128             
  Lines       86332    86332             
  Branches    12138     9784   -2354     
=========================================
  Hits        65699    65699             
  Misses      20557    20557             
  Partials       76       76             

Flag	Coverage Δ
app	70.02% <ø> (ø)
database	94.08% <ø> (ø)
packages/agent-runtime	89.08% <ø> (ø)
packages/context-engine	83.19% <ø> (ø)
packages/conversation-flow	92.41% <ø> (ø)
packages/file-loaders	88.66% <ø> (ø)
packages/memory-user-memory	55.64% <ø> (ø)
packages/model-bank	100.00% <ø> (ø)
packages/model-runtime	86.88% <ø> (ø)
packages/prompts	76.23% <ø> (ø)
packages/python-interpreter	92.90% <ø> (ø)
packages/ssrf-safe-fetch	0.00% <ø> (ø)
packages/utils	92.88% <ø> (ø)
packages/web-crawler	95.62% <ø> (ø)

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

Components	Coverage Δ
Store	68.45% <ø> (ø)
Services	54.01% <ø> (ø)
Server	73.33% <ø> (ø)
Libs	41.28% <ø> (ø)
Utils	94.40% <ø> (ø)

🚀 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.

[lobehubbot]

❤️ Great PR @Innei ❤️

The growth of project is inseparable from user feedback and contribution, thanks for your contribution! If you are interesting with the lobehub developer community, please join our discord and then dm @arvinxx or @canisminor1990. They will invite you to our private developer channel. We are talking about the lobe-chat development or sharing ai newsletter around the world.

[lobehubbot]

🎉 This PR is included in version 2.0.0-next.237 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀