fix: width/markdown issue in wordpress pre-authentication (#1675)

obot-platform · Feb 6, 2025 · 0cb1ad7 · 0cb1ad7
1 parent f028467
commit 0cb1ad7
Showing 1 changed file with 98 additions and 90 deletions.
diff --git a/ui/admin/app/components/agent/shared/ToolAuthenticationDialog.tsx b/ui/admin/app/components/agent/shared/ToolAuthenticationDialog.tsx
@@ -15,6 +15,8 @@ import {
 	DialogTitle,
 } from "~/components/ui/dialog";
 import { Link } from "~/components/ui/link";
+import { Markdown } from "~/components/ui/markdown";
+import { ScrollArea } from "~/components/ui/scroll-area";
 import { useInitMessageStore } from "~/hooks/messages/useMessageStore";
 
 type AgentAuthenticationDialogProps = {
@@ -62,111 +64,117 @@ export function ToolAuthenticationDialog({
 
 	return (
 		<Dialog open={!!threadId} onOpenChange={onComplete}>
-			<DialogContent className="max-w-sm">
-				<DialogHeader>
-					<DialogTitle className="flex items-center gap-2">
-						{icon} <span>Authorize {label}</span>
-					</DialogTitle>
-
-					<DialogDescription hidden={done}></DialogDescription>
-				</DialogHeader>
-
-				<div className="flex w-full items-center justify-center [&_svg]:size-4">
-					{!messages.length ? (
-						<div className="flex items-center gap-2">
-							<LoadingSpinner /> Loading...
-						</div>
-					) : (
-						<div className="flex flex-col gap-2">
-							{messages.map((message, index) => {
-								if (message.error) {
-									return (
-										<p
-											className="flex items-center gap-2 text-destructive"
-											key={index}
-										>
-											<CircleAlert /> Error: {message.text}
-										</p>
-									);
-								}
-
-								if (message.text === "DONE") {
-									return (
-										<p key={index} className="flex items-center gap-2">
-											<CheckIcon className="text-success" />
-											Done
-										</p>
-									);
-								}
-
-								if (message.prompt) {
-									if (map[index]?.isDone) {
+			<DialogContent className="max-h-[80vh] p-0">
+				<ScrollArea className="overflow-auto p-6">
+					<DialogHeader>
+						<DialogTitle className="flex items-center gap-2">
+							{icon} <span>Authorize {label}</span>
+						</DialogTitle>
+
+						<DialogDescription hidden={done}></DialogDescription>
+					</DialogHeader>
+
+					<div className="flex w-full items-center justify-center [&_svg]:size-4">
+						{!messages.length ? (
+							<div className="flex items-center gap-2">
+								<LoadingSpinner /> Loading...
+							</div>
+						) : (
+							<div className="flex flex-col gap-2">
+								{messages.map((message, index) => {
+									if (message.error) {
 										return (
-											<p key={index} className="flex items-center gap-2">
-												<CheckIcon className="text-success" />
-												Authentication Successful
+											<p
+												className="flex items-center gap-2 text-destructive"
+												key={index}
+											>
+												<CircleAlert /> Error: {message.text}
 											</p>
 										);
 									}
 
-									if (map[index]?.isLoading) {
+									if (message.text === "DONE") {
 										return (
 											<p key={index} className="flex items-center gap-2">
-												<LoadingSpinner /> Authentication Processing
+												<CheckIcon className="text-success" />
+												Done
 											</p>
 										);
 									}
 
-									if (message.prompt.metadata?.authURL) {
-										return (
-											<p key={index} className="flex items-center gap-2">
-												<CircleAlert />
-												<span>
-													Authentication Required{" "}
-													<Link
-														target="_blank"
-														rel="noreferrer"
-														to={message.prompt.metadata.authURL}
-														onClick={() =>
-															updateItem(index, { isLoading: true })
-														}
-													>
-														Click Here
-													</Link>
-												</span>
-											</p>
-										);
-									}
+									if (message.prompt) {
+										if (map[index]?.isDone) {
+											return (
+												<p key={index} className="flex items-center gap-2">
+													<CheckIcon className="text-success" />
+													Authentication Successful
+												</p>
+											);
+										}
 
-									if (message.prompt.fields) {
-										return (
-											<div key={index} className="flex flex-col gap-2">
-												<p className="flex items-center gap-2">
+										if (map[index]?.isLoading) {
+											return (
+												<p key={index} className="flex items-center gap-2">
+													<LoadingSpinner /> Authentication Processing
+												</p>
+											);
+										}
+
+										if (message.prompt.metadata?.authURL) {
+											return (
+												<p key={index} className="flex items-center gap-2">
 													<CircleAlert />
-													{message.prompt.message || "Authentication Required"}
+													<span>
+														Authentication Required{" "}
+														<Link
+															target="_blank"
+															rel="noreferrer"
+															to={message.prompt.metadata.authURL}
+															onClick={() =>
+																updateItem(index, { isLoading: true })
+															}
+														>
+															Click Here
+														</Link>
+													</span>
 												</p>
-												<PromptAuthForm
-													prompt={message.prompt}
-													onSubmit={() =>
-														updateItem(index, { isLoading: true })
-													}
-												/>
-											</div>
-										);
+											);
+										}
+
+										if (message.prompt.fields) {
+											return (
+												<div key={index} className="flex flex-col gap-2">
+													{message.prompt.message ? (
+														<Markdown>{message.prompt.message}</Markdown>
+													) : (
+														<p className="flex items-center gap-2">
+															Authentication Required
+														</p>
+													)}
+
+													<PromptAuthForm
+														prompt={message.prompt}
+														onSubmit={() =>
+															updateItem(index, { isLoading: true })
+														}
+													/>
+												</div>
+											);
+										}
 									}
-								}
-							})}
-						</div>
-					)}
-				</div>
-
-				<DialogFooter>
-					<DialogClose asChild>
-						<Button variant={done ? "default" : "secondary"}>
-							{done ? "Done" : "Cancel"}
-						</Button>
-					</DialogClose>
-				</DialogFooter>
+								})}
+							</div>
+						)}
+					</div>
+
+					<DialogFooter>
+						{done && (
+							<DialogClose asChild>
+								<Button>Done</Button>
+							</DialogClose>
+						)}
+					</DialogFooter>
+				</ScrollArea>
 			</DialogContent>
 		</Dialog>
 	);