v1.0.4-preview.1

[CSCITech]

⚠️ 提交说明 / PR Notice

Important

• 请提供人工撰写的简洁摘要，避免直接粘贴未经整理的 AI 输出。

📝 变更描述 / Description

修复 Playground 输入区在输入连续超长文本时的横向溢出问题。

原因是输入框内容会参与自身宽度计算，遇到没有空格的长字符串时，textarea 和底部工具栏可能被撑宽，进而把模型 / 分组配置入口和发送按钮挤到屏幕外。本次调整让输入框在容器内换行并允许 flex 子项正常收缩，同时限制模型 / 分组选择器的最大宽度，底部操作区在窄屏下也可以换行，因此长提示词不会再破坏整体布局。

🚀 变更类型 / Type of change

• 🐛 Bug 修复 (Bug fix) - 请关联对应 Issue，避免将设计取舍、理解偏差或预期不一致直接归类为 bug
• ✨ 新功能 (New feature) - 重大特性建议先通过 Issue 沟通
• ⚡ 性能优化 / 重构 (Refactor)
• 📝 文档更新 (Documentation)

🔗 关联任务 / Related Issue

• Closes # 无公开 Issue，来自 Playground 长文本输入布局问题反馈

✅ 提交前检查项 / Checklist

• 人工确认: 我已亲自整理并撰写此描述，没有直接粘贴未经处理的 AI 输出。
• 非重复提交: 我已搜索现有的 Issues 与 PRs，确认不是重复提交。
• Bug fix 说明: 若此 PR 标记为 Bug fix，我已提交或关联对应 Issue，且不会将设计取舍、预期不一致或理解偏差直接归类为 bug。
• 变更理解: 我已理解这些更改的工作原理及可能影响。
• 范围聚焦: 本 PR 未包含任何与当前任务无关的代码改动。
• 本地验证: 已在本地运行并通过测试或手动验证，维护者可以据此复核结果。
• 安全合规: 代码中无敏感凭据，且符合项目代码规范。

📸 运行证明 / Proof of Work

• bun run typecheck 通过
• bun run build 通过
• git diff --check 通过
• Headless Chrome 手动布局验证通过：
  • /playground/
  • 输入 4000 个连续字符
  • 390px 视口无横向溢出，发送按钮仍在输入框内
  • 1280px 视口无横向溢出，发送按钮仍在输入框内

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 0e95ca51-51cd-4dc6-aafb-9901caf274f0

📥 Commits

Reviewing files that changed from the base of the PR and between fd18116 and 2277f7f.

📒 Files selected for processing (4)

• web/default/src/components/ai-elements/prompt-input.tsx
• web/default/src/components/model-group-selector.tsx
• web/default/src/components/ui/input-group.tsx
• web/default/src/features/playground/components/playground-input.tsx

📜 Recent review details

⏰ Context from checks skipped due to timeout. (2)

• GitHub Check: Frontend checks
• GitHub Check: Backend checks

🧰 Additional context used

📓 Path-based instructions (3)

web/default/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (web/default/AGENTS.md)

web/default/src/**/*.{ts,tsx}: 前端页面文本与组件内文案必须支持 i18n：React 组件中应使用 useTranslation() 取得 t，并通过 t() 渲染用户可见文本；子组件也应自行使用 useTranslation() 保持独立性。
禁止使用两层及以上嵌套三元表达式；复杂逻辑应改用 if-else、提前返回或抽取函数。
控制函数圈复杂度，复杂逻辑应拆成更小的函数；变量与函数命名应有意义并遵循驼峰等常规命名约定。
TypeScript 代码应避免使用 any，优先使用具体类型或 unknown；参数与返回值应显式标注类型；仅类型用途的导入应使用 import type。
修改 TypeScript 或 TSX 代码后必须执行类型检查，并修复所有类型错误，不得遗留。
对象非必要不要解构，尤其是组件 props；优先直接使用 props.xxx 以保持代码清晰。
组件应使用函数式组件与 Hooks，遵循单一职责；组件 props 必须有明确类型（接口或类型别名）。
单文件超过约 200 行时应考虑拆分子组件或抽取自定义 Hooks；类型定义可与组件同文件或放在同模块的 types 中。
在 React 中应合理使用 useMemo、useCallback、React.memo，避免在渲染路径中创建新对象或数组；必要时进行代码分割与动态 import。
React Query 的数据获取应使用 useQuery、变更应使用 useMutation；每个查询需配置唯一 queryKey，并在成功后对相关查询执行 invalidateQueries；服务端错误应统一交给 handleServerError。
Axios 请求应使用项目统一的 api 实例；GET 请求默认去重，特殊请求可显式关闭；认证与通用错误应在拦截器中统一处理。
服务端错误应统一使用 handleServerError，展示层应使用 toast.error 等统一方式；文案需走 i18n；路由级错误应由 errorComponent 承接；表单错误应通过 form.setError 等方式映射到字段。
样式应以 Tailwind 工具类为主，动态类名使用 cn() 合并；非动态场景避免内联样式；响应式采用移动优先与 Tailwind 断点，主题与暗色模式通过 CSS 变量与 dark: 处理。
应使用语义化 HTML、正确关联 label 与输入、保证键盘可操作与合理焦点顺序；必要时添加 ARIA 属性，装饰性图标应使用 aria-hidden="true"。
认证与权限应在路由与接口层校验；前后端都应做数据校验（如 Zod）；敏感信息不得落前端存储；避免使用 dangerouslySetInnerHTML；跨域与 Cookie 需配合 withCredentials 并按后端要求处理 CSRF。
组件测试应使用 React Testing Library，关注交互与行为，避免测试实现细节；关键流程可补充集成与 E2E 测试。
环境变量应通过 .env 读取，并使用 VITE_ 前缀；代码中不得硬编码密钥。

