Skip to content

Commit 9b0ebd5

Browse files
hasdfahasdfa
authored
[docs][chat] Review and clean up react-chat docs demos & gallery; fix actions-bar layout (#22993)
1 parent 7eb9bfa commit 9b0ebd5

272 files changed

Lines changed: 1644 additions & 3013 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/data/chat/ai-and-agents/reasoning/ReasoningSlotsDemo.js‎

Lines changed: 31 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as React from 'react';
33
import { ChatBox } from '@mui/x-chat';
44

55
import AutoAwesomeOutlinedIcon from '@mui/icons-material/AutoAwesomeOutlined';
6+
import { createChunkStream } from 'docs/data/chat/core/examples/shared/demoUtils';
67

78
const CONVERSATION_ID = 'reasoning-slots-demo';
89

@@ -28,50 +29,38 @@ const initialMessages = [
2829
},
2930
];
3031

31-
// Emit one chunk per pull, with a small delay, so the disclosure visibly streams.
32-
function streamChunks(chunks) {
33-
let index = 0;
34-
return new ReadableStream({
35-
pull(controller) {
36-
return new Promise((resolve) => {
37-
setTimeout(() => {
38-
if (index < chunks.length) {
39-
controller.enqueue(chunks[index]);
40-
index += 1;
41-
} else {
42-
controller.close();
43-
}
44-
resolve();
45-
}, 100);
46-
});
47-
},
48-
});
49-
}
50-
5132
const adapter = {
5233
async sendMessage({ message }) {
5334
const messageId = `reply-${message.id}`;
54-
return streamChunks([
55-
{ type: 'start', messageId },
56-
{ type: 'reasoning-start', id: 'r1' },
57-
{
58-
type: 'reasoning-delta',
59-
id: 'r1',
60-
delta: 'Let me think about how to answer this. ',
61-
},
62-
{
63-
type: 'reasoning-delta',
64-
id: 'r1',
65-
delta: 'The question is straightforward, ',
66-
},
67-
{ type: 'reasoning-delta', id: 'r1', delta: 'so a concise reply works best.' },
68-
{ type: 'reasoning-end', id: 'r1' },
69-
{ type: 'text-start', id: 't1' },
70-
{ type: 'text-delta', id: 't1', delta: 'Here is the answer, now that ' },
71-
{ type: 'text-delta', id: 't1', delta: 'the reasoning above has finished.' },
72-
{ type: 'text-end', id: 't1' },
73-
{ type: 'finish', messageId },
74-
]);
35+
// Emit one chunk at a time, with a small delay, so the disclosure visibly streams.
36+
return createChunkStream(
37+
[
38+
{ type: 'start', messageId },
39+
{ type: 'reasoning-start', id: 'r1' },
40+
{
41+
type: 'reasoning-delta',
42+
id: 'r1',
43+
delta: 'Let me think about how to answer this. ',
44+
},
45+
{
46+
type: 'reasoning-delta',
47+
id: 'r1',
48+
delta: 'The question is straightforward, ',
49+
},
50+
{
51+
type: 'reasoning-delta',
52+
id: 'r1',
53+
delta: 'so a concise reply works best.',
54+
},
55+
{ type: 'reasoning-end', id: 'r1' },
56+
{ type: 'text-start', id: 't1' },
57+
{ type: 'text-delta', id: 't1', delta: 'Here is the answer, now that ' },
58+
{ type: 'text-delta', id: 't1', delta: 'the reasoning above has finished.' },
59+
{ type: 'text-end', id: 't1' },
60+
{ type: 'finish', messageId },
61+
],
62+
{ delayMs: 100 },
63+
);
7564
},
7665
};
7766

