feat(chat): add reasoning field to messages and update UI components

[smakosh]

• Introduced a new field in the message schema to capture reasoning content from AI models.
• Updated the , , and components to handle and display the new reasoning content.
• Enhanced the API definitions to include the reasoning field in both request and response structures.
• Adjusted the database schema to accommodate the new reasoning field in the messages table.

Changes

Core Functionality

• Added as a nullable string in the message schema and API definitions.
• Updated message handling logic in the chat components to include reasoning content.

UI Improvements

• Modified the layout of chat components to ensure proper display of reasoning alongside messages.

Test plan

• Verify that reasoning content is correctly captured and displayed in the chat interface.
• Ensure that existing functionalities remain unaffected by the new changes.

Summary by CodeRabbit

• New Features

  • Messages can include and display AI reasoning alongside content.
  • Loading indicators now appear when retrieving chat data.

• UI/UX Improvements

  • Simplified header styling and removed translucent/backdrop effects.
  • Adjusted layout, padding, and scroll behavior for more consistent display.
  • Improved chat selection and data synchronization when switching conversations.

• Behavioral

  • Footer/sticky gradient replaced with a simpler bordered footer area.

[bunnyshell]

❌ Preview Environment deleted from Bunnyshell

Available commands (reply to this comment):

• 🚀 /bns:deploy to deploy the environment

[coderabbitai]

Walkthrough

Adds a nullable reasoning field to messages across DB, API, and UI; updates message schemas and handlers to accept/return reasoning; extends client types and UI components to extract, persist, and render reasoning; minor layout/styling adjustments in chat UI/header.

Changes

Cohort / File(s)	Change Summary
Database schema & migrations packages/db/src/schema.ts, packages/db/migrations/1760733090_flimsy_black_tom.sql, packages/db/migrations/meta/_journal.json	Added a new reasoning text column to the message table and appended the migration journal entry.
API routes apps/api/src/routes/chats.ts	Extended messageSchema and createMessageSchema to include nullable reasoning; updated getChat and addMessage handlers to propagate reasoning on read/write.
UI type & hooks apps/playground/src/hooks/useChats.ts	Added `reasoning: string
Chat page client apps/playground/src/components/playground/chat-page-client.tsx	Extracts reasoning from assistant messages, includes it when creating messages, reconstructs reasoning parts when loading chats, syncs selected model state, improves loading handling, and adjusts some layout classNames.
Chat UI & header apps/playground/src/components/playground/chat-ui.tsx, apps/playground/src/components/playground/chat-header.tsx	Layout adjustments (min-h, padding, overflow), show Loader during initial loading, replace sticky/backdrop header with opaque header, and simplify footer/sticky container styling.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    participant User
    participant UI as Playground UI
    participant API as Chats API
    participant DB as Message DB

    User->>UI: Open or select chat
    UI->>API: GET /chat (request)
    API->>DB: SELECT messages (includes reasoning)
    DB-->>API: messages (+reasoning)
    API-->>UI: messages (+reasoning)
    UI->>UI: Reconstruct UI message parts (include reasoning part)
    UI->>User: Render messages with reasoning

    User->>UI: Send message / assistant reply arrives
    UI->>UI: Extract reasoningContent from assistant message
    UI->>API: POST /chat/:id/messages { content, reasoning }
    API->>DB: INSERT message (includes reasoning)
    DB-->>API: inserted message
    API-->>UI: created message (includes reasoning)
    UI->>User: Display created message with reasoning

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat(playground): update dependencies and enhance chat UI #948 — touches chat UI flow and handling/display of assistant reasoning; closely related to UI changes here.
• feat(chats): enhance message schema to support images #652 — modifies message-level schema and API handlers (adds fields to messages) similar to this change.

Suggested labels

auto-merge

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "feat(chat): add reasoning field to messages and update UI components" accurately reflects the primary changes in the changeset. The title clearly identifies the main feature (adding a reasoning field to messages) and acknowledges the supporting changes (updating UI components to handle the new field). The title is specific and concise, using semantic versioning format and avoiding vague terms. A teammate reviewing the git history would immediately understand that this PR introduces reasoning content capture to chat messages and the accompanying UI updates needed to support it.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/save-reasoning-improve-mobile

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 544582a and fca2c5b.

📒 Files selected for processing (2)

• packages/db/migrations/1760733090_flimsy_black_tom.sql (1 hunks)
• packages/db/migrations/meta/_journal.json (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

packages/db/**/*.sql

📄 CodeRabbit inference engine (CLAUDE.md)

Do not write hand-authored SQL migrations; use pnpm run setup to generate schema changes

Files:

• packages/db/migrations/1760733090_flimsy_black_tom.sql

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: test / run
• GitHub Check: generate / run
• GitHub Check: lint / run
• GitHub Check: build / run
• GitHub Check: autofix

🔇 Additional comments (2)

packages/db/migrations/meta/_journal.json (1)

390-396: Auto-generated migration journal entry appears correct.

The new entry at idx 55 follows the correct structure and sequence. Once the corresponding SQL migration (packages/db/migrations/1760733090_flimsy_black_tom.sql) is properly generated via pnpm run setup, this journal entry should be regenerated as well to maintain consistency.

Regenerate this entry via the standard migration tooling after fixing the SQL migration file.

packages/db/migrations/1760733090_flimsy_black_tom.sql (1)

1-1: ****

This migration was generated via Drizzle Kit's pnpm drizzle-kit generate (invoked through pnpm migrations), not hand-authored. The schema definition in packages/db/src/schema.ts defines the reasoning field, and the migration file was properly generated by the tooling. The file naming pattern, snapshot tracking in migrations/meta/, and exact SQL match confirm this is a legitimately generated migration following the established schema-driven workflow.

Likely an incorrect or invalid review comment.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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