-
{messages.map((message, index) => (
-
+
))}
{children}
{messages.length === 0 && (
<>
- {!!clientEnv.NEXT_PUBLIC_STRIPE_DONATION_ENABLED && (
-
-
- )}
+
+ )}
)}
@@ -114,7 +128,13 @@ const ChatWindow = ({
);
};
-const MacWindowHeader = () => {
+interface HeaderProps {
+ title?: string | ReactNode;
+ messages: Message[];
+ onSave?: (format: string) => void;
+}
+
+const MacWindowHeader = (props: HeaderProps) => {
const { t } = useTranslation(["chat", "common"]);
const saveElementAsImage = (elementId: string) => {
@@ -152,7 +172,7 @@ const MacWindowHeader = () => {
};
return (
-
+
@@ -162,26 +182,31 @@ const MacWindowHeader = () => {
-
-
-
+ props.onSave?.("db")}
+ icon={ saveElementAsImage(messageListId)}
+ icon={
-
+ copyElementText(messageListId)}
+ icon={
);
};
@@ -257,11 +282,10 @@ const ChatMessage = ({ message }: { message: Message }) => {
);
};
-const DonationMessage = ({ showWeChatPay }: { showWeChatPay: () => void }) => {
+const DonationMessage = ({ showWeChatPay }: { showWeChatPay?: () => void }) => {
const { t } = useTranslation(["chat", "common"]);
-
return (
-
saveElementAsImage(messageListId)}
- >
-
- {t("common:save")}
-
+ {props.title}
+
+ {props.onSave && (
+ copyElementText(messageListId)}
- >
-
- {t("common:copy")}
-
+
💝️ Help support the advancement of AutoGPT Next Web. 💝
Please @@ -308,11 +332,5 @@ const getMessagePrefix = (message: Message) => { } }; -export interface Message { - type: "goal" | "thinking" | "task" | "action" | "system"; - info?: string; - value: string; -} - export default ChatWindow; export { ChatMessage }; diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index 2a0ec227..aab9a371 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -16,49 +16,46 @@ export default function Dialog({ footerButton?: React.ReactNode; }) { const { t } = useTranslation(); + if (!isShown) { + return <>{null}; + } return ( - <> - {isShown ? ( - <> -
@@ -179,8 +205,9 @@ interface DrawerItemProps
icon: React.ReactNode;
text: string;
border?: boolean;
- onClick?: () => void;
+ onClick?: () => any;
className?: string;
+ small?: boolean;
}
const DrawerItem = (props: DrawerItemProps) => {
@@ -232,4 +259,40 @@ const AuthItem: React.FC<{
return 
+ );
+ }
+
+ return (
+ {
+ if (!session?.user) {
+ void (await signIn());
+ }
+
+ if (session?.user.subscriptionId) {
+ void manage();
+ } else {
+ void sub();
+ }
+ }}
+ />
+ );
+};
+
export default Drawer;
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index aa1b5990..105d4050 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -2,39 +2,53 @@ import React from "react";
import Label from "./Label";
import clsx from "clsx";
import Combobox from "./Combobox";
-import isArrayOfType from "../utils/helpers";
+import { isArrayOfType } from "../utils/helpers";
+import type { toolTipProperties } from "./types";
interface InputProps {
left?: React.ReactNode;
- value: string;
+ value: string | number;
onChange: (e: React.ChangeEvent) => void;
placeholder?: string;
disabled?: boolean;
setValue?: (value: string) => void;
type?: string;
attributes?: { [key: string]: string | number | string[] }; // attributes specific to input type
+ toolTipProperties?: toolTipProperties;
+ inputRef?: React.RefObject;
+ onKeyDown?: (e: React.KeyboardEvent) => void;
}
-const Input = ({
- placeholder,
- left,
- value,
- type,
- onChange,
- setValue,
- disabled,
- attributes,
-}: InputProps) => {
+const Input = (props: InputProps) => {
+ const {
+ placeholder,
+ left,
+ value,
+ type,
+ onChange,
+ setValue,
+ disabled,
+ attributes,
+ inputRef,
+ toolTipProperties,
+ onKeyDown,
+ } = props;
const isTypeCombobox = () => {
return type === "combobox";
};
+ const isTypeRange = () => {
+ return type === "range";
+ };
+
let inputElement;
const options = attributes?.options;
+
if (
isTypeCombobox() &&
isArrayOfType(options, "string") &&
- setValue !== undefined
+ setValue !== undefined &&
+ typeof value === "string"
) {
inputElement = (
Please @@ -308,11 +332,5 @@ const getMessagePrefix = (message: Message) => { } }; -export interface Message { - type: "goal" | "thinking" | "task" | "action" | "system"; - info?: string; - value: string; -} - export default ChatWindow; export { ChatMessage }; diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index 2a0ec227..aab9a371 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -16,49 +16,46 @@ export default function Dialog({ footerButton?: React.ReactNode; }) { const { t } = useTranslation(); + if (!isShown) { + return <>{null}; + } return ( - <> - {isShown ? ( - <> -
-
@@ -165,6 +182,15 @@ const Drawer = ({
text="language"
onClick={onToggleLanguageClick}
/>
+ {env.NEXT_PUBLIC_FF_SUB_ENABLED ||
+ (router.query.pro && (
+
- {/*content*/}
-
+ e.stopPropagation()} // Avoid closing the modal
- >
- {/*header*/}
-
-
-
- {/*body*/}
- {header}
- -
- {children}
-
- {/*footer*/}
-
-
- {footerButton}
-
-
+
);
}
diff --git a/src/components/DottedGridBackground.tsx b/src/components/DottedGridBackground.tsx
index c0ca6b70..659d8d1b 100644
--- a/src/components/DottedGridBackground.tsx
+++ b/src/components/DottedGridBackground.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import clsx from "clsx";
interface DottedGridBackgroundProps {
children: React.ReactNode;
@@ -9,12 +10,7 @@ const DottedGridBackground = ({
children,
className,
}: DottedGridBackgroundProps) => {
- return (
-
+ {/*content*/}
+
+ e.stopPropagation()} // Avoid closing the modal
+ >
+ {/*header*/}
+
+
+
-
- ) : null}
-
+ {/*body*/}
+ {header}
+
+ {children}
+
+ {/*footer*/}
+
+
+ {footerButton}
+
+
-
- {children}
-
- );
+ return {children}
;
};
export default DottedGridBackground;
diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
index f30013dc..f65c2fe7 100644
--- a/src/components/Drawer.tsx
+++ b/src/components/Drawer.tsx
@@ -6,6 +6,7 @@ import {
FaGithub,
FaQuestionCircle,
FaRobot,
+ FaRocket,
FaSignInAlt,
FaSignOutAlt,
FaTwitter,
@@ -22,6 +23,8 @@ import type { Session } from "next-auth";
import { env } from "../env/client.mjs";
import { useTranslation } from "next-i18next";
import { useRouter } from "next/router";
+import { api } from "../utils/api";
+import { signIn } from "next-auth/react";
const Drawer = ({
showHelp,
@@ -49,7 +52,24 @@ const Drawer = ({
// });
// const router = useRouter();
//
- const userAgents = [];
+
+ const sub = api.account.subscribe.useMutation({
+ onSuccess: async (url) => {
+ if (!url) return;
+ await router.push(url);
+ },
+ });
+
+ const query = api.agent.getAll.useQuery(undefined, {
+ enabled: !!session?.user,
+ });
+
+ const manage = api.account.manage.useMutation({
+ onSuccess: async (url) => {
+ if (!url) return;
+ await router.push(url);
+ },
+ });
const toggleDrawer = () => {
setShowDrawer((prevState) => !prevState);
@@ -61,6 +81,7 @@ const Drawer = ({
locale: locale === "en" ? "zh" : "en",
});
};
+ const userAgents = query.data ?? [];
return (
<>
@@ -82,13 +103,7 @@ const Drawer = ({
>
-
- {/*{TODO: enable for crud}*/}
- -
- {/* {userAgents.map((agent, index) => (*/}
- {/*
{t("restart-agent")}
}
+ -
+ {userAgents.map((agent, index) => (
+
{t("sign-in")}
}
+ {status === "authenticated" && userAgents.length === 0 && (
+ {t("create-agent")}
+ )}
- {left && }
+
+ {left && (
+
+ )}
{inputElement}
+ {isTypeRange() && (
+
);
};
diff --git a/src/components/KnowlegePlanetDialog.tsx b/src/components/KnowlegePlanetDialog.tsx
index 0dbbf83f..37f2489f 100644
--- a/src/components/KnowlegePlanetDialog.tsx
+++ b/src/components/KnowlegePlanetDialog.tsx
@@ -21,13 +21,12 @@ export default function KnowlegePlanetDialog({
return (
+ {value} +
+ )}