feat(reasoning): default expand thinking bubble and add more css variables

[gene9831]

Summary by CodeRabbit

• New Features

  • Reasoning bubble now expands by default when shown.
  • Thinking process automatically expands during generation and collapses on completion.

• Documentation

  • New CSS variables to customize reasoning-bubble side border width and color.
  • Updated docs and examples: component renamed from TrBubbleItem to TrBubble.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: d4a242fb-5f06-407c-b6c0-ff51645280f5

📥 Commits

Reviewing files that changed from the base of the PR and between ed0a1dc and e211613.

📒 Files selected for processing (1)

• docs/src/guide/quick-start.md

---

Walkthrough

Reasoning bubbles now default to expanded; thinking state changes also toggle an open flag. Documentation adds CSS variables for reasoning bubble side border width and color. The thinkingPlugin synchronizes state.thinking and state.open and clears both at turn end.

Changes

Cohort / File(s)	Summary
Documentation docs/src/components/bubble.md, docs/src/tools/message.md, docs/src/guide/quick-start.md	Added docs for --tr-bubble-reasoning-side-border-width and --tr-bubble-reasoning-side-border-color; updated examples/imports from TrBubbleItem → TrBubble; clarified thinkingPlugin updates both state.thinking and state.open.
Bubble Renderer packages/components/src/bubble/renderers/Reasoning.vue	Default open now true; side border width/color use CSS variable fallbacks (--tr-bubble-reasoning-side-border-width, --tr-bubble-reasoning-side-border-color) instead of hardcoded values.
Thinking Plugin packages/kit/src/vue/message/plugins/thinkingPlugin.ts	When producing/updating message state, set both thinking and open to the thinking value; on completion and turn end, clear both flags together.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰
I nudged the bubble open to see,
Thoughts now tumble, bright and free,
A thin border dresses every side,
Thinking and open hop along, allied,
I celebrate the change with a happy squeak!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: making the thinking bubble expand by default and adding CSS variables for styling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a 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.}

[github-actions]

✅ Preview build completed successfully!

Click the image above to preview.
Preview will be automatically removed when this PR is closed.

[github-actions]

📦 Package Preview

pnpm add https://pkg.pr.new/@opentiny/tiny-robot@56af697

pnpm add https://pkg.pr.new/@opentiny/tiny-robot-kit@56af697

pnpm add https://pkg.pr.new/@opentiny/tiny-robot-svgs@56af697

commit: e211613

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/kit/src/vue/message/plugins/thinkingPlugin.ts`:
- Around line 23-25: The code clears flags by setting lastMessage.state.thinking
and lastMessage.state.open to undefined, which triggers Reasoning.vue's
open-by-default fallback; change those assignments in thinkingPlugin (the block
that checks lastMessage?.state?.thinking) to explicitly set
lastMessage.state.thinking = false and lastMessage.state.open = false so the
panel stays closed at turn end instead of re-opening.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 396b5e6a-22da-4e1c-bf9c-609bff8a64a2

📥 Commits

Reviewing files that changed from the base of the PR and between e7d8310 and 31eec74.

📒 Files selected for processing (4)

• docs/src/components/bubble.md
• docs/src/tools/message.md
• packages/components/src/bubble/renderers/Reasoning.vue
• packages/kit/src/vue/message/plugins/thinkingPlugin.ts