Claude/issue 429 20250709 010509 #431
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add dynamic row calculation based on text content - Handle paste events to adjust textarea height automatically - Support proper line breaks in pasted content - Add white-space: pre-wrap styling for better text display - Set maximum row limit to prevent excessive expansion - Auto-adjust rows when userMessage changes externally Fixes #429 Co-authored-by: ニケちゃん / nikechan <tegnike@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthroughこの変更では、メッセージ入力欄のテキストエリアが内容に応じて自動的に行数を調整する機能が追加され、入力コントロールのレイアウトがフレックスボックスに変更されました。また、設定ファイルやワークフローファイルの不要な空白削除、ドキュメントの日本語化も行われています。 Changes
Sequence Diagram(s)sequenceDiagram
participant User as ユーザー
participant MessageInput as MessageInputコンポーネント
participant Parent as 親コンポーネント
User->>MessageInput: テキストエリアに入力/貼り付け
MessageInput->>MessageInput: calculateRowsで行数計算
MessageInput->>MessageInput: rowsステートを更新
MessageInput->>Parent: onChangeUserMessageコールバック（入力内容送信）
User->>MessageInput: Shift+Enter/Backspaceキー押下
MessageInput->>MessageInput: イベント後にcalculateRowsで再計算
Possibly related PRs
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/messageInput.tsx (2)
82-100: 行数計算ロジックの改善提案現在の実装では固定の文字数（50文字）で行の折り返しを計算していますが、実際のテキストエリアの幅やフォントサイズに応じて動的に計算する方がより正確です。
以下の改善案を検討してください：
- const calculateRows = (text: string): number => { + const calculateRows = (text: string): number => { + if (!textareaRef.current) return 1 + const minRows = 1 const maxRows = 5 const lines = text.split('\n') - - const baseRows = Math.max(minRows, lines.length) - - // 長い行がある場合、追加の行を考慮（おおよその計算） - const extraRows = lines.reduce((acc, line) => { - const charsPerLine = 50 // 平均的な1行の文字数（概算） - const lineRows = Math.ceil(line.length / charsPerLine) - return acc + Math.max(0, lineRows - 1) - }, 0) - - return Math.min(maxRows, baseRows + extraRows) + + // 実際のテキストエリアの幅を使用して計算 + const textarea = textareaRef.current + const style = window.getComputedStyle(textarea) + const fontSize = parseFloat(style.fontSize) + const width = textarea.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) + const charWidth = fontSize * 0.6 // 概算的な文字幅 + const charsPerLine = Math.floor(width / charWidth) + + let totalRows = 0 + lines.forEach(line => { + totalRows += Math.max(1, Math.ceil(line.length / charsPerLine)) + }) + + return Math.min(maxRows, Math.max(minRows, totalRows)) }
205-261: フレックスボックスレイアウトへの改善グリッドレイアウトからフレックスボックスに変更されたことで、より柔軟で保守性の高いレイアウトが実現されています。各要素の配置とサイズ調整が適切に行われています。
アクセシビリティの観点から、以下の改善を検討してください：
<textarea ref={textareaRef} + aria-label={t('EnterYourQuestion')} placeholder={ chatProcessing ? `${t('AnswerGenerating')}${loadingDots}` : continuousMicListeningMode && isMicRecording ? t('ListeningContinuously') : t('EnterYourQuestion') } onChange={handleTextChange} onPaste={handlePaste} onKeyDown={handleKeyPress} disabled={chatProcessing || slidePlaying || realtimeAPIMode} className="bg-white hover:bg-white-hover focus:bg-white disabled:bg-gray-100 disabled:text-primary-disabled rounded-2xl w-full px-4 text-text-primary text-base font-bold disabled" value={userMessage} rows={rows} style={{ lineHeight: '1.5', padding: '8px 16px', resize: 'none', whiteSpace: 'pre-wrap', }} + maxLength={2000} ></textarea>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
.claude/settings.local.json(1 hunks).github/workflows/claude-code-review.yml(3 hunks).github/workflows/claude.yml(1 hunks)CLAUDE.md(1 hunks)src/components/messageInput.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`src/components/**/*`: 共有Reactコンポーネントは src/components/ に配置してください。
src/components/**/*: 共有Reactコンポーネントは src/components/ に配置してください。
📄 Source: CodeRabbit Inference Engine (.cursor/rules/project-structure.mdc)
List of files the instruction was applied to:
src/components/messageInput.tsx
`{src/utils/voiceLanguage.ts,src/components/messageInputContainer.tsx,src/compon...
{src/utils/voiceLanguage.ts,src/components/messageInputContainer.tsx,src/components/messageInput.tsx,src/hooks/useSilenceDetection.ts,src/hooks/useVoiceRecognition.ts,src/utils/audioProcessing.ts,src/utils/audioBufferManager.ts}: When handling voice-related features, update or create the following: src/utils/voiceLanguage.ts, src/components/messageInputContainer.tsx, src/components/messageInput.tsx, src/hooks/useSilenceDetection.ts, src/hooks/useVoiceRecognition.ts, src/utils/audioProcessing.ts, and src/utils/audioBufferManager.ts.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/task-guides.mdc)
List of files the instruction was applied to:
src/components/messageInput.tsx
🧠 Learnings (3)
CLAUDE.md (12)
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursor/rules/task-guides.mdc:0-0
Timestamp: 2025-07-08T13:47:03.365Z
Learning: Applies to {src/features/chat/handlers.ts,src/components/settings/modelProvider.tsx,src/features/stores/settings.ts,src/features/chat/vercelAIChat.ts,src/pages/api/aiChat.ts,src/features/chat/aiChatFactory.ts,.env.example,locales/**/translation.json} : When adding a new LLM service, update or create the following files: src/features/chat/handlers.ts, src/components/settings/modelProvider.tsx, src/features/stores/settings.ts, all localization files under locales/, src/features/chat/vercelAIChat.ts (or a new Vercel AI SDK integration file), src/pages/api/aiChat.ts, src/features/chat/aiChatFactory.ts, and .env.example for new environment variables.
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursor/rules/test.mdc:0-0
Timestamp: 2025-07-08T13:47:34.886Z
Learning: Applies to src/__tests__/**/*.test.{ts,tsx} : テスト説明は日本語で記述する（例: it('日本語でテストの目的を説明', ...)）
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursor/rules/api-management.mdc:0-0
Timestamp: 2025-07-08T13:46:13.062Z
Learning: Applies to src/pages/api/services/**/* : AIモデルのデフォルトバージョンは各サービスファイル内で厳密に管理されます（例: vercelAi.ts など）。
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursor/rules/add-new-llm-provider.mdc:0-0
Timestamp: 2025-07-08T13:46:02.741Z
Learning: Applies to locales/*/translation.json : In each locales/[lang]/translation.json file, add translations for new UI text and provider-specific keys (e.g., AIService.newProvider, Settings.ModelProvider.APIKeyDescriptionNewProvider), ensuring correct JSON structure.
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursor/rules/api-management.mdc:0-0
Timestamp: 2025-07-08T13:46:13.062Z
Learning: Applies to src/pages/api/services/**/* : AIモデルのバージョンは必ずサービスごとのソース (例: vercelAi.ts) に定義してください。
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursor/rules/task-guides.mdc:0-0
Timestamp: 2025-07-08T13:47:03.365Z
Learning: Applies to {src/components/form.tsx,src/features/chat/handlers.ts,src/features/chat/vercelAIChat.ts,src/features/chat/aiChatFactory.ts,src/pages/api/aiChat.ts} : When implementing the input form to LLM workflow, update or create the following files: src/components/form.tsx (or related form components), src/features/chat/handlers.ts, src/features/chat/vercelAIChat.ts (or specific LLM integration), src/features/chat/aiChatFactory.ts, and src/pages/api/aiChat.ts.
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-08T13:46:51.715Z
Learning: Applies to src/features/**/* : 機能固有のコード（チャット、メッセージ、状態管理など）は src/features/ 以下にグループ化してください。
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursorrules:0-0
Timestamp: 2025-07-08T13:45:26.925Z
Learning: Applies to app/lib/api/{client,types,config}.ts : client.ts, types.ts, config.ts のファイルは変更禁止（変更が必要な場合は承認が必要）
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursorrules:0-0
Timestamp: 2025-07-08T13:45:26.925Z
Learning: Applies to app/lib/api/client.ts : AIモデルのバージョンは client.ts 内で厳密に管理する
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursor/rules/api-management.mdc:0-0
Timestamp: 2025-07-08T13:46:13.062Z
Learning: Applies to src/features/constants/settings.ts : src/features/constants/settings.ts - 共通設定と型定義ファイルは変更禁止（変更には承認が必要）。
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursor/rules/api-management.mdc:0-0
Timestamp: 2025-07-08T13:46:13.062Z
Learning: Applies to src/pages/api/services/**/* : 型定義には必ず src/features/constants/settings.ts を参照してください。
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursor/rules/api-management.mdc:0-0
Timestamp: 2025-07-08T13:46:13.062Z
Learning: Applies to src/pages/api/services/**/* : すべてのAIサービス統合ロジックは src/pages/api/services/ 配下で一元管理されます。
.claude/settings.local.json (1)
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursor/rules/tech-stack.mdc:0-0
Timestamp: 2025-07-08T13:47:08.981Z
Learning: Applies to {package.json,package-lock.json} : Do not change the specified versions of development tools (npm: ^10.0.0, ESLint: ^8.57.0, TypeScript: ^5.0.2) without explicit prior approval.
src/components/messageInput.tsx (4)
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursor/rules/task-guides.mdc:0-0
Timestamp: 2025-07-08T13:47:03.365Z
Learning: Applies to {src/utils/voiceLanguage.ts,src/components/messageInputContainer.tsx,src/components/messageInput.tsx,src/hooks/useSilenceDetection.ts,src/hooks/useVoiceRecognition.ts,src/utils/audioProcessing.ts,src/utils/audioBufferManager.ts} : When handling voice-related features, update or create the following: src/utils/voiceLanguage.ts, src/components/messageInputContainer.tsx, src/components/messageInput.tsx, src/hooks/useSilenceDetection.ts, src/hooks/useVoiceRecognition.ts, src/utils/audioProcessing.ts, and src/utils/audioBufferManager.ts.
Learnt from: RimgO
PR: tegnike/aituber-kit#395
File: src/components/messageInputContainer.tsx:46-60
Timestamp: 2025-05-21T14:11:19.604Z
Learning: In `src/components/messageInputContainer.tsx`, the `if (true) { //isNewUser` condition in the `onUserDetected` handler is intentionally left as is because this section is planned to be changed later.
Learnt from: CR
PR: tegnike/aituber-kit#0
File: .cursor/rules/task-guides.mdc:0-0
Timestamp: 2025-07-08T13:47:03.365Z
Learning: Applies to {src/components/form.tsx,src/features/chat/handlers.ts,src/features/chat/vercelAIChat.ts,src/features/chat/aiChatFactory.ts,src/pages/api/aiChat.ts} : When implementing the input form to LLM workflow, update or create the following files: src/components/form.tsx (or related form components), src/features/chat/handlers.ts, src/features/chat/vercelAIChat.ts (or specific LLM integration), src/features/chat/aiChatFactory.ts, and src/pages/api/aiChat.ts.
Learnt from: tegnike
PR: tegnike/aituber-kit#0
File: :0-0
Timestamp: 2024-07-09T17:39:15.085Z
Learning: `src/features/messages/messages.ts` ファイルは、テキストを感情表現を含む `Screenplay` オブジェクトに変換する機能を持つ。
🔇 Additional comments (8)
.github/workflows/claude.yml (1)
42-60: フォーマットのクリーンアップが適切に実行されています不要な末尾空白文字の削除により、コードの品質が向上しています。
.github/workflows/claude-code-review.yml (1)
20-78: フォーマットのクリーンアップが適切に実行されています末尾空白文字の削除により、ワークフローファイルの品質が向上しています。
CLAUDE.md (1)
1-93: 日本語化が適切に実行されていますドキュメントの完全な日本語化が行われており、技術的な内容と構造が適切に保持されています。設定画面の項目更新時の環境変数追加に関する注意書きも有用です。
src/components/messageInput.tsx (5)
76-80: useEffectの依存関係が適切ですuserMessageの変化に応じてテキストエリアの行数を自動調整する機能が正しく実装されています。
102-108: テキスト変更ハンドラーが適切に実装されています行数の再計算とコールバックの実行順序が正しく、ユーザーエクスペリエンスが向上しています。
110-118: ペーストイベントハンドリングが適切ですsetTimeoutを使用してペースト後の内容を正確に取得する実装が正しく行われています。
134-152: キーボードイベント処理の改善従来の手動行数調整から自動計算に移行したことで、より一貫性のある動作になっています。setTimeoutの使用により、DOMの更新後に正確な計算が行われています。
178-178: パディングの微調整コンテナのパディングが
pb-4からpb-3に変更されており、レイアウトの調整が行われています。
Contributor
|
Claude finished @tegnike's task —— View job PR Review for Auto-Resizing Message Input FeatureI've completed a comprehensive review of this PR focusing on code quality, potential issues, and best practices. Review Checklist:
📋 Review SummaryThis PR implements auto-resizing functionality for the message input textarea, translates documentation to Japanese, and includes minor workflow cleanup. Overall, the changes are functional but there are several opportunities for improvement. 🔍 Detailed Analysis1. Code Quality & Best Practices✅ Strengths:
2. Auto-Resize Implementation AnalysisCurrent Implementation: // Lines 76-99: Manual row handling in handleKeyPress
const handleKeyPress = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
// ... existing logic for Enter and Backspace
if (event.key === 'Enter' && event.shiftKey) {
setRows(rows + 1) // Manual increment
} else if (event.key === 'Backspace' && rows > 1 && userMessage.slice(-1) === '\n') {
setRows(rows - 1) // Manual decrement
}
}
💡 Recommended Improvements: // Suggested implementation for true auto-resizing
const calculateRows = useCallback((text: string): number => {
const minRows = 1;
const maxRows = 5;
const lines = text.split('\n');
// Calculate rows based on content length and line breaks
let totalRows = lines.length;
// Account for text wrapping (simplified calculation)
const approxCharsPerLine = 50; // Should be dynamic based on element width
lines.forEach(line => {
if (line.length > approxCharsPerLine) {
totalRows += Math.ceil(line.length / approxCharsPerLine) - 1;
}
});
return Math.min(maxRows, Math.max(minRows, totalRows));
}, []);
// Auto-resize on text change
useEffect(() => {
setRows(calculateRows(userMessage));
}, [userMessage, calculateRows]);3. Potential Bugs & Issues🐛 Critical Issues:
🔧 Security Concerns:
4. Accessibility & UX IssuesMissing Accessibility Features:
UX Improvements Needed:
5. Test Coverage❌ Major Gap: No tests exist for the MessageInput component
📋 Recommended Test Cases: // Essential test scenarios
describe('MessageInput', () => {
it('should auto-resize based on content')
it('should handle keyboard shortcuts correctly')
it('should disable during processing states')
it('should focus on non-touch devices')
it('should handle paste operations')
it('should validate input length')
it('should clear on successful send')
})6. Other File Reviews✅ CLAUDE.md Translation:
✅ Workflow Files:
🎯 Recommendations for Future PRs
🔐 Security AssessmentLow Risk: No critical security vulnerabilities identified, but consider:
📊 Overall Assessment✅ Functional: The feature works as intended Recommendation: Accept the PR but consider follow-up improvements for true auto-resizing and comprehensive testing. |
terisuke
pushed a commit
to terisuke/aituber-kit
that referenced
this pull request
Dec 5, 2025
…_010509 Claude/issue 429 20250709 010509
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
新機能
ドキュメント
スタイル
チョア