Skip to content

Commit 11db5b1

Browse files
chrisgleinchrisglein
committed
Move ownership of chat history to place where entries lives
1 parent 5cecaa3 commit 11db5b1

File tree

2 files changed

+84
-81
lines changed

2 files changed

+84
-81
lines changed

‎src/AppContent.tsx

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import React from 'react';
2-
import { Chat, ChatSource, ChatContent } from './Chat';
2+
import {
3+
Chat,
4+
ChatContent,
5+
ChatHistoryContext,
6+
ChatSource,
7+
} from './Chat';
38
import type { ChatElement } from './Chat';
49
import { StylesContext } from './Styles';
510
import { SettingsContext } from './Settings';
@@ -11,12 +16,12 @@ import { handleAIResponse } from './ChatScript';
1116
type AutomatedChatSessionProps = {
1217
entries: ChatElement[];
1318
appendEntry: (entry: ChatElement | ChatElement[]) => void;
14-
modifyEntry: (id: number, delta: any) => void;
1519
clearConversation: () => void;
1620
};
17-
function AutomatedChatSession({entries, appendEntry, modifyEntry, clearConversation}: AutomatedChatSessionProps): JSX.Element {
21+
function AutomatedChatSession({entries, appendEntry, clearConversation}: AutomatedChatSessionProps): JSX.Element {
1822
const styles = React.useContext(StylesContext);
1923
const settings = React.useContext(SettingsContext);
24+
const chatHistory = React.useContext(ChatHistoryContext);
2025

2126
const [chatScriptIndex, setChatScriptIndex] = React.useState(0);
2227

@@ -122,8 +127,7 @@ function AutomatedChatSession({entries, appendEntry, modifyEntry, clearConversat
122127
entries={entries}
123128
humanText={humanText}
124129
onPrompt={(text) => onPrompt(text, chatScriptIndex)}
125-
onResponse={({prompt, response, contentType, entryId}) => modifyEntry(entryId, {text: response, contentType: contentType, prompt: prompt})}
126-
modifyResponse={(entryId, delta) => modifyEntry(entryId, delta)}
130+
onResponse={({prompt, response, contentType, entryId}) => chatHistory.modifyResponse(entryId, {text: response, contentType: contentType, prompt: prompt})}
127131
clearConversation={() => {
128132
setChatScriptIndex(0);
129133
clearConversation();
@@ -165,11 +169,12 @@ function ChatSession(): JSX.Element {
165169
const clearConversation = () => setEntries([]);
166170

167171
return (
168-
<AutomatedChatSession
169-
entries={entries}
170-
appendEntry={appendEntry}
171-
modifyEntry={modifyEntry}
172-
clearConversation={clearConversation}/>
172+
<ChatHistoryContext.Provider value={{entries: entries, modifyResponse: modifyEntry}}>
173+
<AutomatedChatSession
174+
entries={entries}
175+
appendEntry={appendEntry}
176+
clearConversation={clearConversation}/>
177+
</ChatHistoryContext.Provider>
173178
);
174179
}
175180

‎src/Chat.tsx

Lines changed: 69 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -98,11 +98,11 @@ type ChatProps = {
9898
humanText? : string;
9999
onPrompt: (prompt: string) => void;
100100
onResponse: ({prompt, response, contentType, entryId} : { prompt: string, response: string, contentType: ChatContent, entryId: number} ) => void;
101-
modifyResponse: (id: number, delta?: any) => void;
102101
clearConversation: () => void;
103102
};
104-
function Chat({entries, humanText, onPrompt, onResponse, modifyResponse, clearConversation}: ChatProps): JSX.Element {
103+
function Chat({entries, humanText, onPrompt, onResponse, clearConversation}: ChatProps): JSX.Element {
105104
const styles = React.useContext(StylesContext);
105+
const chatHistory = React.useContext(ChatHistoryContext);
106106
const [showFeedbackPopup, setShowFeedbackPopup] = React.useState(false);
107107
const [showSettingsPopup, setShowSettingsPopup] = React.useState(false);
108108
const [feedbackIsPositive, setFeedbackIsPositive] = React.useState(false);
@@ -124,78 +124,76 @@ function Chat({entries, humanText, onPrompt, onResponse, modifyResponse, clearCo
124124

125125
return (
126126
<FeedbackContext.Provider value={feedbackContext}>
127-
<ChatHistoryContext.Provider value={{entries: entries, modifyResponse: modifyResponse}}>
128-
<ChatScrollContext.Provider value={{scrollToEnd: scrollToEnd}}>
129-
<View style={styles.appContent}>
130-
<ScrollView
131-
contentInsetAdjustmentBehavior="automatic"
132-
ref={scrollViewRef}
133-
style={{flexShrink: 1}}>
134-
<View
135-
style={{gap: 12}}>
136-
{// For each item in the chat log, render the appropriate component
137-
entries.map((entry) => (
138-
<View key={entry.id}>
139-
{
140-
entry.type === ChatSource.Human ?
141-
// Human inputs are always plain text
142-
<HumanSection content={entry.text}/> :
143-
entry.content ?
144-
// The element may have provided its own UI
145-
entry.content :
146-
// Otherwise, either render the completed query or start a query to get the resolved text
147-
entry.text ?
148-
<AiSectionContent
149-
id={entry.id}
150-
content={entry}/> :
151-
<AiSectionWithQuery
152-
id={entry.id}
153-
prompt={entry.prompt ?? ""}
154-
intent={entry.intent}
155-
onResponse={({prompt, response, contentType}) => onResponse({prompt: prompt, response: response, contentType: contentType, entryId: entry.id})}/>
156-
}
157-
</View>
158-
))}
159-
{(entries.length > 0) &&
160-
<View style={{alignSelf: 'center'}}>
161-
<Button
162-
title="🔁 Regenerate response"
163-
onPress={() => {
164-
// Clear the response for the last entry
165-
modifyResponse(entries.length - 1, {text: undefined});
166-
}}/>
167-
</View>
168-
}
169-
</View>
170-
</ScrollView>
127+
<ChatScrollContext.Provider value={{scrollToEnd: scrollToEnd}}>
128+
<View style={styles.appContent}>
129+
<ScrollView
130+
contentInsetAdjustmentBehavior="automatic"
131+
ref={scrollViewRef}
132+
style={{flexShrink: 1}}>
171133
<View
172-
style={{flexShrink: 0, marginBottom: 12}}>
173-
<HumanSection
174-
disableEdit={true}
175-
disableCopy={true}
176-
contentShownOnHover={
177-
<HoverButton content="⚙️" onPress={() => setShowSettingsPopup(true)}/>
178-
}>
179-
<ChatEntry
180-
defaultText={humanText}
181-
submit={(newEntry) => {
182-
onPrompt(newEntry);
183-
scrollToEnd();
184-
}}
185-
clearConversation={clearConversation}/>
186-
</HumanSection>
134+
style={{gap: 12}}>
135+
{// For each item in the chat log, render the appropriate component
136+
entries.map((entry) => (
137+
<View key={entry.id}>
138+
{
139+
entry.type === ChatSource.Human ?
140+
// Human inputs are always plain text
141+
<HumanSection content={entry.text}/> :
142+
entry.content ?
143+
// The element may have provided its own UI
144+
entry.content :
145+
// Otherwise, either render the completed query or start a query to get the resolved text
146+
entry.text ?
147+
<AiSectionContent
148+
id={entry.id}
149+
content={entry}/> :
150+
<AiSectionWithQuery
151+
id={entry.id}
152+
prompt={entry.prompt ?? ""}
153+
intent={entry.intent}
154+
onResponse={({prompt, response, contentType}) => onResponse({prompt: prompt, response: response, contentType: contentType, entryId: entry.id})}/>
155+
}
156+
</View>
157+
))}
158+
{(entries.length > 0) &&
159+
<View style={{alignSelf: 'center'}}>
160+
<Button
161+
title="🔁 Regenerate response"
162+
onPress={() => {
163+
// Clear the response for the last entry
164+
chatHistory.modifyResponse(entries.length - 1, {text: undefined});
165+
}}/>
166+
</View>
167+
}
187168
</View>
188-
{ (showFeedbackPopup || showSettingsPopup) && <View style={styles.popupBackground}/> }
189-
<FeedbackPopup
190-
show={showFeedbackPopup}
191-
isPositive={feedbackIsPositive}
192-
close={() => setShowFeedbackPopup(false)}/>
193-
<SettingsPopup
194-
show={showSettingsPopup}
195-
close={() => setShowSettingsPopup(false)}/>
169+
</ScrollView>
170+
<View
171+
style={{flexShrink: 0, marginBottom: 12}}>
172+
<HumanSection
173+
disableEdit={true}
174+
disableCopy={true}
175+
contentShownOnHover={
176+
<HoverButton content="⚙️" onPress={() => setShowSettingsPopup(true)}/>
177+
}>
178+
<ChatEntry
179+
defaultText={humanText}
180+
submit={(newEntry) => {
181+
onPrompt(newEntry);
182+
scrollToEnd();
183+
}}
184+
clearConversation={clearConversation}/>
185+
</HumanSection>
196186
</View>
197-
</ChatScrollContext.Provider>
198-
</ChatHistoryContext.Provider>
187+
{ (showFeedbackPopup || showSettingsPopup) && <View style={styles.popupBackground}/> }
188+
<FeedbackPopup
189+
show={showFeedbackPopup}
190+
isPositive={feedbackIsPositive}
191+
close={() => setShowFeedbackPopup(false)}/>
192+
<SettingsPopup
193+
show={showSettingsPopup}
194+
close={() => setShowSettingsPopup(false)}/>
195+
</View>
196+
</ChatScrollContext.Provider>
199197
</FeedbackContext.Provider>
200198
);
201199
}

0 commit comments

Comments
 (0)