Frontend API
App() ⇒ JSX.Element
App component renders the landing page for the Bioinformatics RAG Chatbot.
The layout is divided into two main sections:
- Left Side: Displays the application title, a button to begin a new chat (which navigates to the chat page), a product description, and an authors section.
- Right Side: Displays an image related to the application.
The component uses a flex layout to ensure responsive design and proper alignment of elements.
Kind: global function
Returns: JSX.Element - The rendered landing page component.
Component:
main.jsx
This is the entry point for the React application. It initializes the React DOM rendering, sets up the routing using BrowserRouter, and defines the application routes including the main App component, the Chat page, and a fallback 404 page.
Component
ChatBox
This file exports the ChatBox component which renders a chat input form.
- [ChatBox
This file exports the ChatBox component which renders a chat input form.](#ChatBox
This file exports the ChatBox component which renders a chat input form.module_)
- [module.exports(props)](#exp_ChatBox
This file exports the ChatBox component which renders a chat input form.module_--module.exports) ⇒
JSX.Element⏏- [~ChatBox.propTypes](#ChatBox This file exports the ChatBox component which renders a chat input form.module_--module.exports..ChatBox.propTypes)
- [module.exports(props)](#exp_ChatBox
This file exports the ChatBox component which renders a chat input form.module_--module.exports) ⇒
module.exports(props) ⇒ JSX.Element ⏏
ChatBox component renders a chat input form with an input field and submit button.
This component is used to capture the user's chat input and submit it via the provided event handlers. The form is designed to update the input value on change and call the submit handler when the form is submitted.
Kind: Exported function
Returns: JSX.Element - The rendered chat input form.
Component:
| Param | Type | Description |
|---|---|---|
| props | object | The component props. |
| props.input | string | The current text input. |
| props.setInput | function | Callback to update the input value. |
| props.handleSubmit | function | Callback to handle the form submission. |
module.exports~ChatBox.propTypes
PropTypes for the ChatBox component.
Kind: inner property of [module.exports](#exp_ChatBox
This file exports the ChatBox component which renders a chat input form.module_--module.exports)
Properties
| Name | Type | Description |
|---|---|---|
| input | string | The current input value. |
| setInput | function | Callback to update the input value. |
| handleSubmit | function | Callback to handle form submission. |
ErrorBox
This file exports the ErrorBox component which displays an error message alert.
- [ErrorBox
This file exports the ErrorBox component which displays an error message alert.](#ErrorBox
This file exports the ErrorBox component which displays an error message alert.module_)
- [module.exports(props)](#exp_ErrorBox
This file exports the ErrorBox component which displays an error message alert.module_--module.exports) ⇒
JSX.Element⏏- [~ErrorBox.propTypes](#ErrorBox This file exports the ErrorBox component which displays an error message alert.module_--module.exports..ErrorBox.propTypes)
- [module.exports(props)](#exp_ErrorBox
This file exports the ErrorBox component which displays an error message alert.module_--module.exports) ⇒
module.exports(props) ⇒ JSX.Element ⏏
ErrorBox component displays an error message with a title and a body.
This component renders a fixed alert box at the top of the page that provides feedback about an error. It includes a button that allows the user to dismiss the error message by resetting the error state.
Kind: Exported function
Returns: JSX.Element - The rendered error alert box.
Component:
| Param | Type | Description |
|---|---|---|
| props | object | The component props. |
| props.title | string | The title of the error message. |
| props.body | string | The detailed error message. |
| props.setError | function | Callback function to reset the error state. |
module.exports~ErrorBox.propTypes
PropTypes for the ErrorBox component.
Kind: inner property of [module.exports](#exp_ErrorBox
This file exports the ErrorBox component which displays an error message alert.module_--module.exports)
Properties
| Name | Type | Description |
|---|---|---|
| title | string | The title of the error message. |
| body | string | The detailed error message. |
| setError | function | Callback to reset the error state. |
ResponseBubble
This file exports the ResponseBubble component which displays a text message in a styled bubble.
- [ResponseBubble
This file exports the ResponseBubble component which displays a text message in a styled bubble.](#ResponseBubble
This file exports the ResponseBubble component which displays a text message in a styled bubble.module_)
- [module.exports(props)](#exp_ResponseBubble
This file exports the ResponseBubble component which displays a text message in a styled bubble.module_--module.exports) ⇒
JSX.Element⏏- [~ResponseBubble.propTypes](#ResponseBubble This file exports the ResponseBubble component which displays a text message in a styled bubble.module_--module.exports..ResponseBubble.propTypes)
- [module.exports(props)](#exp_ResponseBubble
This file exports the ResponseBubble component which displays a text message in a styled bubble.module_--module.exports) ⇒
module.exports(props) ⇒ JSX.Element ⏏
ResponseBubble component renders a styled bubble displaying a text message.
Kind: Exported function
Returns: JSX.Element - The rendered response bubble element.
Component:
| Param | Type | Description |
|---|---|---|
| props | object | The component props. |
| props.text | string | The text message to display. |
module.exports~ResponseBubble.propTypes
PropTypes for the ResponseBubble component.
Kind: inner property of [module.exports](#exp_ResponseBubble
This file exports the ResponseBubble component which displays a text message in a styled bubble.module_--module.exports)
Properties
| Name | Type | Description |
|---|---|---|
| text | string | The text message to display in the response bubble. |
UserBubble
This file exports the UserBubble component which renders a user message bubble along with an edit button.
- [UserBubble
This file exports the UserBubble component which renders a user message bubble along with an edit button.](#UserBubble
This file exports the UserBubble component which renders a user message bubble along with an edit button.module_)
- [module.exports(props)](#exp_UserBubble
This file exports the UserBubble component which renders a user message bubble along with an edit button.module_--module.exports) ⇒
JSX.Element⏏- [~UserBubble.propTypes](#UserBubble This file exports the UserBubble component which renders a user message bubble along with an edit button.module_--module.exports..UserBubble.propTypes)
- [module.exports(props)](#exp_UserBubble
This file exports the UserBubble component which renders a user message bubble along with an edit button.module_--module.exports) ⇒
module.exports(props) ⇒ JSX.Element ⏏
UserBubble component renders a chat bubble for user messages with an edit option.
This component displays the user's message in a styled bubble and provides an edit button.
When the edit button is clicked, the onEdit callback is triggered.
Kind: Exported function
Returns: JSX.Element - The rendered user message bubble.
Component:
| Param | Type | Description |
|---|---|---|
| props | object | The component props. |
| props.text | string | The message text to display. |
| props.onEdit | function | Callback function to be called when the edit button is clicked. |
module.exports~UserBubble.propTypes
PropTypes for the UserBubble component.
Kind: inner property of [module.exports](#exp_UserBubble
This file exports the UserBubble component which renders a user message bubble along with an edit button.module_--module.exports)
Properties
| Name | Type | Description |
|---|---|---|
| text | string | The user message to display. |
| onEdit | function | Callback function to handle edits, which typically populates the input chat box. |
Pages
Chat() ⇒ JSX.Element
Chat component renders a chat interface with messaging capabilities.
Kind: global function
Returns: JSX.Element - The rendered Chat component.
Component:
- Chat() ⇒
JSX.Element
Chat~messagesEndRef
Ref to the bottom of the messages list for auto-scrolling.
Kind: inner constant of Chat
Chat~handleEdit(index)
Function to handle clicking the edit button.
Kind: inner method of Chat
| Param | Type | Description |
|---|---|---|
| index | number | The index of the message to edit. |
Chat~handleSubmit(e)
Handle form submission for adding new messages.
Kind: inner method of Chat
| Param | Type | Description |
|---|---|---|
| e | Event | The event object. |
Chat~download()
Download the chat conversation as a .txt file.
Kind: inner method of Chat
download~conversation
Converts the array from the session storage into a string.
Kind: inner constant of download
download~txtfile
Creates a file object.
Kind: inner constant of download
download~element
Anchor for the link for downloading.
Kind: inner constant of download
element.href
Creates a URL so that the computer starts the download of the file when clicked.
Kind: static property of element
element.download
Name of the file.
Kind: static property of element
404
module.exports() ⇒ JSX.Element ⏏
A functional component that renders a 404 "Page Not Found" error page.
This component displays a 404 error code along with a message and a button that navigates the user back to the home page.
Kind: Exported function
Returns: JSX.Element - The rendered 404 page.
Component: