Skip to content

Commit

Permalink
fix: use resizing version and add nullable operator
Browse files Browse the repository at this point in the history
  • Loading branch information
@spaenleh
spaenleh committed Dec 19, 2023
1 parent 215378a commit ebd099b
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 131 deletions.
6 changes: 3 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/graasp.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="Graasp App template" />
<meta name="title" content="Graasp Chatbot App" />
<meta
name="description"
content="A Template project to create graasp apps."
content="An app to discuss with ChatGPT on Graasp."
/>
<meta
name="version-info"
Expand All @@ -19,7 +19,7 @@
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<title>Graasp App Template</title>
<title>Graasp Chatbot App</title>
</head>
<body>
<div id="root"></div>
Expand Down
11 changes: 0 additions & 11 deletions src/config/layout.ts
View file

This file was deleted.

4 changes: 2 additions & 2 deletions src/modules/Root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const Root: FC = () => {
<ToastContainer />
<WithLocalContext
defaultValue={window.Cypress ? window.appContext : mockContext}
LoadingComponent={<Loader>Loading Context</Loader>}
LoadingComponent={<Loader>Context</Loader>}
useGetLocalContext={hooks.useGetLocalContext}
useAutoResize={hooks.useAutoResize}
onError={() => {
Expand All @@ -94,7 +94,7 @@ const Root: FC = () => {
}}
>
<WithTokenContext
LoadingComponent={<Loader>Loading token</Loader>}
LoadingComponent={<Loader>Token</Loader>}
useAuthToken={hooks.useAuthToken}
onError={() => {
console.error(
Expand Down
223 changes: 110 additions & 113 deletions src/modules/common/CommentThread.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FC, Fragment, useState } from 'react';
import { Fragment, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { CircularProgress, Stack, Typography } from '@mui/material';
Expand Down Expand Up @@ -29,7 +29,7 @@ type Props = {
children?: CommentAppData[];
};

const CommentThread: FC<Props> = ({ children }) => {
const CommentThread = ({ children }: Props): JSX.Element | null => {
const { t } = useTranslation();
const [replyingId, setReplyingId] = useState<string | null>(null);
const [editingId, setEditingId] = useState<string | null>(null);
Expand All @@ -46,7 +46,7 @@ const CommentThread: FC<Props> = ({ children }) => {
const chatbotPrompt = chatbotPrompts?.[0];
const { maxThreadLength, maxCommentLength } = {
...DEFAULT_GENERAL_SETTINGS,
...generalSettings?.[0].data,
...generalSettings?.[0]?.data,
};

const allowedChatbotResponse = (
Expand All @@ -62,6 +62,7 @@ const CommentThread: FC<Props> = ({ children }) => {
const addResponse = (id: string): void => {
setReplyingId(id);
};

const botComment = children?.find(
(c) => c.data.chatbotPromptSettingId === chatbotPrompt?.id,
);
Expand All @@ -70,127 +71,123 @@ const CommentThread: FC<Props> = ({ children }) => {
}
const commentThread = buildThread(botComment, children);

console.debug(children);
// utility functions
const isReplied = (id: string): boolean => replyingId === id;
const isEdited = (id: string): boolean => editingId === id;

return (
<CommentContainer data-cy={COMMENT_THREAD_CONTAINER_CYPRESS}>
{commentThread.map((c, i, arr) => {
console.debug(c.id, isEdited(c.id));
return (
<Fragment key={c.id}>
{isEdited(c.id) ? (
{commentThread.map((c, i, arr) => (
<Fragment key={c.id}>
{isEdited(c.id) ? (
<CommentEditor
maxTextLength={maxCommentLength}
onCancel={() => {
setEditingId(null);
}}
onSend={(content) => {
patchData({
id: c.id,
data: {
...c.data,
content,
},
});
setEditingId(null);
}}
comment={c}
/>
) : (
<Comment comment={c} onEdit={(id) => setEditingId(id)} />
)}
{
// show input bar to respond to comment
i + 1 === arr.length &&
!isLoading &&
!isEdited(c.id) &&
!isReplied(c.id) &&
allowedChatbotResponse(arr, i, c.type) && (
<ResponseBox commentId={c.id} onClick={addResponse} />
)
}
{i + 1 === arr.length && isLoading && (
<ResponseContainer>
<Stack spacing={2} direction="row" justifyContent="center">
<Typography color="#666">{t('Loading')}</Typography>
<CircularProgress sx={{ color: '#666' }} size="20px" />
</Stack>
</ResponseContainer>
)}
{
// if input bar was clicked, a comment editor opens to compose a response
isReplied(c.id) && (
<CommentEditor
maxTextLength={maxCommentLength}
onCancel={() => {
setEditingId(null);
}}
onCancel={() => setReplyingId(null)}
onSend={(content) => {
patchData({
id: c.id,
data: {
...c.data,
content,
},
const data = {
...c.data,
parent: c.id,
content,
};

postAppDataAsync({
data,
type: AppDataTypes.UserComment,
})?.then((parent) => {
// when in a chatbot thread, should also post to the api
if (commentThread[0]?.type === AppDataTypes.BotComment) {
const chatbotThread: ChatbotThreadMessage[] =
commentThread.map((botThread) => ({
botDataType: AppDataTypes.BotComment,
msgType: botThread.type,
data: botThread.data.content,
}));

const prompt = buildPrompt(
chatbotPrompt?.data.chatbotCue,
chatbotThread,
content,
);

const newData = {
...data,
parent: parent?.id,
content: 'error',
};

postChatbot(prompt)
.then((chatBotRes) => {
newData.content = chatBotRes.completion;
})
.finally(() => {
postAppDataAsync({
data: newData,
type: AppDataTypes.BotComment,
});
postAction({
data: newData,
type: AppActionsType.Create,
});
});

postAction({
data: { prompt },
type: AppActionsType.AskChatbot,
});
}
});
postAction({
data,
type: AppActionsType.Reply,
});
setEditingId(null);
setReplyingId(null);
}}
comment={c}
comment={{ ...c, data: { ...c.data, content: '' } }}
/>
) : (
<Comment comment={c} onEdit={(id) => setEditingId(id)} />
)}
{
// show input bar to respond to comment
i + 1 === arr.length &&
!isLoading &&
!isEdited(c.id) &&
!isReplied(c.id) &&
allowedChatbotResponse(arr, i, c.type) && (
<ResponseBox commentId={c.id} onClick={addResponse} />
)
}
{i + 1 === arr.length && isLoading && (
<ResponseContainer>
<Stack spacing={2} direction="row" justifyContent="center">
<Typography color="#666">{t('Loading')}</Typography>
<CircularProgress sx={{ color: '#666' }} size="20px" />
</Stack>
</ResponseContainer>
)}
{
// if input bar was clicked, a comment editor opens to compose a response
isReplied(c.id) && (
<CommentEditor
onCancel={() => setReplyingId(null)}
onSend={(content) => {
const data = {
...c.data,
parent: c.id,
content,
};

postAppDataAsync({
data,
type: AppDataTypes.UserComment,
})?.then((parent) => {
// when in a chatbot thread, should also post to the api
if (commentThread[0]?.type === AppDataTypes.BotComment) {
const chatbotThread: ChatbotThreadMessage[] =
commentThread.map((botThread) => ({
botDataType: AppDataTypes.BotComment,
msgType: botThread.type,
data: botThread.data.content,
}));

const prompt = buildPrompt(
chatbotPrompt?.data.chatbotCue,
chatbotThread,
content,
);

const newData = {
...data,
parent: parent?.id,
content: 'error',
};

postChatbot(prompt)
.then((chatBotRes) => {
newData.content = chatBotRes.completion;
})
.finally(() => {
postAppDataAsync({
data: newData,
type: AppDataTypes.BotComment,
});
postAction({
data: newData,
type: AppActionsType.Create,
});
});

postAction({
data: { prompt },
type: AppActionsType.AskChatbot,
});
}
});
postAction({
data,
type: AppActionsType.Reply,
});
setReplyingId(null);
}}
comment={{ ...c, data: { ...c.data, content: '' } }}
/>
)
}
</Fragment>
);
})}
)
}
</Fragment>
))}
</CommentContainer>
);
};
Expand Down
4 changes: 2 additions & 2 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2575,7 +2575,7 @@ __metadata:

"@graasp/apps-query-client@github:graasp/graasp-apps-query-client#222-query-setting-by-name":
version: 3.3.0
resolution: "@graasp/apps-query-client@https://github.com/graasp/graasp-apps-query-client.git#commit=7db50113ae86fcadd173ffb84cbad3cdb89b4b2c"
resolution: "@graasp/apps-query-client@https://github.com/graasp/graasp-apps-query-client.git#commit=fa6b1e3942f40d6628a1c8de1bdb31233ab9fa3c"
dependencies:
"@emotion/react": "npm:11.11.1"
"@emotion/styled": "npm:11.11.0"
Expand All @@ -2593,7 +2593,7 @@ __metadata:
"@tanstack/react-query-devtools": ^4.28.0
react: ^18.0.0
react-dom: ^18.0.0
checksum: 018dc132d25f14d21ae22fc8d7cf0ae07cc325c7d1533c28c7427714e9cd8272551981081f700ba062ac13f36218ea593113af2f8f2ea7999c5366fb6dec5a19
checksum: 49ca109494f112c106bd48a34f76d878087905cf06c63b180fac2996d2b8b870c6d0f9de926fd553b92b9347037de0bb67b62e62b3668424c6741d7b5e1abdf4
languageName: node
linkType: hard

Expand Down

0 comments on commit ebd099b

Please sign in to comment.