Skip to content

Commit

Permalink
feat: add one thread and auto dismiss options
Browse files Browse the repository at this point in the history
  • Loading branch information
@juancarlosfarah
juancarlosfarah committed Apr 6, 2024
1 parent 78b7519 commit 273b267
Show file tree
Hide file tree
Showing 6 changed files with 100 additions and 53 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"@types/react-dom": "18.2.22",
"date-fns": "3.6.0",
"i18next": "23.9.0",
"lodash": "4.17.21",
"react": "18.2.0",
"react-content-loader": "7.0.0",
"react-dom": "18.2.0",
Expand Down Expand Up @@ -58,6 +59,7 @@
"@cypress/code-coverage": "3.12.32",
"@trivago/prettier-plugin-sort-imports": "4.3.0",
"@types/i18n": "0.13.10",
"@types/lodash": "^4",
"@types/uuid": "9.0.8",
"@typescript-eslint/eslint-plugin": "7.4.0",
"@typescript-eslint/parser": "7.4.0",
Expand Down
24 changes: 22 additions & 2 deletions src/modules/interaction/ParticipantInteraction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const ParticipantInteraction = (): ReactElement => {
updatedAt: new Date(),
},
{
id: 1,
id: 2,
name: 'Exchange 3',
description: 'Exchange 3 Description',
instructions: 'Instructions',
Expand All @@ -93,6 +93,25 @@ const ParticipantInteraction = (): ReactElement => {
createdAt: new Date(),
updatedAt: new Date(),
},
{
id: 3,
name: 'Exchange 4',
description: 'Exchange 4 Description',
instructions: 'Instructions',
participantInstructionsOnComplete: `Thanks for answering this question. You can finish the interaction by clicking on "Next".`,
cue: `Thanks again for your responses! Do you have anything else to add?`,
order: 4,
messages: [],
assistant: artificialAssistant,
triggers: [],
started: false,
completed: false,
dismissed: false,
softLimit: 1,
hardLimit: 0,
createdAt: new Date(),
updatedAt: new Date(),
},
],
createdAt: new Date(),
updatedAt: new Date(),
Expand Down Expand Up @@ -140,7 +159,7 @@ const ParticipantInteraction = (): ReactElement => {
}}
>
{interaction.participantInstructions && (
<Typography variant="h4" sx={{ p: 10, textAlign: 'justify' }}>
<Typography variant="h4" sx={{ p: 2, pt: 4, textAlign: 'justify' }}>
{interaction.participantInstructions}
</Typography>
)}
Expand Down Expand Up @@ -171,6 +190,7 @@ const ParticipantInteraction = (): ReactElement => {
) : (
<MessagesPane
goToNextExchange={goToNextExchange}
autoDismiss
exchange={interaction.exchanges[interaction.currentExchange]}
participantId={participantId}
readOnly={false}
Expand Down
4 changes: 2 additions & 2 deletions src/modules/message/ChatBubble.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const ChatBubble = ({
}: ChatBubbleProps): ReactElement => {
const isSent = variant === 'sent';
return (
<Box sx={{ maxWidth: '60%', minWidth: 'auto' }}>
<Box sx={{ maxWidth: '100%', minWidth: 'auto' }}>
<Stack
direction="row"
justifyContent="space-between"
Expand All @@ -49,7 +49,7 @@ const ChatBubble = ({
}}
>
<Typography
variant="body1"
variant="body2"
sx={{
color: isSent
? 'var(--joy-palette-common-white)'
Expand Down
3 changes: 2 additions & 1 deletion src/modules/message/MessageInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,13 @@ const MessageInput = ({
<Box sx={{ px: 2, pb: 3 }}>
<FormControl sx={{ width: '100%' }}>
<Textarea
placeholder="Type something here…"
placeholder="Votre réponse ici…"
aria-label="Message"
ref={textAreaRef}
onChange={(e): void => {
setTextAreaValue(e.target.value);
}}
size="small"
multiline
value={textAreaValue}
minRows={3}
Expand Down
109 changes: 62 additions & 47 deletions src/modules/message/MessagesPane.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Stack from '@mui/material/Stack';

import { ChatBotMessage, ChatbotRole } from '@graasp/sdk';

import _ from 'lodash';
import { v4 as uuidv4 } from 'uuid';

import { mutations } from '@/config/queryClient';
Expand All @@ -24,6 +25,7 @@ type MessagesPaneProps = {
exchange: Exchange;
participantId: string;
readOnly?: boolean;
autoDismiss?: boolean;
goToNextExchange: () => void;
};

Expand Down Expand Up @@ -61,6 +63,7 @@ const buildPrompt = (
const MessagesPane = ({
exchange: defaultExchange,
participantId,
autoDismiss,
readOnly = false,
goToNextExchange,
}: MessagesPaneProps): ReactElement => {
Expand All @@ -70,11 +73,12 @@ const MessagesPane = ({
const [exchange, setExchange] = useState<Exchange>(defaultExchange);
const [messages, setMessages] = useState<Message[]>([]);
const [textAreaValue, setTextAreaValue] = useState('');
const [sentMessageCount, setSentMessageCount] = useState<number>(0);

useEffect(() => {
const defaultMessages: Message[] = [
{
id: '0',
id: `${defaultExchange.id}`,
content: defaultExchange.cue,
sender: {
id: '1',
Expand All @@ -83,7 +87,7 @@ const MessagesPane = ({
},
},
];
setMessages(defaultMessages);
setMessages((m) => _.uniqBy([...m, ...defaultMessages], 'id'));
setExchange(defaultExchange);
}, [defaultExchange]);

Expand All @@ -98,56 +102,67 @@ const MessagesPane = ({
type: AgentType.User,
},
};
const updatedMessages = [...messages, newMessage];
setMessages((m) => [...m, newMessage]);

// respond
const prompt = [
// initial settings
// ...
// this function requests the prompt as the first argument in string format
// we can not use it in this context as we are using a JSON prompt.
// if we simplify the prompt in the future we will be able to remove the line above
// and this function solely
...buildPrompt(messages, newMessage),
];

postChatBot(prompt)
.then((chatBotRes) => {
// actionData.content = chatBotRes.completion;
const response = {
id: uuidv4(),
content: chatBotRes.completion,
sender: {
id: '1',
name: 'Bot',
type: AgentType.Assistant,
},
};
// const updatedMessagesWithResponse = [...updatedMessages, response];
setMessages((m) => [...m, response]);
})
.finally(() => {
// set status back to idle
setStatus(Status.Idle);

// post comment from bot
// postAppDataAsync({
// data: actionData,
// type: AppDataTypes.BotComment,
// });
// postAction({
// data: actionData,
// type: AppActionsType.Create,
// });
});
setMessages((m) => [...m, newMessage]);
setSentMessageCount((c) => c + 1);

// handle response
if (exchange.softLimit && updatedMessages.length > exchange.softLimit) {
// will not take updated message count in consideration so we add two
// https://react.dev/reference/react/useState#setstate-caveats
if (exchange.softLimit && sentMessageCount + 2 > exchange.softLimit) {
const newExchange = { ...exchange };
newExchange.completed = true;
newExchange.completedAt = new Date();
setExchange(newExchange);
if (autoDismiss) {
newExchange.dismissed = true;
newExchange.dismissedAt = new Date();
setExchange(newExchange);
setStatus(Status.Idle);
setSentMessageCount(0);
goToNextExchange();
} else {
setExchange(newExchange);
}
} else {
// respond
const prompt = [
// initial settings
// ...
// this function requests the prompt as the first argument in string format
// we can not use it in this context as we are using a JSON prompt.
// if we simplify the prompt in the future we will be able to remove the line above
// and this function solely
...buildPrompt(messages, newMessage),
];

postChatBot(prompt)
.then((chatBotRes) => {
// actionData.content = chatBotRes.completion;
const response = {
id: uuidv4(),
content: chatBotRes.completion,
sender: {
id: '1',
name: 'Bot',
type: AgentType.Assistant,
},
};
// const updatedMessagesWithResponse = [...updatedMessages, response];
setMessages((m) => [...m, response]);
})
.finally(() => {
// set status back to idle
setStatus(Status.Idle);

// post comment from bot
// postAppDataAsync({
// data: actionData,
// type: AppDataTypes.BotComment,
// });
// postAction({
// data: actionData,
// type: AppActionsType.Create,
// });
});
}

// evaluate
Expand Down
11 changes: 10 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4098,6 +4098,13 @@ __metadata:
languageName: node
linkType: hard

"@types/lodash@npm:^4":
version: 4.17.0
resolution: "@types/lodash@npm:4.17.0"
checksum: 10/2053203292b5af99352d108656ceb15d39da5922fc3fb8186e1552d65c82d6e545372cc97f36c95873aa7186404d59d9305e9d49254d4ae55e77df1e27ab7b5d
languageName: node
linkType: hard

"@types/mime@npm:*":
version: 3.0.4
resolution: "@types/mime@npm:3.0.4"
Expand Down Expand Up @@ -8217,6 +8224,7 @@ __metadata:
"@tanstack/react-query-devtools": "npm:4.36.1"
"@trivago/prettier-plugin-sort-imports": "npm:4.3.0"
"@types/i18n": "npm:0.13.10"
"@types/lodash": "npm:^4"
"@types/node": "npm:20.11.30"
"@types/react": "npm:18.2.70"
"@types/react-dom": "npm:18.2.22"
Expand All @@ -8243,6 +8251,7 @@ __metadata:
eslint-plugin-react-hooks: "npm:4.6.0"
husky: "npm:9.0.11"
i18next: "npm:23.9.0"
lodash: "npm:4.17.21"
miragejs: "npm:0.1.48"
nock: "npm:13.5.3"
nyc: "npm:15.1.0"
Expand Down Expand Up @@ -9622,7 +9631,7 @@ __metadata:
languageName: node
linkType: hard

"lodash@npm:^4.0.0, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4":
"lodash@npm:4.17.21, lodash@npm:^4.0.0, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4":
version: 4.17.21
resolution: "lodash@npm:4.17.21"
checksum: 10/c08619c038846ea6ac754abd6dd29d2568aa705feb69339e836dfa8d8b09abbb2f859371e86863eda41848221f9af43714491467b5b0299122431e202bb0c532
Expand Down

0 comments on commit 273b267

Please sign in to comment.