Skip to content

feat(use-x-chat): add updating status #833

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat(use-x-chat): add updating status #833

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
df366d6
feat(use-x-chat): add updating status
wzc520pyfm May 17, 2025
6f72729
test(use-x-chat): fix test error about on-update callback
wzc520pyfm May 17, 2025
411d21e
docs(use-x-chat): add loading for stream demo
wzc520pyfm May 17, 2025
5fe6ada
fix(use-x-chat): always set loadingMsg when init
wzc520pyfm May 18, 2025
8a51262
fix(use-x-chat): set placeholderMsg default value to empty string
wzc520pyfm May 18, 2025
13f90c3
test(use-x-chat): fix check filed for case about loading placeholder msg
wzc520pyfm May 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 18 additions & 7 deletions components/use-x-chat/__tests__/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ describe('useXChat', () => {
fireEvent.change(container.querySelector('input')!, { target: { value: 'little' } });
expect(getMessages(container)).toEqual([
expectMessage('little', 'local'),
expectMessage('bamboo', 'loading'),
expectMessage('bamboo', 'updating'),
]);

await waitFakeTimer();
Expand All @@ -230,6 +230,8 @@ describe('useXChat', () => {
expect(getMessages(container)).toEqual([
expectMessage('0_light', 'local'),
expectMessage('1_light', 'local'),
expectMessage('0_', 'loading'),
expectMessage('1_', 'loading'),
]);
});

Expand All @@ -246,7 +248,7 @@ describe('useXChat', () => {
fireEvent.change(container.querySelector('input')!, { target: { value: 'little' } });
expect(getMessages(container)).toEqual([
expectMessage('little', 'local'),
expectMessage('bamboo', 'loading'),
expectMessage('bamboo', 'updating'),
]);

await waitFakeTimer();
Expand Down Expand Up @@ -284,7 +286,10 @@ describe('useXChat', () => {
expect.any(TransformStream),
);

expect(getMessages(container)).toEqual([expectMessage('little', 'local')]);
expect(getMessages(container)).toEqual([
expectMessage('little', 'local'),
expectMessage('', 'loading'),
]);
});
it('custom require called resolveAbortController', (done) => {
const transformStream = new TransformStream();
Expand Down Expand Up @@ -319,7 +324,10 @@ describe('useXChat', () => {
/>,
);
fireEvent.change(container.querySelector('input')!, { target: { value: 'little' } });
expect(getMessages(container)).toEqual([expectMessage('little', 'local')]);
expect(getMessages(container)).toEqual([
expectMessage('little', 'local'),
expectMessage('', 'loading'),
]);
});

describe('transformMessage', () => {
Expand Down Expand Up @@ -350,7 +358,7 @@ describe('useXChat', () => {

expect(getMessages(container)).toEqual([
expectMessage('little', 'local'),
expectMessage('bamboo', 'loading'),
expectMessage('bamboo', 'updating'),
]);
await waitFakeTimer();
expect(getMessages(container)).toEqual([
Expand All @@ -374,7 +382,7 @@ describe('useXChat', () => {

expect(getMessages(container)).toEqual([
expectMessage('little', 'local'),
expectMessage('bamboo', 'loading'),
expectMessage('bamboo', 'updating'),
]);
await waitFakeTimer();
expect(getMessages(container)).toEqual([
Expand All @@ -395,7 +403,10 @@ describe('useXChat', () => {
);
fireEvent.change(container.querySelector('input')!, { target: { value: 'little' } });

expect(getMessages(container)).toEqual([expectMessage('little', 'local')]);
expect(getMessages(container)).toEqual([
expectMessage('little', 'local'),
expectMessage('', 'loading'),
]);
await waitFakeTimer();
expect(getMessages(container)).toEqual([
expectMessage('little', 'local'),
Expand Down
1 change: 1 addition & 0 deletions components/use-x-chat/demo/stream.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const App = () => {
style={{ maxHeight: 300 }}
items={messages.map(({ id, message, status }) => ({
key: id,
loading: status === 'loading',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

该pr之后，流式输出和非流式输出可以使用相同的方式设置bubble loading

role: status === 'local' ? 'local' : 'ai',
content: message,
}))}
Expand Down
20 changes: 8 additions & 12 deletions components/use-x-chat/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import useSyncState from './useSyncState';

export type SimpleType = string | number | boolean | object;

export type MessageStatus = 'local' | 'loading' | 'success' | 'error';
export type MessageStatus = 'local' | 'loading' | 'updating' | 'success' | 'error';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The addition of the updating status to the MessageStatus type is a critical change that allows for more precise tracking of message states during updates. Ensure that all parts of the codebase that rely on MessageStatus are updated accordingly to handle this new status.


type RequestPlaceholderFn<Message extends SimpleType> = (
message: Message,
Expand Down Expand Up @@ -178,11 +178,7 @@ export default function useXChat<
let message: AgentMessage;
let otherRequestParams = {};

if (
requestParams &&
typeof requestParams === 'object' &&
'message' in requestParams
) {
if (requestParams && typeof requestParams === 'object' && 'message' in requestParams) {
const { message: requestParamsMessage, ...other } =
requestParams as RequestParams<AgentMessage>;
message = requestParamsMessage;
Expand All @@ -193,8 +189,8 @@ export default function useXChat<
// Add placeholder message
setMessages((ori) => {
let nextMessages = [...ori, createMessage(message, 'local')];
let placeholderMsg = '' as AgentMessage;
if (requestPlaceholder) {
let placeholderMsg: AgentMessage;
if (typeof requestPlaceholder === 'function') {
// typescript has bug that not get real return type when use `typeof function` check
placeholderMsg = (requestPlaceholder as RequestPlaceholderFn<AgentMessage>)(message, {
Expand All @@ -203,11 +199,11 @@ export default function useXChat<
} else {
placeholderMsg = requestPlaceholder;
}
const loadingMsg = createMessage(placeholderMsg, 'loading');
loadingMsgId = loadingMsg.id;

nextMessages = [...nextMessages, loadingMsg];
}
const loadingMsg = createMessage(placeholderMsg, 'loading');
loadingMsgId = loadingMsg.id;

nextMessages = [...nextMessages, loadingMsg];

return nextMessages;
});
Expand Down Expand Up @@ -257,7 +253,7 @@ export default function useXChat<
} as Input,
{
onUpdate: (chunk) => {
updateMessage('loading', chunk, []);
updateMessage('updating', chunk, []);
},
onSuccess: (chunks) => {
updateMessage('success', undefined as Output, chunks);
Expand Down