-
-
Notifications
You must be signed in to change notification settings - Fork 5.4k
Add down arrow to scroll user to bottom of page #400
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
…lways scroll to very bottom on message history change
frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsxInstead of using alerts to display errors, consider using a more user-friendly approach such as a notification system or a dedicated error display component. This will improve the user experience and make the application more robust. if (error) {
// Replace this
alert(`Failed to set password: ${error}`, "error");
// With something like this
displayError(`Failed to set password: ${error}`);
return;
}frontend/src/components/Modals/NewWorkspace.jsxConsider using destructuring to extract the values from the form data. This will make the code cleaner and easier to read. // Replace this
const data = {};
const form = new FormData(formEl.current);
for (var [key, value] of form.entries()) data[key] = value;
// With something like this
const form = new FormData(formEl.current);
const data = Object.fromEntries(form);frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsxConsider using destructuring to extract the values from the form data. This will make the code cleaner and easier to read. // Replace this
const data = {};
const formData = new FormData(form);
for (var [key, value] of formData.entries()) data[key] = value;
// With something like this
const formData = new FormData(form);
const data = Object.fromEntries(formData);frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsxConsider using destructuring to extract the values from the form data. This will make the code cleaner and easier to read. // Replace this
const data = {
username: formData.get("username"),
password: formData.get("password"),
};
// With something like this
const data = Object.fromEntries(formData);frontend/src/pages/OnboardingFlow/index.jsxConsider using the const showModal = useCallback(() => {
setModalVisible(true);
}, []);frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsxConsider using the const _initLogo = useMemo(() => useLogo(), []);frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsxConsider using the const currentStep = useMemo(() => props.currentStep, []);frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsxConsider using the const currentStep = useMemo(() => props.currentStep, []);frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsxConsider using the const history = useMemo(() => props.history, []);frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsxInstead of using the alert function to display the error message, consider using a more user-friendly way to display the error message. This could be a modal or a toast notification. This will improve the user experience and make the error message more noticeable. if (error) {
// Replace the alert function with a more user-friendly way to display the error message
displayError(`Failed to save settings: ${error}`);
return;
}The useEffect hook is currently fetching the system keys every time the currentStep changes. If the system keys do not change frequently, consider fetching them once when the component mounts. This will reduce the number of network requests and improve the performance of the component. useEffect(() => {
async function fetchKeys() {
const _settings = await System.keys();
setSettings(_settings);
setVectorDB(_settings?.VectorDB || "lancedb");
setLoading(false);
}
// Fetch the system keys once when the component mounts
if (currentStep === "vector_database" && !settings) {
fetchKeys();
}
}, [currentStep, settings]); |
| const form = new FormData(formEl.current); | ||
| for (var [key, value] of form.entries()) data[key] = value; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The code is modified to use destructuring to extract the values from the form data. This makes the code cleaner and easier to read.
| const form = new FormData(formEl.current); | |
| for (var [key, value] of form.entries()) data[key] = value; | |
| const form = new FormData(formEl.current); | |
| const data = Object.fromEntries(form.entries()); |
| function showModal() { | ||
| document?.getElementById(OnboardingModalId)?.showModal(); | ||
| setModalVisible(true); | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The showModal function is refactored to use the useCallback hook. This will prevent unnecessary re-renders by ensuring that the function is only re-created when one of its dependencies changes.
| function showModal() { | |
| document?.getElementById(OnboardingModalId)?.showModal(); | |
| setModalVisible(true); | |
| } | |
| const showModal = useCallback(() => { | |
| setModalVisible(true); | |
| }, []); |
| import { useEffect, useRef, useState } from "react"; | ||
| import { useManageWorkspaceModal } from "../../../Modals/MangeWorkspace"; | ||
| import ManageWorkspace from "../../../Modals/MangeWorkspace"; | ||
| import { ArrowDown } from "@phosphor-icons/react"; | ||
| import debounce from "lodash.debounce"; | ||
|
|
||
| export default function ChatHistory({ history = [], workspace }) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The useMemo hook is used to memoize the computation of the history prop. This ensures that the computation is only re-run when one of its dependencies changes, thus preventing unnecessary re-renders.
| import { useEffect, useRef, useState } from "react"; | |
| import { useManageWorkspaceModal } from "../../../Modals/MangeWorkspace"; | |
| import ManageWorkspace from "../../../Modals/MangeWorkspace"; | |
| import { ArrowDown } from "@phosphor-icons/react"; | |
| import debounce from "lodash.debounce"; | |
| export default function ChatHistory({ history = [], workspace }) { | |
| import { useEffect, useRef, useState, useMemo } from "react"; | |
| export default function ChatHistory({ history = [], workspace }) { | |
| const history = useMemo(() => props.history, []); | |
| // rest of the code... |
|
@shatfield4 Can you fix merge conflicts and split the arrow show function from the PFP stuff? Too much going on to parse for just PFP support and the arrow and I know I'm going to miss something here |
timothycarambat
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
see comment
…96-modal-sizes-too-big-in-onboarding-flow
4a79c7b to
67f97e1
Compare
…om:Mintplex-Labs/anything-llm into 396-modal-sizes-too-big-in-onboarding-flow
* fix sizing of onboarding modals & lint * fix extra scrolling on mobile onboarding flow * added message to use desktop for onboarding * linting * add arrow to scroll to bottom (debounced) and fix chat scrolling to always scroll to very bottom on message history change * fix for empty chat * change mobile alert copy * fix div with bullet points to use list-disc instead --------- Co-authored-by: timothycarambat <rambat1010@gmail.com>
Create down arrow that appears when chat is not scrolled to the bottom