Files:

• web/default/src/components/ui/input-group.tsx
• web/default/src/components/ai-elements/prompt-input.tsx
• web/default/src/components/model-group-selector.tsx
• web/default/src/features/playground/components/playground-input.tsx

web/default/**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Use bun as the preferred package manager and script runner for the frontend in web/default/ (bun install, bun run dev, bun run build, and bun run i18n:*).

Files:

• web/default/src/components/ui/input-group.tsx
• web/default/src/components/ai-elements/prompt-input.tsx
• web/default/src/components/model-group-selector.tsx
• web/default/src/features/playground/components/playground-input.tsx

web/default/src/features/**

📄 CodeRabbit inference engine (web/default/AGENTS.md)

功能模块应放在 src/features/<feature>/，并按需包含 components/、lib/、hooks/、api.ts、types.ts、constants.ts 等；通用组件应放在 src/components/，通用工具与类型应放在 src/lib/。

Files:

• web/default/src/features/playground/components/playground-input.tsx

🔇 Additional comments (4)

web/default/src/components/ui/input-group.tsx (1)

159-159: LGTM!

web/default/src/components/ai-elements/prompt-input.tsx (1)

891-894: LGTM!

web/default/src/components/model-group-selector.tsx (1)

95-95: LGTM!

Also applies to: 132-132, 574-574

web/default/src/features/playground/components/playground-input.tsx (1)

144-145: LGTM!

Also applies to: 225-227, 239-249

---

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes
  • Improved input and selector layout so text wraps more cleanly and controls stay usable in tighter widths.
  • Prevented action buttons from shrinking in the playground input area.
  • Improved spacing and overflow handling for model and group selectors, especially on smaller screens.

Walkthrough

This PR adjusts Tailwind CSS classes across textarea, model/group selector, and playground input components to fix flex layout overflow issues by adding min-w-0, max-w-full, flex-wrap, and shrink-0 utilities.

Changes

Flex Overflow and Width Constraint Fixes

Layer / File(s)	Summary
Textarea sizing constraints web/default/src/components/ui/input-group.tsx, web/default/src/components/ai-elements/prompt-input.tsx	Textarea class lists gain min-w-0, max-w-full, and [overflow-wrap:anywhere] to prevent overflow in flex containers.
Selector trigger width constraints web/default/src/components/model-group-selector.tsx	Model and group trigger buttons and the wrapper container gain min-w-0 and responsive max-w-* utilities.
Playground footer wrapping and alignment web/default/src/features/playground/components/playground-input.tsx	Footer and tools containers gain flex-wrap/min-w-0, the action row shifts to ml-auto right-alignment, and Stop/Send buttons gain shrink-0.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Poem

Little rabbit hops through flexbox glades,
Trimming widths so nothing fades,
min-w-0 whispers, wrap don't break,
Buttons stand firm, no shrink mistake,
Hop hop hooray, the layout's sound! 🐰📐

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title is just a version tag and does not describe the actual code changes.	Use a concise title that names the main change, such as fixing Playground input overflow or layout wrapping.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly matches the layout overflow fix and related validation steps in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cscitech

---

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