mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-08-16 18:00:23 +03:00
Merge branch 'main' into fix/phoneDisplayedIssues
This commit is contained in:
Antoine Dewez
GitHub
commit
a145c5597f
12
CHANGELOG.md
12
CHANGELOG.md
@ -1,5 +1,17 @@
|
||||
# Changelog
|
||||
|
||||
## 0.0.227 (2024-03-28)
|
||||
|
||||
## What's Changed
|
||||
* fix(backend): invitation with new brains did not work by @Zewed in https://github.com/QuivrHQ/quivr/pull/2378
|
||||
* fix(backend): invitation brain bugs by @Zewed in https://github.com/QuivrHQ/quivr/pull/2380
|
||||
* fix(frontend): disable knowledge tab by @Zewed in https://github.com/QuivrHQ/quivr/pull/2381
|
||||
* fix(frontend): dark mode issues by @Zewed in https://github.com/QuivrHQ/quivr/pull/2382
|
||||
* feat(frontend): show icons only on hover except for last message by @Zewed in https://github.com/QuivrHQ/quivr/pull/2377
|
||||
|
||||
|
||||
**Full Changelog**: https://github.com/QuivrHQ/quivr/compare/v0.0.226...v0.0.227
|
||||
|
||||
## 0.0.226 (2024-03-21)
|
||||
|
||||
## What's Changed
|
||||
|
||||
@ -1,30 +1,26 @@
|
||||
import { Fragment } from "react";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Controller } from "react-hook-form";
|
||||
|
||||
import Field from "@/lib/components/ui/Field";
|
||||
import { emailPattern } from "@/lib/config/patterns";
|
||||
import { TextInput } from "@/lib/components/ui/TextInput/TextInput";
|
||||
import { useAuthModes } from "@/lib/hooks/useAuthModes";
|
||||
|
||||
import { EmailAuthContextType } from "../../../types";
|
||||
|
||||
export const EmailInput = (): JSX.Element => {
|
||||
const { register } = useFormContext<EmailAuthContextType>();
|
||||
const { t } = useTranslation();
|
||||
const { password, magicLink } = useAuthModes();
|
||||
if (!password && !magicLink) {
|
||||
return <Fragment />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Field
|
||||
{...register("email", {
|
||||
required: true,
|
||||
pattern: emailPattern,
|
||||
})}
|
||||
placeholder={t("email", { ns: "login" })}
|
||||
label={t("email", { ns: "translation" })}
|
||||
inputClassName="py-1 mt-1 mb-3"
|
||||
<Controller
|
||||
name="email"
|
||||
defaultValue=""
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
label="Email"
|
||||
inputValue={field.value as string}
|
||||
setInputValue={field.onChange}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { Fragment } from "react";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { EmailAuthContextType } from "@/app/(auth)/login/types";
|
||||
import Button from "@/lib/components/ui/Button";
|
||||
import Field from "@/lib/components/ui/Field";
|
||||
import { TextInput } from "@/lib/components/ui/TextInput/TextInput";
|
||||
import { useAuthModes } from "@/lib/hooks/useAuthModes";
|
||||
|
||||
import { usePasswordLogin } from "./hooks/usePasswordLogin";
|
||||
@ -13,7 +13,7 @@ export const PasswordLogin = (): JSX.Element => {
|
||||
const { t } = useTranslation(["login"]);
|
||||
const { password } = useAuthModes();
|
||||
const { handlePasswordLogin } = usePasswordLogin();
|
||||
const { register, watch } = useFormContext<EmailAuthContextType>();
|
||||
const { watch } = useFormContext<EmailAuthContextType>();
|
||||
|
||||
if (!password) {
|
||||
return <Fragment />;
|
||||
@ -21,17 +21,22 @@ export const PasswordLogin = (): JSX.Element => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Field
|
||||
{...register("password", { required: true })}
|
||||
placeholder={t("password", { ns: "login" })}
|
||||
label={t("password", { ns: "login" })}
|
||||
inputClassName="py-1 mt-1 mb-3"
|
||||
type="password"
|
||||
<Controller
|
||||
name="password"
|
||||
defaultValue=""
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
label="Password"
|
||||
inputValue={field.value as string}
|
||||
setInputValue={field.onChange}
|
||||
crypted={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
isLoading={watch("isPasswordSubmitting")}
|
||||
variant="secondary"
|
||||
className="py-2 font-normal w-full mb-1"
|
||||
className="py-2 font-normal w-full mb-1 mt-2"
|
||||
onClick={() => void handlePasswordLogin()}
|
||||
>
|
||||
{t("login")}
|
||||
|
||||
46
frontend/app/(auth)/login/page.module.scss
Normal file
46
frontend/app/(auth)/login/page.module.scss
Normal file
@ -0,0 +1,46 @@
|
||||
@use "@/styles/Spacings.module.scss";
|
||||
@use "@/styles/Typography.module.scss";
|
||||
|
||||
.login_page_wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.section {
|
||||
max-width: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: Spacings.$spacing03;
|
||||
|
||||
.logo_link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include Typography.Big;
|
||||
text-align: center;
|
||||
|
||||
.primary_text {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.form_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: Spacings.$spacing03;
|
||||
}
|
||||
|
||||
.divider {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.restriction_message {
|
||||
text-align: center;
|
||||
font-size: Typography.$tiny;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -5,17 +5,19 @@ import { FormProvider, useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { QuivrLogo } from "@/lib/assets/QuivrLogo";
|
||||
import { Divider } from "@/lib/components/ui/Divider";
|
||||
import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
|
||||
import { useAuthModes } from "@/lib/hooks/useAuthModes";
|
||||
|
||||
import { EmailLogin } from "./components/EmailLogin";
|
||||
import { GoogleLoginButton } from "./components/GoogleLogin";
|
||||
import { useLogin } from "./hooks/useLogin";
|
||||
import styles from "./page.module.scss";
|
||||
import { EmailAuthContextType } from "./types";
|
||||
|
||||
const Main = (): JSX.Element => {
|
||||
useLogin();
|
||||
const { googleSso, password, magicLink } = useAuthModes();
|
||||
const { googleSso } = useAuthModes();
|
||||
const { isDarkMode } = useUserSettingsContext();
|
||||
|
||||
const methods = useForm<EmailAuthContextType>({
|
||||
defaultValues: {
|
||||
@ -26,30 +28,26 @@ const Main = (): JSX.Element => {
|
||||
const { t } = useTranslation(["translation", "login"]);
|
||||
|
||||
return (
|
||||
<div className="w-screen h-screen bg-ivory" data-testid="sign-in-card">
|
||||
<main className="h-full flex flex-col items-center justify-center">
|
||||
<section className="w-full md:w-1/2 lg:w-1/3 flex flex-col gap-2">
|
||||
<Link href="/" className="flex justify-center">
|
||||
<QuivrLogo size={80} color="black" />
|
||||
</Link>
|
||||
<p className="text-center text-4xl font-medium">
|
||||
{t("talk_to", { ns: "login" })}{" "}
|
||||
<span className="text-primary">Quivr</span>
|
||||
</p>
|
||||
<div className="mt-5 flex flex-col">
|
||||
<FormProvider {...methods}>
|
||||
<EmailLogin />
|
||||
</FormProvider>
|
||||
{googleSso && (password || magicLink) && (
|
||||
<Divider text={t("or")} className="my-3 uppercase" />
|
||||
)}
|
||||
{googleSso && <GoogleLoginButton />}
|
||||
</div>
|
||||
<p className="text-[10px] text-center">
|
||||
{t("restriction_message", { ns: "login" })}
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
<div className={styles.login_page_wrapper}>
|
||||
<section className={styles.section}>
|
||||
<Link href="/" className={styles.logo_link}>
|
||||
<QuivrLogo size={80} color={isDarkMode ? "white" : "black"} />
|
||||
</Link>
|
||||
<p className={styles.title}>
|
||||
{t("talk_to", { ns: "login" })}{" "}
|
||||
<span className={styles.primary_text}>Quivr</span>
|
||||
</p>
|
||||
<div className={styles.form_container}>
|
||||
<FormProvider {...methods}>
|
||||
<EmailLogin />
|
||||
</FormProvider>
|
||||
|
||||
{googleSso && <GoogleLoginButton />}
|
||||
</div>
|
||||
<p className={styles.restriction_message}>
|
||||
{t("restriction_message", { ns: "login" })}
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,60 +1,13 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { Suspense } from "react";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { QuivrLogo } from "@/lib/assets/QuivrLogo";
|
||||
import { Divider } from "@/lib/components/ui/Divider";
|
||||
import { useAuthModes } from "@/lib/hooks/useAuthModes";
|
||||
|
||||
import { EmailLogin } from "../(auth)/login/components/EmailLogin";
|
||||
import { GoogleLoginButton } from "../(auth)/login/components/GoogleLogin";
|
||||
import { useLogin } from "../(auth)/login/hooks/useLogin";
|
||||
import { EmailAuthContextType } from "../(auth)/login/types";
|
||||
import Login from "../(auth)/login/page";
|
||||
|
||||
const Main = (): JSX.Element => {
|
||||
useLogin();
|
||||
const { googleSso, password, magicLink } = useAuthModes();
|
||||
|
||||
const methods = useForm<EmailAuthContextType>({
|
||||
defaultValues: {
|
||||
email: "",
|
||||
password: "",
|
||||
},
|
||||
});
|
||||
const { t } = useTranslation(["translation", "login"]);
|
||||
|
||||
return (
|
||||
<div className="w-screen h-screen bg-ivory" data-testid="sign-in-card">
|
||||
<main className="h-full flex flex-col items-center justify-center">
|
||||
<section className="w-full md:w-1/2 lg:w-1/3 flex flex-col gap-2">
|
||||
<Link href="/" className="flex justify-center">
|
||||
<QuivrLogo size={80} color="black" />
|
||||
</Link>
|
||||
<p className="text-center text-4xl font-medium">
|
||||
{t("talk_to", { ns: "login" })}{" "}
|
||||
<span className="text-primary">Quivr</span>
|
||||
</p>
|
||||
<div className="mt-5 flex flex-col">
|
||||
<FormProvider {...methods}>
|
||||
<EmailLogin />
|
||||
</FormProvider>
|
||||
{googleSso && (password || magicLink) && (
|
||||
<Divider text={t("or")} className="my-3 uppercase" />
|
||||
)}
|
||||
{googleSso && <GoogleLoginButton />}
|
||||
</div>
|
||||
<p className="text-[10px] text-center">
|
||||
{t("restriction_message", { ns: "login" })}
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
return <Login />;
|
||||
};
|
||||
|
||||
const Login = (): JSX.Element => {
|
||||
const Home = (): JSX.Element => {
|
||||
return (
|
||||
<Suspense fallback="Loading...">
|
||||
<Main />
|
||||
@ -62,4 +15,4 @@ const Login = (): JSX.Element => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
export default Home;
|
||||
|
||||
@ -1,14 +1,26 @@
|
||||
import { ChatNotification } from "./ChatNotification/ChatNotification";
|
||||
import { QADisplay } from "./QADisplay";
|
||||
|
||||
import { ChatItemWithGroupedNotifications } from "../../../../types";
|
||||
import { ChatNotification } from "../ChatNotification/ChatNotification";
|
||||
import { QADisplay } from "../QADisplay";
|
||||
|
||||
type ChatItemProps = {
|
||||
content: ChatItemWithGroupedNotifications;
|
||||
index: number;
|
||||
lastMessage?: boolean;
|
||||
};
|
||||
export const ChatItem = ({ content, index }: ChatItemProps): JSX.Element => {
|
||||
export const ChatItem = ({
|
||||
content,
|
||||
index,
|
||||
lastMessage,
|
||||
}: ChatItemProps): JSX.Element => {
|
||||
if (content.item_type === "MESSAGE") {
|
||||
return <QADisplay content={content.body} index={index} />;
|
||||
return (
|
||||
<QADisplay
|
||||
content={content.body}
|
||||
index={index}
|
||||
lastMessage={lastMessage}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <ChatNotification content={content.body} />;
|
||||
|
||||
@ -6,8 +6,13 @@ import "./styles.css";
|
||||
type QADisplayProps = {
|
||||
content: ChatMessage;
|
||||
index: number;
|
||||
lastMessage?: boolean;
|
||||
};
|
||||
export const QADisplay = ({ content, index }: QADisplayProps): JSX.Element => {
|
||||
export const QADisplay = ({
|
||||
content,
|
||||
index,
|
||||
lastMessage,
|
||||
}: QADisplayProps): JSX.Element => {
|
||||
const {
|
||||
assistant,
|
||||
message_id,
|
||||
@ -39,6 +44,7 @@ export const QADisplay = ({ content, index }: QADisplayProps): JSX.Element => {
|
||||
metadata={metadata} // eslint-disable-line @typescript-eslint/no-unsafe-assignment
|
||||
messageId={message_id}
|
||||
thumbs={thumbs}
|
||||
lastMessage={lastMessage}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
@ -51,6 +51,7 @@
|
||||
position: relative;
|
||||
|
||||
.icons_wrapper {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
gap: Spacings.$spacing03;
|
||||
@ -60,6 +61,18 @@
|
||||
.sources_icon_wrapper {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.sticky {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.message_row_content {
|
||||
.icons_wrapper {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -27,6 +27,7 @@ type MessageRowProps = {
|
||||
index?: number;
|
||||
messageId?: string;
|
||||
thumbs?: boolean;
|
||||
lastMessage?: boolean;
|
||||
};
|
||||
|
||||
export const MessageRow = React.forwardRef(
|
||||
@ -41,6 +42,7 @@ export const MessageRow = React.forwardRef(
|
||||
index,
|
||||
messageId,
|
||||
thumbs: initialThumbs,
|
||||
lastMessage,
|
||||
}: MessageRowProps,
|
||||
ref: React.Ref<HTMLDivElement>
|
||||
) => {
|
||||
@ -101,7 +103,11 @@ export const MessageRow = React.forwardRef(
|
||||
const renderIcons = () => {
|
||||
if (!isUserSpeaker && messageContent !== "🧠") {
|
||||
return (
|
||||
<div className={styles.icons_wrapper}>
|
||||
<div
|
||||
className={`${styles.icons_wrapper} ${
|
||||
lastMessage ? styles.sticky : ""
|
||||
}`}
|
||||
>
|
||||
<CopyButton handleCopy={handleCopy} size="normal" />
|
||||
{!isMobile && (
|
||||
<div className={styles.sources_icon_wrapper}>
|
||||
@ -1,81 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { RiDownloadLine } from "react-icons/ri";
|
||||
|
||||
import Button from "@/lib/components/ui/Button";
|
||||
import { useOnboardingTracker } from "@/lib/hooks/useOnboardingTracker";
|
||||
import { useStreamText } from "@/lib/hooks/useStreamText";
|
||||
|
||||
import { stepsContainerStyle } from "./styles";
|
||||
|
||||
import { MessageRow } from "../QADisplay";
|
||||
|
||||
export const Onboarding = (): JSX.Element => {
|
||||
const { t } = useTranslation(["chat"]);
|
||||
const title = t("onboarding.title");
|
||||
const step1 = t("onboarding.step_1_1");
|
||||
const step1Details = t("onboarding.step_1_2");
|
||||
const step2 = t("onboarding.step_2");
|
||||
const step3 = t("onboarding.step_3");
|
||||
|
||||
const { trackOnboardingEvent } = useOnboardingTracker();
|
||||
|
||||
const { streamingText: titleStream, isDone: isTitleDisplayed } =
|
||||
useStreamText({
|
||||
text: title,
|
||||
});
|
||||
const { streamingText: firstStepStream, isDone: isStep1Done } = useStreamText(
|
||||
{
|
||||
text: step1,
|
||||
enabled: isTitleDisplayed,
|
||||
}
|
||||
);
|
||||
const { streamingText: firstStepDetailsStream, isDone: isStep1DetailsDone } =
|
||||
useStreamText({
|
||||
text: step1Details,
|
||||
enabled: isStep1Done,
|
||||
});
|
||||
|
||||
const { streamingText: secondStepStream, isDone: isStep2Done } =
|
||||
useStreamText({
|
||||
text: step2,
|
||||
enabled: isStep1DetailsDone,
|
||||
});
|
||||
const { streamingText: thirdStepStream } = useStreamText({
|
||||
text: step3,
|
||||
enabled: isStep2Done,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 mb-3">
|
||||
<MessageRow speaker={"assistant"} brainName={"Quivr"}>
|
||||
<div className={stepsContainerStyle}>
|
||||
<p>{titleStream}</p>
|
||||
<div>
|
||||
<p>{firstStepStream}</p>
|
||||
<div>
|
||||
{firstStepDetailsStream}
|
||||
{isStep1DetailsDone && (
|
||||
<Link
|
||||
href="/documents/quivr_documentation.pdf"
|
||||
download
|
||||
target="_blank"
|
||||
referrerPolicy="no-referrer"
|
||||
onClick={() => {
|
||||
trackOnboardingEvent("QUIVR_DOCUMENTATION_DOWNLOADED");
|
||||
}}
|
||||
>
|
||||
<Button className="bg-black p-2 ml-2 rounded-full inline-flex">
|
||||
<RiDownloadLine />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p>{secondStepStream}</p>
|
||||
<p>{thirdStepStream}</p>
|
||||
</div>
|
||||
</MessageRow>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
export const stepsContainerStyle = "flex flex-col gap-2";
|
||||
@ -1,2 +1,2 @@
|
||||
export * from "./ChatItem";
|
||||
export * from "./QADisplay";
|
||||
export * from "./ChatItem/QADisplay";
|
||||
|
||||
@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
|
||||
import { useOnboarding } from "@/lib/hooks/useOnboarding";
|
||||
|
||||
import { ChatItem } from "./components";
|
||||
import { Onboarding } from "./components/Onboarding/Onboarding";
|
||||
import { useChatDialogue } from "./hooks/useChatDialogue";
|
||||
import {
|
||||
chatDialogueContainerClassName,
|
||||
@ -28,7 +27,6 @@ export const ChatDialogue = ({
|
||||
if (shouldDisplayOnboardingAInstructions) {
|
||||
return (
|
||||
<div className={chatDialogueContainerClassName} ref={chatListRef}>
|
||||
<Onboarding />
|
||||
<div className={chatItemContainerClassName}>
|
||||
{chatItems.map((chatItem, index) => (
|
||||
<ChatItem
|
||||
@ -58,6 +56,7 @@ export const ChatDialogue = ({
|
||||
key={getKeyFromChatItem(chatItem)}
|
||||
content={chatItem}
|
||||
index={index}
|
||||
lastMessage={index === chatItems.length - 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -44,8 +44,12 @@
|
||||
}
|
||||
|
||||
.brain_title {
|
||||
font-size: Typography.$medium;
|
||||
@include Typography.EllipsisOverflow;
|
||||
font-size: Typography.$small;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
font-size: Typography.$tiny;
|
||||
|
||||
&.primary {
|
||||
background-color: var(--primary-1);
|
||||
background-color: var(--background-special-1);
|
||||
}
|
||||
|
||||
&.gold {
|
||||
|
||||
@ -10,6 +10,7 @@ type TextInputProps = {
|
||||
simple?: boolean;
|
||||
onSubmit?: () => void;
|
||||
disabled?: boolean;
|
||||
crypted?: boolean;
|
||||
};
|
||||
|
||||
export const TextInput = ({
|
||||
@ -20,6 +21,7 @@ export const TextInput = ({
|
||||
simple,
|
||||
onSubmit,
|
||||
disabled,
|
||||
crypted,
|
||||
}: TextInputProps): JSX.Element => {
|
||||
return (
|
||||
<div
|
||||
@ -31,7 +33,7 @@ export const TextInput = ({
|
||||
>
|
||||
<input
|
||||
className={styles.text_input}
|
||||
type="text"
|
||||
type={crypted ? "password" : "text"}
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue?.(e.target.value)}
|
||||
placeholder={label}
|
||||
|
||||
@ -18,12 +18,10 @@ export const UserSettingsProvider = ({
|
||||
}): JSX.Element => {
|
||||
const [isDarkMode, setIsDarkMode] = useState<boolean>(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
const localIsDarkMode = localStorage.getItem("isDarkMode");
|
||||
|
||||
return parseBoolean(localIsDarkMode);
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user