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

agatha197 · 2024-12-30T07:52:14Z

resolves part of https://lablup.atlassian.net/browse/FR-22?atlOrigin=eyJpIjoiNjBiMTg0ZWVmN2M3NGNiNmEzYjZhNjE5NmM0NDA4NDAiLCJwIjoiaiJ9

Enable attaching image/text files to ChatSender.

Test:

Login with admin
Visit <dogbowl endpoint>/serving/9837a76e-d62e-4215-9f76-a10b4b9175fc. (But, please note that this model only allows one image in one conversion.)
Test with Chat modal.
Attach image or text file.

Features with images:

You can add a image file by clicking or drag and drop.
Attach an image or text file.
Attach a file and close the attachments. You can see a Badge.
Conversation with LLM model.

Checklist: (if applicable)

Mention to the original issue
Documentation
Minium required manager version
Specific setting for review (eg., KB link, endpoint or how to setup)
Minimum requirements to check during review
Test case(s) to demonstrate the difference of before/after

agatha197 · 2024-12-30T07:52:32Z

[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 👈 (View in Graphite)
refactor: replace ChatInput with antdx component #2972
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 · 2025-01-02T04:47:53Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	5% (-0.01% 🔻)	398/7966
🔴	Branches	4.32% (-0.01% 🔻)	237/5492
🔴	Functions	2.99% (-0.01% 🔻)	78/2606
🔴	Lines	4.91% (-0.01% 🔻)	383/7793

Test suite run success

124 tests passing in 14 suites.

Report generated by 🧪jest coverage report action from 34f9b24

yomybaby

Could you set getDropContainer to enable users to drop files onto each chat card? Please refer https://x.ant.design/components/attachments#attachments-demo-basic

agatha197 · 2025-01-02T07:51:57Z

Now it is available 🚀

yomybaby

Please request a review again after improving the attachment UX.

yomybaby

LGTM

graphite-app · 2025-01-02T10:29:51Z

Merge activity

Jan 2, 5:29 AM EST: A user added this pull request to the Graphite merge queue.
Jan 2, 5:31 AM EST: A user merged this pull request with the Graphite merge queue.

resolves part of https://lablup.atlassian.net/browse/FR-22?atlOrigin=eyJpIjoiNjBiMTg0ZWVmN2M3NGNiNmEzYjZhNjE5NmM0NDA4NDAiLCJwIjoiaiJ9 Enable attaching image/text files to ChatSender. Test: 1. Login with admin 2. Visit `<dogbowl endpoint>/serving/9837a76e-d62e-4215-9f76-a10b4b9175fc`. (But, please note that this model only allows one image in one conversion.) 3. Test with Chat modal. 4. Attach image or text file. Features with images: - You can add a image file by clicking or drag and drop. ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/aadefd1c-794a-4b23-acb3-f88a249fe039.png) - Attach an image or text file. ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/379ef08e-c244-4adc-8cf3-32c0932a97b0.png) - Attach a file and close the attachments. You can see a Badge. ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/cc2f8c5e-b7f6-4e1a-9429-9d0317ee6734.png) - Conversation with LLM model. ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/db36028e-fda4-4a81-bf74-2f6616372d99.png) ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/605f09a2-7b60-4823-ae5f-544b2b484533.png) **Checklist:** (if applicable) - [x] Mention to the original issue - [ ] Documentation - [ ] Minium required manager version - [x] Specific setting for review (eg., KB link, endpoint or how to setup) - [x] Minimum requirements to check during review - [ ] Test case(s) to demonstrate the difference of before/after

github-actions bot assigned agatha197 Dec 30, 2024

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

agatha197 mentioned this pull request Dec 30, 2024

refactor: replace ChatInput with antdx component #2972

Merged

8 tasks

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

yomybaby force-pushed the feature/handle-image-in-chat-modal branch from e89776f to ac6fc22 Compare December 30, 2024 10:29

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

agatha197 force-pushed the refactor/replace-chatInput-with-antdx-component branch from c806e76 to 827a491 Compare December 31, 2024 06:45

agatha197 force-pushed the feature/handle-image-in-chat-modal branch from a19f8a4 to e2cbb5b Compare December 31, 2024 06:45

github-actions bot added area:ux UI / UX issue. area:i18n Localization labels Dec 31, 2024

agatha197 force-pushed the refactor/replace-chatInput-with-antdx-component branch from 827a491 to 5f9ec90 Compare December 31, 2024 06:48

agatha197 force-pushed the feature/handle-image-in-chat-modal branch from e2cbb5b to 2f47fc3 Compare December 31, 2024 06:48

agatha197 force-pushed the refactor/replace-chatInput-with-antdx-component branch from 5f9ec90 to a464d31 Compare December 31, 2024 06:50

agatha197 force-pushed the feature/handle-image-in-chat-modal branch 2 times, most recently from bacf184 to bd77974 Compare January 1, 2025 13:27

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

agatha197 force-pushed the feature/handle-image-in-chat-modal branch from bd77974 to d3be4f3 Compare January 2, 2025 04:30

agatha197 requested review from lizable and yomybaby January 2, 2025 04:39

agatha197 marked this pull request as ready for review January 2, 2025 04:39

agatha197 changed the title ~~feature: handle image in chat modal~~ [FR-22] feature: handle image in chat modal Jan 2, 2025

yomybaby changed the base branch from refactor/replace-chatInput-with-antdx-component to graphite-base/2993 January 2, 2025 04:43

yomybaby force-pushed the graphite-base/2993 branch from 21ed5a4 to 8071aa8 Compare January 2, 2025 04:45

yomybaby force-pushed the feature/handle-image-in-chat-modal branch from d3be4f3 to 2183500 Compare January 2, 2025 04:45

yomybaby changed the base branch from graphite-base/2993 to main January 2, 2025 04:46

yomybaby force-pushed the feature/handle-image-in-chat-modal branch from 2183500 to 33c3b8c Compare January 2, 2025 04:46

agatha197 marked this pull request as draft January 2, 2025 05:27

agatha197 changed the title ~~[FR-22] feature: handle image in chat modal~~ [FR-22] feature: handle image and text attachments in chat modal Jan 2, 2025

agatha197 marked this pull request as ready for review January 2, 2025 05:44

yomybaby requested changes Jan 2, 2025

View reviewed changes

agatha197 force-pushed the feature/handle-image-in-chat-modal branch 2 times, most recently from 5553f40 to ee0b6eb Compare January 2, 2025 07:51

agatha197 requested a review from yomybaby January 2, 2025 07:51

agatha197 mentioned this pull request Jan 2, 2025

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

Merged

2 tasks

agatha197 force-pushed the feature/handle-image-in-chat-modal branch 2 times, most recently from 29ccaa6 to 42ab6b9 Compare January 2, 2025 10:20

yomybaby requested changes Jan 2, 2025

View reviewed changes

agatha197 force-pushed the feature/handle-image-in-chat-modal branch from 42ab6b9 to 76d02ea Compare January 2, 2025 10:27

yomybaby approved these changes Jan 2, 2025

View reviewed changes

yomybaby force-pushed the feature/handle-image-in-chat-modal branch from 76d02ea to 34f9b24 Compare January 2, 2025 10:30

graphite-app bot merged commit 34f9b24 into main Jan 2, 2025
6 checks passed

graphite-app bot deleted the feature/handle-image-in-chat-modal branch January 2, 2025 10:31

github-pages bot temporarily deployed to github-pages January 2, 2025 10:32 Inactive

This was referenced Jan 3, 2025

[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

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

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

agatha197 commented Dec 30, 2024 •

edited

Loading

agatha197 commented Dec 30, 2024 •

edited by yomybaby

Loading

github-actions bot commented Jan 2, 2025 •

edited

Loading

yomybaby left a comment

agatha197 commented Jan 2, 2025

yomybaby left a comment

yomybaby left a comment

graphite-app bot commented Jan 2, 2025 •

edited

Loading

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

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

Conversation

agatha197 commented Dec 30, 2024 • edited Loading

agatha197 commented Dec 30, 2024 • edited by yomybaby Loading

How to use the Graphite Merge Queue

github-actions bot commented Jan 2, 2025 • edited Loading

Coverage report for ./react

Test suite run success

yomybaby left a comment

Choose a reason for hiding this comment

agatha197 commented Jan 2, 2025

yomybaby left a comment

Choose a reason for hiding this comment

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 30, 2024 •

edited

Loading

agatha197 commented Dec 30, 2024 •

edited by yomybaby

Loading

github-actions bot commented Jan 2, 2025 •

edited

Loading

Coverage report for `./react`

graphite-app bot commented Jan 2, 2025 •

edited

Loading