refactor: replace ChatInput with antdx component #2972

agatha197 · 2024-12-20T06:59:48Z

resolves #2973

Replaces the custom ChatInput component with Ant Design X's Sender component and updates AI SDK dependencies to their latest versions. The new Sender component provides better chat input functionality while maintaining existing features like auto-focus and loading states.

Key changes:

Upgraded @ai-sdk/openai from 0.0.72 to 1.0.10
Upgraded ai package from 3.4.33 to 4.0.20
Added @ant-design/x dependency
Replaced ChatInput.tsx with ChatSender.tsx using Ant Design X's Sender component
Updated LLMChatCard to use the new ChatSender component
Updated stream handling to use toDataStreamResponse()

What to test:

test: dogbowl

Is the chat with the LLM model working fine? (Send -> Receive -> Send...)
Is autofocus works well?

Checklist:

Mention to the original issue
Documentation
Minium required manager version
Specific setting for review
Minimum requirements to check during review
Test case(s) to demonstrate the difference of before/after

agatha197 · 2024-12-20T07:00:05Z

[FR-22] feature: provide token-related information #2995 : 2 dependent PRs (#2996 , #2998 )
[FR-22] feature: handle image and text attachments in chat modal #2993
refactor: replace ChatInput with antdx component #2972 👈 (View in Graphite)
main

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

flow:merge-queue - adds this PR to the back of the merge queue
flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has required the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2024-12-20T07:01:12Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	5.01% (+0% 🔼)	398/7945
🔴	Branches	4.33% (+0.01% 🔼)	237/5478
🔴	Functions	3.01%	78/2595
🔴	Lines	4.93% (+0% 🔼)	383/7773

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🔴	`...` / ChatSender.tsx	0%	0%	0%	0%

Test suite run success

124 tests passing in 14 suites.

Report generated by 🧪jest coverage report action from 8071aa8

yomybaby

Please make sure that the multiline is output as entered. There's no need to apply markdown; just ensure simple line breaks are added.

Whe I enter

asdf
asdf
asdf

it displays like below:

react/src/components/lablupTalkativotUI/ChatSender.tsx

agatha197 · 2025-01-02T04:31:27Z

Applied.

yomybaby

LGTM

graphite-app · 2025-01-02T04:43:19Z

Merge activity

Jan 1, 11:43 PM EST: A user added this pull request to the Graphite merge queue.
Jan 1, 11:45 PM EST: A user merged this pull request with the Graphite merge queue.

resolves #2973 Replaces the custom ChatInput component with Ant Design X's Sender component and updates AI SDK dependencies to their latest versions. The new Sender component provides better chat input functionality while maintaining existing features like auto-focus and loading states. Key changes: - Upgraded @ai-sdk/openai from 0.0.72 to 1.0.10 - Upgraded ai package from 3.4.33 to 4.0.20 - Added @ant-design/x dependency - Replaced ChatInput.tsx with ChatSender.tsx using Ant Design X's Sender component - Updated LLMChatCard to use the new ChatSender component - Updated stream handling to use toDataStreamResponse() What to test: > test: dogbowl - [ ] Is the chat with the LLM model working fine? (Send -> Receive -> Send...) - [ ] Is autofocus works well? **Checklist:** - [x] Mention to the original issue - [ ] Documentation - [ ] Minium required manager version - [x] Specific setting for review - [x] Minimum requirements to check during review - [ ] Test case(s) to demonstrate the difference of before/after

github-actions bot added the size:L 100~500 LoC label Dec 20, 2024

github-actions bot assigned agatha197 Dec 20, 2024

agatha197 force-pushed the refactor/replace-chatInput-with-antdx-component branch from a5986b0 to 7441617 Compare December 20, 2024 07:02

agatha197 requested a review from yomybaby December 20, 2024 07:03

agatha197 force-pushed the refactor/replace-chatInput-with-antdx-component branch from 7441617 to 59ada26 Compare December 20, 2024 07:06

github-actions bot added size:XL 500~ LoC and removed size:L 100~500 LoC labels Dec 20, 2024

agatha197 force-pushed the refactor/replace-chatInput-with-antdx-component branch from 59ada26 to 0b072f9 Compare December 20, 2024 08:25

agatha197 requested a review from lizable December 20, 2024 08:26

agatha197 force-pushed the refactor/replace-chatInput-with-antdx-component branch from 0b072f9 to d66abb0 Compare December 26, 2024 06:52

agatha197 marked this pull request as ready for review December 26, 2024 06:53

agatha197 mentioned this pull request Dec 30, 2024

[FR-22] feature: handle image and text attachments in chat modal #2993

Merged

6 tasks

yomybaby force-pushed the refactor/replace-chatInput-with-antdx-component branch from d66abb0 to c806e76 Compare December 30, 2024 10:29

yomybaby requested changes Dec 31, 2024

View reviewed changes

react/src/components/lablupTalkativotUI/ChatSender.tsx Show resolved Hide resolved

agatha197 force-pushed the refactor/replace-chatInput-with-antdx-component branch 4 times, most recently from a464d31 to 21ed5a4 Compare January 2, 2025 04:30

agatha197 requested a review from yomybaby January 2, 2025 04:31

yomybaby approved these changes Jan 2, 2025

View reviewed changes

yomybaby force-pushed the refactor/replace-chatInput-with-antdx-component branch from 21ed5a4 to 8071aa8 Compare January 2, 2025 04:43

graphite-app bot merged commit 8071aa8 into main Jan 2, 2025
7 checks passed

graphite-app bot deleted the refactor/replace-chatInput-with-antdx-component branch January 2, 2025 04:45

github-pages bot temporarily deployed to github-pages January 2, 2025 04:46 Inactive

This was referenced Jan 2, 2025

[FR-22] feature: provide token-related information #2995

Merged

[FR-46] fix: The ScrollBottomHandlerButton is displayed even when the chat message is empty. #2996

Draft

[FR-315] feat: integrate image generation model #2997

Closed

yomybaby mentioned this pull request Jan 6, 2025

feat(FR-316): introduce useTokenCount using gpt-tokenizer #2998

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: replace ChatInput with antdx component #2972

refactor: replace ChatInput with antdx component #2972

agatha197 commented Dec 20, 2024 •

edited

Loading

agatha197 commented Dec 20, 2024 •

edited by yomybaby

Loading

github-actions bot commented Dec 20, 2024 •

edited

Loading

yomybaby left a comment •

edited

Loading

agatha197 commented Jan 2, 2025

yomybaby left a comment

graphite-app bot commented Jan 2, 2025 •

edited

Loading

refactor: replace ChatInput with antdx component #2972

refactor: replace ChatInput with antdx component #2972

Conversation

agatha197 commented Dec 20, 2024 • edited Loading

agatha197 commented Dec 20, 2024 • edited by yomybaby Loading

How to use the Graphite Merge Queue

github-actions bot commented Dec 20, 2024 • edited Loading

Coverage report for ./react

Test suite run success

yomybaby left a comment • edited Loading

Choose a reason for hiding this comment

agatha197 commented Jan 2, 2025

yomybaby left a comment

Choose a reason for hiding this comment

graphite-app bot commented Jan 2, 2025 • edited Loading

Merge activity

agatha197 commented Dec 20, 2024 •

edited

Loading

agatha197 commented Dec 20, 2024 •

edited by yomybaby

Loading

github-actions bot commented Dec 20, 2024 •

edited

Loading

Coverage report for `./react`

yomybaby left a comment •

edited

Loading

graphite-app bot commented Jan 2, 2025 •

edited

Loading