@@ -153,7 +142,7 @@ export default function ReasoningSlotsDemo() {
153142
},
154143
}}
155144
sx={{
156-
height: 480,
145+
height: 500,
157146
border: '1px solid',
158147
borderColor: 'divider',
159148
borderRadius: 1,

‎docs/data/chat/ai-and-agents/reasoning/ReasoningSlotsDemo.tsx‎

Lines changed: 32 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
'use client';
22
import * as React from 'react';
33
import { ChatBox } from '@mui/x-chat';
4-
import type {
5-
ChatAdapter,
6-
ChatMessageChunk,
7-
ReasoningPartOwnerState,
8-
} from '@mui/x-chat/headless';
4+
import type { ChatAdapter, ReasoningPartOwnerState } from '@mui/x-chat/headless';
95
import AutoAwesomeOutlinedIcon from '@mui/icons-material/AutoAwesomeOutlined';
6+
import { createChunkStream } from 'docs/data/chat/core/examples/shared/demoUtils';
107

118
const CONVERSATION_ID = 'reasoning-slots-demo';
129

@@ -32,50 +29,38 @@ const initialMessages = [
3229
},
3330
];
3431

35-
// Emit one chunk per pull, with a small delay, so the disclosure visibly streams.
36-
function streamChunks(chunks: ChatMessageChunk[]) {
37-
let index = 0;
38-
return new ReadableStream<ChatMessageChunk>({
39-
pull(controller) {
40-
return new Promise<void>((resolve) => {
41-
setTimeout(() => {
42-
if (index < chunks.length) {
43-
controller.enqueue(chunks[index]);
44-
index += 1;
45-
} else {
46-
controller.close();
47-
}
48-
resolve();
49-
}, 100);
50-
});
51-
},
52-
});
53-
}
54-
5532
const adapter: ChatAdapter = {
5633
async sendMessage({ message }) {
5734
const messageId = `reply-${message.id}`;
58-
return streamChunks([
59-
{ type: 'start', messageId },
60-
{ type: 'reasoning-start', id: 'r1' },
61-
{
62-
type: 'reasoning-delta',
63-
id: 'r1',
64-
delta: 'Let me think about how to answer this. ',
65-
},
66-
{
67-
type: 'reasoning-delta',
68-
id: 'r1',
69-
delta: 'The question is straightforward, ',
70-
},
71-
{ type: 'reasoning-delta', id: 'r1', delta: 'so a concise reply works best.' },
72-
{ type: 'reasoning-end', id: 'r1' },
73-
{ type: 'text-start', id: 't1' },
74-
{ type: 'text-delta', id: 't1', delta: 'Here is the answer, now that ' },
75-
{ type: 'text-delta', id: 't1', delta: 'the reasoning above has finished.' },
76-
{ type: 'text-end', id: 't1' },
77-
{ type: 'finish', messageId },
78-
]);
35+
// Emit one chunk at a time, with a small delay, so the disclosure visibly streams.
36+
return createChunkStream(
37+
[
38+
{ type: 'start', messageId },
39+
{ type: 'reasoning-start', id: 'r1' },
40+
{
41+
type: 'reasoning-delta',
42+
id: 'r1',
43+
delta: 'Let me think about how to answer this. ',
44+
},
45+
{
46+
type: 'reasoning-delta',
47+
id: 'r1',
48+
delta: 'The question is straightforward, ',
49+
},
50+
{
51+
type: 'reasoning-delta',
52+
id: 'r1',
53+
delta: 'so a concise reply works best.',
54+
},
55+
{ type: 'reasoning-end', id: 'r1' },
56+
{ type: 'text-start', id: 't1' },
57+
{ type: 'text-delta', id: 't1', delta: 'Here is the answer, now that ' },
58+
{ type: 'text-delta', id: 't1', delta: 'the reasoning above has finished.' },
59+
{ type: 'text-end', id: 't1' },
60+
{ type: 'finish', messageId },
61+
],
62+
{ delayMs: 100 },
63+
);
7964
},
8065
};
8166

@@ -167,7 +152,7 @@ export default function ReasoningSlotsDemo() {
167152
},
168153
}}
169154
sx={{
170-
height: 480,
155+
height: 500,
171156
border: '1px solid',
172157
borderColor: 'divider',
173158
borderRadius: 1,

‎docs/data/chat/ai-and-agents/reasoning/ReasoningStreamingDemo.js‎

Lines changed: 34 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
'use client';
22
import { ChatBox } from '@mui/x-chat';
33

4+
import { createChunkStream } from 'docs/data/chat/core/examples/shared/demoUtils';
5+
46
const CONVERSATION_ID = 'reasoning-demo';
57

68
const initialConversations = [{ id: CONVERSATION_ID, title: 'Reasoning' }];
@@ -25,52 +27,40 @@ const initialMessages = [
2527
},
2628
];
2729

28-
// Emit one chunk per pull, with a small delay, so the disclosure visibly streams.
29-
function streamChunks(chunks) {
30-
let index = 0;
31-
return new ReadableStream({
32-
pull(controller) {
33-
return new Promise((resolve) => {
34-
setTimeout(() => {
35-
if (index < chunks.length) {
36-
controller.enqueue(chunks[index]);
37-
index += 1;
38-
} else {
39-
controller.close();
40-
}
41-
resolve();
42-
}, 100);
43-
});
44-
},
45-
});
46-
}
47-
4830
const adapter = {
4931
async sendMessage({ message }) {
5032
const messageId = `reply-${message.id}`;
51-
return streamChunks([
52-
{ type: 'start', messageId },
53-
// Reasoning section — auto-expanded and labelled "Thinking…" while streaming.
54-
{ type: 'reasoning-start', id: 'r1' },
55-
{
56-
type: 'reasoning-delta',
57-
id: 'r1',
58-
delta: 'Let me think about how to answer this. ',
59-
},
60-
{
61-
type: 'reasoning-delta',
62-
id: 'r1',
63-
delta: 'The question is straightforward, ',
64-
},
65-
{ type: 'reasoning-delta', id: 'r1', delta: 'so a concise reply works best.' },
66-
{ type: 'reasoning-end', id: 'r1' },
67-
// Final answer — the reasoning collapses to a "Reasoning" summary as this streams.
68-
{ type: 'text-start', id: 't1' },
69-
{ type: 'text-delta', id: 't1', delta: 'Here is the answer, now that ' },
70-
{ type: 'text-delta', id: 't1', delta: 'the reasoning above has finished.' },
71-
{ type: 'text-end', id: 't1' },
72-
{ type: 'finish', messageId },
73-
]);
33+
// Emit one chunk at a time, with a small delay, so the disclosure visibly streams.
34+
return createChunkStream(
35+
[
36+
{ type: 'start', messageId },
37+
// Reasoning section — auto-expanded and labelled "Thinking…" while streaming.
38+
{ type: 'reasoning-start', id: 'r1' },
39+
{
40+
type: 'reasoning-delta',
41+
id: 'r1',
42+
delta: 'Let me think about how to answer this. ',
43+
},
44+
{
45+
type: 'reasoning-delta',
46+
id: 'r1',
47+
delta: 'The question is straightforward, ',
48+
},
49+
{
50+
type: 'reasoning-delta',
51+
id: 'r1',
52+
delta: 'so a concise reply works best.',
53+
},
54+
{ type: 'reasoning-end', id: 'r1' },
55+
// Final answer — the reasoning collapses to a "Reasoning" summary as this streams.
56+
{ type: 'text-start', id: 't1' },
57+
{ type: 'text-delta', id: 't1', delta: 'Here is the answer, now that ' },
58+
{ type: 'text-delta', id: 't1', delta: 'the reasoning above has finished.' },
59+
{ type: 'text-end', id: 't1' },
60+
{ type: 'finish', messageId },
61+
],
62+
{ delayMs: 100 },
63+
);
7464
},
7565
};
7666

@@ -82,7 +72,7 @@ export default function ReasoningStreamingDemo() {
8272
initialConversations={initialConversations}
8373
initialMessages={initialMessages}
8474
sx={{
85-
height: 480,
75+
height: 500,
8676
border: '1px solid',
8777
borderColor: 'divider',
8878
borderRadius: 1,

0 commit comments

Comments
 (0)