Skip to content
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.

Sign up for GitHub

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

Simplify usage of authenticatedData and some do some code clean-up #1015

Merged
merged 10 commits into from
Dec 24, 2024
+204 −349
Merged

Simplify usage of authenticatedData and some do some code clean-up #1015

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e9dae42
Clean up all references to authenticatedData
sabaimran Dec 21, 2024
2c7c16d
Fix conditional reference to is mobile width hook
sabaimran Dec 21, 2024
a17cc9d
Fix handling 403 forbidden error from auth response
sabaimran Dec 22, 2024
8c6b421
Set width of chat layout to 100%
sabaimran Dec 22, 2024
dc17272
Fix some spacing in the nav menu
sabaimran Dec 22, 2024
9f84f5d
Give more breathing space to the sidebar footer
sabaimran Dec 22, 2024
60f8054
Remove unused span text
sabaimran Dec 22, 2024
0fefbac
Improve sidebar experience for not logged in state
sabaimran Dec 22, 2024
7032ccf
Show create agent button when not logged in agents page
sabaimran Dec 22, 2024
7988373
Improve mobile friendliness and highlight missing necessary data
sabaimran Dec 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 63 additions & 47 deletions src/interface/web/app/agents/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -140,11 +140,14 @@ function CreateAgentCard(props: CreateAgentCardProps) {
Create Agent
</div>
</DialogTrigger>
<DialogContent className={"lg:max-w-screen-lg overflow-y-scroll max-h-screen"}>
<DialogContent
className={
"lg:max-w-screen-lg py-4 overflow-y-scroll h-full md:h-4/6 rounded-lg flex flex-col"
}
>
<DialogHeader>Create Agent</DialogHeader>
{!props.userProfile && showLoginPrompt && (
<LoginPrompt
loginRedirectMessage="Sign in to start chatting with a specialized agent"
onOpenChange={setShowLoginPrompt}
isMobileWidth={props.isMobileWidth}
/>
@@ -174,7 +177,11 @@ export default function Agents() {
const { data, error, mutate } = useSWR<AgentData[]>("agents", agentsFetcher, {
revalidateOnFocus: false,
});
const authenticatedData = useAuthenticatedData();
const {
data: authenticatedData,
error: authenticationError,
isLoading: authenticationLoading,
} = useAuthenticatedData();
const { userConfig } = useUserConfig(true);
const [showLoginPrompt, setShowLoginPrompt] = useState(false);
const isMobileWidth = useIsMobileWidth();
@@ -310,7 +317,11 @@ export default function Agents() {
input_tools: [],
output_modes: [],
}}
userProfile={authenticatedData}
userProfile={
authenticationLoading
? null
: (authenticatedData ?? null)
}
isMobileWidth={isMobileWidth}
filesOptions={filesData || []}
modelOptions={userConfig?.chat_model_options || []}
@@ -328,7 +339,6 @@ export default function Agents() {
</div>
{showLoginPrompt && (
<LoginPrompt
loginRedirectMessage="Sign in to start chatting with a specialized agent"
onOpenChange={setShowLoginPrompt}
isMobileWidth={isMobileWidth}
/>
@@ -345,53 +355,59 @@ export default function Agents() {
</Alert>
<div className="pt-6 md:pt-8">
<div className={`${styles.agentList}`}>
{personalAgents.map((agent) => (
<AgentCard
key={agent.slug}
data={agent}
userProfile={authenticatedData}
isMobileWidth={isMobileWidth}
filesOptions={filesData ?? []}
selectedChatModelOption={defaultModelOption?.name || ""}
isSubscribed={isSubscribed}
setAgentChangeTriggered={setAgentChangeTriggered}
modelOptions={userConfig?.chat_model_options || []}
editCard={true}
agentSlug={agentSlug || ""}
inputToolOptions={
agentConfigurationOptions?.input_tools || {}
}
outputModeOptions={
agentConfigurationOptions?.output_modes || {}
}
/>
))}
{authenticatedData &&
personalAgents.map((agent) => (
<AgentCard
key={agent.slug}
data={agent}
userProfile={authenticatedData}
isMobileWidth={isMobileWidth}
filesOptions={filesData ?? []}
selectedChatModelOption={
defaultModelOption?.name || ""
}
isSubscribed={isSubscribed}
setAgentChangeTriggered={setAgentChangeTriggered}
modelOptions={userConfig?.chat_model_options || []}
editCard={true}
agentSlug={agentSlug || ""}
inputToolOptions={
agentConfigurationOptions?.input_tools || {}
}
outputModeOptions={
agentConfigurationOptions?.output_modes || {}
}
/>
))}
</div>
</div>
<div className="pt-6 md:pt-8">
<h2 className="text-2xl">Explore</h2>
<div className={`${styles.agentList}`}>
{publicAgents.map((agent) => (
<AgentCard
key={agent.slug}
data={agent}
userProfile={authenticatedData}
isMobileWidth={isMobileWidth}
editCard={false}
filesOptions={filesData ?? []}
selectedChatModelOption={defaultModelOption?.name || ""}
isSubscribed={isSubscribed}
setAgentChangeTriggered={setAgentChangeTriggered}
modelOptions={userConfig?.chat_model_options || []}
agentSlug={agentSlug || ""}
inputToolOptions={
agentConfigurationOptions?.input_tools || {}
}
outputModeOptions={
agentConfigurationOptions?.output_modes || {}
}
/>
))}
{!authenticationLoading &&
publicAgents.map((agent) => (
<AgentCard
key={agent.slug}
data={agent}
userProfile={authenticatedData || null}
isMobileWidth={isMobileWidth}
editCard={false}
filesOptions={filesData ?? []}
selectedChatModelOption={
defaultModelOption?.name || ""
}
isSubscribed={isSubscribed}
setAgentChangeTriggered={setAgentChangeTriggered}
modelOptions={userConfig?.chat_model_options || []}
agentSlug={agentSlug || ""}
inputToolOptions={
agentConfigurationOptions?.input_tools || {}
}
outputModeOptions={
agentConfigurationOptions?.output_modes || {}
}
/>
))}
</div>
</div>
</div>
39 changes: 21 additions & 18 deletions src/interface/web/app/automations/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -980,7 +980,11 @@ function AutomationComponentWrapper(props: AutomationComponentWrapperProps) {
}

export default function Automations() {
const authenticatedData = useAuthenticatedData();
const {
data: authenticatedData,
error: authenticationError,
isLoading: authenticationLoading,
} = useAuthenticatedData();
const {
data: personalAutomations,
error,
@@ -1068,9 +1072,6 @@ export default function Automations() {
</div>
{showLoginPrompt && (
<LoginPrompt
loginRedirectMessage={
"Create an account to make your own automation"
}
onOpenChange={setShowLoginPrompt}
isMobileWidth={isMobileWidth}
/>
@@ -1114,7 +1115,7 @@ export default function Automations() {
<Suspense>
<SharedAutomationCard
isMobileWidth={isMobileWidth}
authenticatedData={authenticatedData}
authenticatedData={authenticatedData || null}
locationData={locationData}
isLoggedIn={authenticatedData ? true : false}
setShowLoginPrompt={setShowLoginPrompt}
@@ -1123,7 +1124,8 @@ export default function Automations() {
</Suspense>
{isLoading && <InlineLoading message="booting up your automations" />}
<div className={`${styles.automationsLayout}`}>
{personalAutomations &&
{authenticatedData &&
personalAutomations &&
personalAutomations.map((automation) => (
<AutomationsCard
isMobileWidth={isMobileWidth}
@@ -1135,17 +1137,18 @@ export default function Automations() {
setShowLoginPrompt={setShowLoginPrompt}
/>
))}
{allNewAutomations.map((automation) => (
<AutomationsCard
isMobileWidth={isMobileWidth}
key={automation.id}
authenticatedData={authenticatedData}
automation={automation}
locationData={locationData}
isLoggedIn={authenticatedData ? true : false}
setShowLoginPrompt={setShowLoginPrompt}
/>
))}
{authenticatedData &&
allNewAutomations.map((automation) => (
<AutomationsCard
isMobileWidth={isMobileWidth}
key={automation.id}
authenticatedData={authenticatedData}
automation={automation}
locationData={locationData}
isLoggedIn={authenticatedData ? true : false}
setShowLoginPrompt={setShowLoginPrompt}
/>
))}
</div>
<h3 className="text-xl py-4">Explore</h3>
<div className={`${styles.automationsLayout}`}>
@@ -1154,7 +1157,7 @@ export default function Automations() {
isMobileWidth={isMobileWidth}
setNewAutomationData={setNewAutomationData}
key={automation.id}
authenticatedData={authenticatedData}
authenticatedData={authenticatedData || null}
automation={automation}
locationData={locationData}
isLoggedIn={authenticatedData ? true : false}
3 changes: 2 additions & 1 deletion src/interface/web/app/chat/chat.module.css
View file
Original file line number Diff line number Diff line change
@@ -64,9 +64,10 @@ div.chatBody {

div.chatLayout {
display: grid;
grid-template-columns: auto 1fr;
grid-template-columns: 1fr;
gap: 1rem;
padding-top: 1rem;
width: 100%;
}

div.chatBox {
8 changes: 6 additions & 2 deletions src/interface/web/app/chat/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -193,7 +193,11 @@ export default function Chat() {
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
};
const authenticatedData = useAuthenticatedData();
const {
data: authenticatedData,
error: authenticationError,
isLoading: authenticationLoading,
} = useAuthenticatedData();
const isMobileWidth = useIsMobileWidth();

useEffect(() => {
@@ -425,7 +429,7 @@ export default function Chat() {
<div className={styles.chatBoxBody}>
<Suspense fallback={<Loading />}>
<ChatBodyData
isLoggedIn={authenticatedData !== null}
isLoggedIn={authenticatedData ? true : false}
streamedMessages={messages}
setStreamedMessages={setMessages}
chatOptionsData={chatOptionsData}
8 changes: 5 additions & 3 deletions src/interface/web/app/common/auth.ts
View file
Original file line number Diff line number Diff line change
@@ -19,13 +19,15 @@ const fetcher = (url: string) =>
.catch((err) => console.warn(err));

export function useAuthenticatedData() {
const { data, error } = useSWR<UserProfile>("/api/v1/user", fetcher, {
const { data, error, isLoading } = useSWR<UserProfile>("/api/v1/user", fetcher, {
revalidateOnFocus: false,
});

if (error || !data || data.detail === "Forbidden") return null;
if (data?.detail === "Forbidden") {
return { data: null, error: "Forbidden", isLoading: false };
}

return data;
return { data, error, isLoading };
}

export interface ModelOptions {
Loading