Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit aa43d90

Browse files
add working streaming frontend
1 parent 8c052dc commit aa43d90

File tree

1 file changed

+21
-32
lines changed

1 file changed

+21
-32
lines changed

‎src/frontend/src/pages/chat/Chat.tsx

Lines changed: 21 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { SparkleFilled } from "@fluentui/react-icons";
55
import styles from "./Chat.module.css";
66

77
import { RetrievalMode, RAGChatCompletion, RAGChatCompletionDelta } from "../../api";
8+
import { AIChatProtocolClient, AIChatMessage } from "@microsoft/ai-chat-protocol";
89
import { Answer, AnswerError, AnswerLoading } from "../../components/Answer";
910
import { QuestionInput } from "../../components/QuestionInput";
1011
import { ExampleList } from "../../components/Example";
@@ -37,29 +38,24 @@ const Chat = () => {
3738
const [answers, setAnswers] = useState<[user: string, response: RAGChatCompletion][]>([]);
3839
const [streamedAnswers, setStreamedAnswers] = useState<[user: string, response: RAGChatCompletion][]>([]);
3940

40-
const handleAsyncRequest = async (
41-
question: string,
42-
answers: [string, RAGChatCompletionDelta][],
43-
setStreamedAnswers: Function,
44-
result: AsyncIterable<AIChatCompletionDelta>
45-
) => {
41+
const handleAsyncRequest = async (question: string, answers: [string, RAGChatCompletion][], result: AsyncIterable<RAGChatCompletionDelta>) => {
4642
let answer = "";
4743
let chatCompletion: RAGChatCompletion = {
4844
context: {
4945
data_points: {},
5046
followup_questions: null,
5147
thoughts: []
5248
},
53-
message: { content: "", role: "assistant" },
49+
message: { content: "", role: "assistant" }
5450
};
5551
const updateState = (newContent: string) => {
5652
return new Promise(resolve => {
5753
setTimeout(() => {
5854
answer += newContent;
5955
// We need to create a new object to trigger a re-render
60-
const latestCompletion: RAGChatCompletionDelta = {
56+
const latestCompletion: RAGChatCompletion = {
6157
...chatCompletion,
62-
delta: { content: answer, role: chatCompletion.message.role }
58+
message: { content: answer, role: chatCompletion.message.role }
6359
};
6460
setStreamedAnswers([...answers, [question, latestCompletion]]);
6561
resolve(null);
@@ -69,22 +65,19 @@ const Chat = () => {
6965
try {
7066
setIsStreaming(true);
7167
for await (const response of result) {
72-
if (!response.delta) {
73-
continue;
74-
}
75-
if (response.role) {
76-
chatCompletion.message.role = response.delta.role;
77-
}
78-
if (response.content) {
79-
setIsLoading(false);
80-
await updateState(response.delta.content);
81-
}
8268
if (response.context) {
8369
chatCompletion.context = {
8470
...chatCompletion.context,
8571
...response.context
8672
};
8773
}
74+
if (response.delta && response.delta.role) {
75+
chatCompletion.message.role = response.delta.role;
76+
}
77+
if (response.delta && response.delta.content) {
78+
setIsLoading(false);
79+
await updateState(response.delta.content);
80+
}
8881
}
8982
} finally {
9083
setIsStreaming(false);
@@ -118,12 +111,12 @@ const Chat = () => {
118111
}
119112
};
120113
const chatClient: AIChatProtocolClient = new AIChatProtocolClient("/chat");
121-
if (shouldStream) {
122-
const result = await chatClient.getStreamedCompletion(allMessages, options);
123-
const parsedResponse = await handleAsyncRequest(question, answers, setStreamedAnswers,result);
114+
if (shouldStream) {
115+
const result = (await chatClient.getStreamedCompletion(allMessages, options))asAsyncIterable<RAGChatCompletionDelta>;
116+
const parsedResponse = await handleAsyncRequest(question, answers, result);
124117
setAnswers([...answers, [question, parsedResponse]]);
125118
} else {
126-
const result = await chatClient.getCompletion(allMessages, options) as RAGChatCompletion;
119+
const result = (await chatClient.getCompletion(allMessages, options)) as RAGChatCompletion;
127120
setAnswers([...answers, [question, result]]);
128121
}
129122
} catch (e) {
@@ -165,7 +158,7 @@ const Chat = () => {
165158

166159
const onUseAdvancedFlowChange = (_ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => {
167160
setUseAdvancedFlow(!!checked);
168-
}
161+
};
169162

170163
const onShouldStreamChange = (_ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => {
171164
setShouldStream(!!checked);
@@ -213,7 +206,8 @@ const Chat = () => {
213206
</div>
214207
) : (
215208
<div className={styles.chatMessageStream}>
216-
{isStreaming && streamedAnswers.map((streamedAnswer, index) => (
209+
{isStreaming &&
210+
streamedAnswers.map((streamedAnswer, index) => (
217211
<div key={index}>
218212
<UserChatMessage message={streamedAnswer[0]} />
219213
<div className={styles.chatMessageGpt}>
@@ -230,7 +224,7 @@ const Chat = () => {
230224
</div>
231225
</div>
232226
))}
233-
{!isStreaming &&
227+
{!isStreaming &&
234228
answers.map((answer, index) => (
235229
<div key={index}>
236230
<UserChatMessage message={answer[0]} />
@@ -298,7 +292,6 @@ const Chat = () => {
298292
onRenderFooterContent={() => <DefaultButton onClick={() => setIsConfigPanelOpen(false)}>Close</DefaultButton>}
299293
isFooterAtBottom={true}
300294
>
301-
302295
<Checkbox
303296
className={styles.chatSettingsSeparator}
304297
checked={useAdvancedFlow}
@@ -317,10 +310,7 @@ const Chat = () => {
317310
onChange={onRetrieveCountChange}
318311
/>
319312

320-
<VectorSettings
321-
updateRetrievalMode={(retrievalMode: RetrievalMode) => setRetrievalMode(retrievalMode)}
322-
/>
323-
313+
<VectorSettings updateRetrievalMode={(retrievalMode: RetrievalMode) => setRetrievalMode(retrievalMode)} />
324314

325315
<h3>Settings for final chat completion:</h3>
326316

@@ -351,7 +341,6 @@ const Chat = () => {
351341
label="Stream chat completion responses"
352342
onChange={onShouldStreamChange}
353343
/>
354-
355344
</Panel>
356345
</div>
357346
</div>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /