Feature/f 146 integrate chatbot reports chatting #117
Conversation
✅ Deploy Preview for wfp-hungermap ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…-hunger-map into feature/f-146-integrate-chatbot-reports-chatting
…-hunger-map into feature/f-146-integrate-chatbot-reports-chatting
There was a problem hiding this comment.
Overall valuable improvements, thanks for thinking about the context and local storage! Also one more thing I noticed, on mobile the chatbot icon in the Topbar is displayed over the theme toggle, I think it would be nice to actually put the theme toggle in the mobile bar for smaller screens. Could you do that as well?
src/components/Chatbot/Chatbot.tsx
Outdated
| )} | ||
| style={{ | ||
| wordWrap: 'break-word', | ||
| overflowWrap: 'break-word', | ||
| whiteSpace: 'normal', | ||
| }} |
There was a problem hiding this comment.
use className from tailwind, we do not use the style prop
| @@ -33,6 +34,7 @@ export default function CountryReports({ countryCodesData }: CountryReportsProps | |||
| data={DownloadPortalOperations.formatTableData( | |||
| filteredData, | |||
| setSelectedCountry, | |||
| useChatbot().chatWithReport, | |||
There was a problem hiding this comment.
Extract this into const
const chatBot = useChatbot()
const { chatWithReport } = chatbot| setCurrentChatIndex: React.Dispatch<React.SetStateAction<number>>; | ||
| openChat: (chatIndex: number) => void; | ||
| startNewChat: (newChat?: IChat) => void; | ||
| chatWithReport: (countryName: string, report: string) => Promise<void>; |
There was a problem hiding this comment.
chatWithReport is a little bit weird naming. Can it be more precise? At least I don't understand what it is about
src/operations/chatbot/Chatbot.ts
Outdated
| return [ | ||
| { | ||
| id: 1, | ||
| title: 'Chat 1', | ||
| messages: [], | ||
| isTyping: false, | ||
| timestamp: Date.now(), | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
code duplication with the thing above
| return [ | ||
| { | ||
| id: 1, | ||
| title: 'Chat 1', | ||
| messages: [], | ||
| isTyping: false, | ||
| timestamp: Date.now(), | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
code duplication with the thing above
src/operations/chatbot/Chatbot.ts
Outdated
| if (typeof window !== 'undefined') { | ||
| const chatsWithTimestamp = chats.map((chat) => ({ | ||
| ...chat, | ||
| timestamp: chat.timestamp || Date.now(), | ||
| })); | ||
|
|
||
| localStorage.setItem('chatbotChatsWithTimestamp', JSON.stringify(chatsWithTimestamp)); | ||
| } | ||
| } |
There was a problem hiding this comment.
Maybe add error handling if window is undefined with the Snackbar
| } catch (error) { | ||
| throw new Error(`Error extracting text from PDF: ${error}`); | ||
| } |
There was a problem hiding this comment.
Better Error Handling with the Snackbar is required
marinovl7
deleted the
feature/f-146-integrate-chatbot-reports-chatting
branch
Implement Report Chat Functionality and According Chatbot Accessibility
Changes Introduced:
Chat with Reports in DownloadPortal
Global Chatbot Access
I also explored alternative methods for extracting additional PDF information, including OCR and OpenAI Assistant, text extraction approach seems to be effective and sufficient for our case
Edit: Chatbot was removed from the Topbar component itself and was placed into the layout files of the pages. The visual positioning still is the same. This allows easier usage of the Topbar without the Chatbot for example in the error page later on.