FIX: Display Current Schema in Chat AI Prompt Actions

[tahierhussain]

What

• Move currentSchema state from local component state in explorer-component.jsx to global Zustand store (project-store.js)
• Create a reusable InfoChip component for pill-shaped chip UI
• Display the currently selected schema name in the PromptActions component next to the credit balance chip
• Refactor CircularTokenDisplay to use the new InfoChip component for both credit display and "No Credits" state

Why

• The schema selection was only available in the explorer component, but users need to see which schema is currently selected when working in the AI chat
• This provides visibility into which schema new models will be created in
• Extracting InfoChip as a reusable component reduces code duplication between the credit chip and schema chip

How

1. Global State: Added currentSchema and setCurrentSchema to project-store.js Zustand store
2. Explorer Update: Updated explorer-component.jsx to use the store instead of local state
3. InfoChip Component: Created new InfoChip.jsx component with:
   • Props: icon, text, tooltipTitle, tooltipPlacement, className
   • CSS classes in ChatAI.css for styling (including error variant for "No Credits" state)
4. PromptActions Update: Added schema chip using InfoChip that displays:
   • Database icon
   • Schema name
   • Tooltip explaining the schema's purpose and how to modify it
5. CircularTokenDisplay Refactor: Replaced inline chip JSX with InfoChip component for both:
   • Normal credit display
   • "No Credits" error state (using chat-ai-info-chip-error class)

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

• No, this PR should not break existing features
• The schema state behavior remains the same, only the storage location changed (local state → Zustand store)
• The CircularTokenDisplay visual output is identical, only the implementation was refactored
• Uses selector pattern to prevent unnecessary re-renders

Database Migrations

• None

Env Config

• None

Relevant Docs

• N/A

Related Issues or PRs

• N/A

Dependencies Versions

• No new dependencies added

Notes on Testing

1. Schema Display: Navigate to a project and verify the schema name appears next to the credit balance in the chat AI prompt actions
2. Tooltip: Hover over the schema chip and verify the tooltip displays the expected message
3. Schema Change: Change the schema from the explorer settings and verify the chip updates
4. Credit Chip: Verify the credit balance chip still works as expected (displays balance, shows tooltip on hover)
5. No Credits State: Set credit balance to 0 and verify the error chip displays correctly with red styling
6. Theme Consistency: Test in both light and dark themes to ensure proper styling

Screenshots

Checklist

I have read and understood the Contribution Guidelines.

[greptile-apps]

Greptile Summary

This PR moves currentSchema from local component state in explorer-component.jsx to the global Zustand store, allowing the Chat AI PromptActions panel to display which schema is currently active. It also introduces a reusable InfoChip component that consolidates the pill-chip UI used by the credit display and the new schema chip.

Key changes:

• currentSchema added to project-store.js and correctly excluded from localStorage persistence via the existing partialize filter — no stale-across-sessions risk
• Unmount cleanup useEffect added in explorer-component.jsx resets the schema to "" when the explorer leaves the DOM (addressing the concern from the prior review thread)
• New InfoChip.jsx component cleanly handles the optional Tooltip wrapper and accepts a className for variant styling (e.g. error state)
• CircularTokenDisplay refactored to use InfoChip, removing substantial inline-style duplication
• One P2 observation: the normal chat-ai-info-chip CSS class uses custom app-level CSS variables (--content-bg, --border-color-3, --icons-color) while the error variant correctly mirrors the Ant Design CSS variable namespace (--ant-color-error-*). The original chip used token.colorBgContainer/token.colorBorder directly, so there is a minor theming inconsistency worth verifying across light/dark themes

Confidence Score: 5/5

• Safe to merge — all prior P1 concerns are resolved and the only remaining finding is a minor CSS variable consistency note.
• Both concerns raised in previous review threads have been addressed: the unmount cleanup that resets currentSchema is now present, and the partialize filter in project-store.js correctly excludes currentSchema from persistence so there is no stale-value-across-sessions risk. The single remaining finding (P2) is about potential theming drift from mixing custom CSS variables with Ant Design token variables in the normal chip state — a cosmetic concern that does not affect correctness or data integrity.
• No files require special attention beyond the minor CSS variable inconsistency in ChatAI.css.

Important Files Changed

Filename	Overview
frontend/src/store/project-store.js	Adds currentSchema/setCurrentSchema to the Zustand store; correctly excluded from persistence via the existing partialize filter (only projectDetails and projectName are persisted), so no stale-across-sessions risk.
frontend/src/ide/chat-ai/InfoChip.jsx	New reusable chip component; correctly skips the Tooltip wrapper when no tooltipTitle is provided, uses useToken for AntD theme integration inside the tooltip, and has complete PropTypes definitions.
frontend/src/ide/chat-ai/ChatAI.css	New InfoChip CSS classes added; normal chip uses custom CSS variables while error variant uses AntD CSS token names — the inconsistency may cause subtle theming drift in light/dark mode switching.
frontend/src/ide/chat-ai/CircularTokenDisplay.jsx	Clean refactor to use InfoChip; removes inline style duplication while preserving the same chip states (loading spinner, no-credits error, normal credit display).
frontend/src/ide/chat-ai/PromptActions.jsx	Adds schema chip via InfoChip correctly gated on currentSchema being truthy; wraps credit and schema displays in a Space component for consistent layout.
frontend/src/ide/explorer/explorer-component.jsx	Local currentSchema useState replaced with Zustand store; adds the missing cleanup useEffect (raised in previous review) that resets the schema to "" on unmount, preventing stale state in the Chat AI panel.

Sequence Diagram

sequenceDiagram
    participant User
    participant IdeExplorer
    participant ProjectStore as Zustand ProjectStore
    participant PromptActions
    participant InfoChip

    User->>IdeExplorer: Selects / changes schema
    IdeExplorer->>ProjectStore: setCurrentSchema(schemaName)
    ProjectStore-->>PromptActions: currentSchema (selector subscription)
    PromptActions->>InfoChip: render <InfoChip text={currentSchema} icon={DatabaseOutlined} />
    InfoChip-->>User: Schema chip displayed in Chat AI toolbar

    Note over IdeExplorer,ProjectStore: On unmount: setCurrentSchema("") resets global state
    IdeExplorer->>ProjectStore: setCurrentSchema("") [cleanup]
    ProjectStore-->>PromptActions: currentSchema = "" → chip hidden

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: frontend/src/ide/chat-ai/ChatAI.css
Line: 441-447

Comment:
**Normal chip uses custom CSS variables; error chip uses AntD tokens**

The normal `chat-ai-info-chip` state uses app-level custom properties (`--content-bg`, `--border-color-3`, `--icons-color`), while the error variant (`chat-ai-info-chip-error`) correctly uses the Ant Design CSS variable namespace (`--ant-color-error-*`). If the custom variables aren't kept in sync with the active AntD theme (e.g. light ↔ dark switching), the normal chip's background and border could diverge from the theme while the error chip stays correct.

The original `CircularTokenDisplay` used `token.colorBgContainer` / `token.colorBorder` / `token.colorText` directly from `useToken()`, which are always in sync with the active theme. Consider using the equivalent AntD CSS variables for the normal chip to keep both variants consistent:

```css
.chat-ai-info-chip {
  ...
  background-color: var(--ant-color-bg-container);
  border: 1px solid var(--ant-color-border);
  ...
}
.chat-ai-info-chip-icon {
  font-size: 12px;
  color: var(--ant-color-text);
}
```

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (2): Last reviewed commit: "refactor: use selector pattern for setCu..." | Re-trigger Greptile}

[wicky-zipstack]

LGTM

[abhizipstack]

LGTM