From ebd099b1ce6af1cce377b50aa6f3c365f02dbf7e Mon Sep 17 00:00:00 2001 From: spaenleh Date: Tue, 19 Dec 2023 15:17:58 +0100 Subject: [PATCH] fix: use resizing version and add nullable operator --- index.html | 6 +- src/config/layout.ts | 11 -- src/modules/Root.tsx | 4 +- src/modules/common/CommentThread.tsx | 223 +++++++++++++-------------- yarn.lock | 4 +- 5 files changed, 117 insertions(+), 131 deletions(-) delete mode 100644 src/config/layout.ts diff --git a/index.html b/index.html index d66a2ad..be81027 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,10 @@ - + - Graasp App Template + Graasp Chatbot App
diff --git a/src/config/layout.ts b/src/config/layout.ts deleted file mode 100644 index f5ff46e..0000000 --- a/src/config/layout.ts +++ /dev/null @@ -1,11 +0,0 @@ -export enum AppView { - LoadingView, - CodeReview, - CodeEditor, - CodeExecution, - DiffView, -} - -export const SMALL_BORDER_RADIUS = '4px'; -export const BIG_BORDER_RADIUS = '8px'; -export const MAX_REPL_HEIGHT = '60vh'; diff --git a/src/modules/Root.tsx b/src/modules/Root.tsx index 84bdb4b..cea8ba5 100644 --- a/src/modules/Root.tsx +++ b/src/modules/Root.tsx @@ -84,7 +84,7 @@ const Root: FC = () => { Loading Context} + LoadingComponent={Context} useGetLocalContext={hooks.useGetLocalContext} useAutoResize={hooks.useAutoResize} onError={() => { @@ -94,7 +94,7 @@ const Root: FC = () => { }} > Loading token} + LoadingComponent={Token} useAuthToken={hooks.useAuthToken} onError={() => { console.error( diff --git a/src/modules/common/CommentThread.tsx b/src/modules/common/CommentThread.tsx index 6ec9918..6995d28 100644 --- a/src/modules/common/CommentThread.tsx +++ b/src/modules/common/CommentThread.tsx @@ -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'; @@ -29,7 +29,7 @@ type Props = { children?: CommentAppData[]; }; -const CommentThread: FC = ({ children }) => { +const CommentThread = ({ children }: Props): JSX.Element | null => { const { t } = useTranslation(); const [replyingId, setReplyingId] = useState(null); const [editingId, setEditingId] = useState(null); @@ -46,7 +46,7 @@ const CommentThread: FC = ({ children }) => { const chatbotPrompt = chatbotPrompts?.[0]; const { maxThreadLength, maxCommentLength } = { ...DEFAULT_GENERAL_SETTINGS, - ...generalSettings?.[0].data, + ...generalSettings?.[0]?.data, }; const allowedChatbotResponse = ( @@ -62,6 +62,7 @@ const CommentThread: FC = ({ children }) => { const addResponse = (id: string): void => { setReplyingId(id); }; + const botComment = children?.find( (c) => c.data.chatbotPromptSettingId === chatbotPrompt?.id, ); @@ -70,127 +71,123 @@ const CommentThread: FC = ({ 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 ( - {commentThread.map((c, i, arr) => { - console.debug(c.id, isEdited(c.id)); - return ( - - {isEdited(c.id) ? ( + {commentThread.map((c, i, arr) => ( + + {isEdited(c.id) ? ( + { + setEditingId(null); + }} + onSend={(content) => { + patchData({ + id: c.id, + data: { + ...c.data, + content, + }, + }); + setEditingId(null); + }} + comment={c} + /> + ) : ( + 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) && ( + + ) + } + {i + 1 === arr.length && isLoading && ( + + + {t('Loading')} + + + + )} + { + // if input bar was clicked, a comment editor opens to compose a response + isReplied(c.id) && ( { - 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: '' } }} /> - ) : ( - 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) && ( - - ) - } - {i + 1 === arr.length && isLoading && ( - - - {t('Loading')} - - - - )} - { - // if input bar was clicked, a comment editor opens to compose a response - isReplied(c.id) && ( - 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: '' } }} - /> - ) - } - - ); - })} + ) + } + + ))} ); }; diff --git a/yarn.lock b/yarn.lock index 57125f0..4de00fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" @@ -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