UI/chore/update build (#318)

* feat: custom messages for oauth prompts * chore: update actions to use pnpm * update makefile * chore: format lockfile
obot-platform · Oct 25, 2024 · 726541b · 726541b
1 parent ed59e2a
commit 726541b
Show file tree

Hide file tree

Showing 6 changed files with 13,270 additions and 10,039 deletions.
diff --git a/.github/workflows/admin.yml b/.github/workflows/admin.yml
@@ -20,10 +20,15 @@ jobs:
         with:
           node-version: "20.17.0"
 
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
       - name: Install dependencies
         run: |
           cd ui/admin
-          npm install
+          pnpm install
 
       - name: Run linter
         run: make lint-admin

diff --git a/Makefile b/Makefile
@@ -14,7 +14,7 @@ ui:
 ui-user:
 	cd ui/user && \
 	pnpm install && \
-	npm run build
+	pnpm run build
 
 clean:
 	rm -rf ui/admin/build
@@ -32,8 +32,8 @@ lint: lint-admin
 
 lint-admin:
 	cd ui/admin && \
-	npm run format && \
-	npm run lint
+	pnpm run format && \
+	pnpm run lint
 
 package-tools:
 	./tools/package-tools.sh

diff --git a/ui/admin/app/components/chat/Message.tsx b/ui/admin/app/components/chat/Message.tsx
@@ -5,6 +5,7 @@ import Markdown, { defaultUrlTransform } from "react-markdown";
 import rehypeExternalLinks from "rehype-external-links";
 import remarkGfm from "remark-gfm";
 
+import { OAuthPrompt } from "~/lib/model/chatEvents";
 import { Message as MessageType } from "~/lib/model/messages";
 import { cn } from "~/lib/utils";
 
@@ -15,6 +16,7 @@ import { Button } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
 import { TypingDots } from "~/components/ui/typing-spinner";
 
+import { TypographyP } from "../Typography";
 import { ToolCallInfo } from "./ToolCallInfo";
 
 interface MessageProps {
@@ -76,21 +78,30 @@ export const Message = React.memo(({ message }: MessageProps) => {
                                 />
                             )}
 
-                            <Markdown
-                                className={cn(
-                                    "flex-auto max-w-full prose overflow-x-auto dark:prose-invert prose-pre:whitespace-pre-wrap prose-pre:break-words prose-thead:text-left prose-img:rounded-xl prose-img:shadow-lg break-words",
-                                    { "text-white prose-invert": isUser }
-                                )}
-                                remarkPlugins={[remarkGfm]}
-                                rehypePlugins={[
-                                    [rehypeExternalLinks, { target: "_blank" }],
-                                ]}
-                                urlTransform={urlTransformAllowFiles}
-                                components={CustomMarkdownComponents}
-                            >
-                                {parsedMessage ||
-                                    "Waiting for more information..."}
-                            </Markdown>
+                            {message.prompt ? (
+                                <PromptMessage prompt={message.prompt} />
+                            ) : (
+                                <Markdown
+                                    className={cn(
+                                        "flex-auto max-w-full prose overflow-x-auto dark:prose-invert prose-pre:whitespace-pre-wrap prose-pre:break-words prose-thead:text-left prose-img:rounded-xl prose-img:shadow-lg break-words",
+                                        {
+                                            "text-white prose-invert": isUser,
+                                        }
+                                    )}
+                                    remarkPlugins={[remarkGfm]}
+                                    rehypePlugins={[
+                                        [
+                                            rehypeExternalLinks,
+                                            { target: "_blank" },
+                                        ],
+                                    ]}
+                                    urlTransform={urlTransformAllowFiles}
+                                    components={CustomMarkdownComponents}
+                                >
+                                    {parsedMessage ||
+                                        "Waiting for more information..."}
+                                </Markdown>
+                            )}
 
                             {toolCall && (
                                 <ToolCallInfo tool={toolCall}>
@@ -124,3 +135,37 @@ export const Message = React.memo(({ message }: MessageProps) => {
 });
 
 Message.displayName = "Message";
+
+function PromptMessage({ prompt }: { prompt: OAuthPrompt }) {
+    return (
+        <div className="flex-auto flex flex-col flex-wrap gap-2 w-fit">
+            <TypographyP className="min-w-fit">
+                <b>
+                    {[prompt.metadata?.category, prompt.name]
+                        .filter(Boolean)
+                        .join(" - ")}
+                </b>
+                {": "}
+                Tool Call requires authentication
+            </TypographyP>
+
+            <Button asChild>
+                <a
+                    rel="noreferrer"
+                    target="_blank"
+                    href={prompt.metadata?.authURL}
+                    className="flex items-center gap-2 w-fit"
+                >
+                    <ToolIcon
+                        icon={prompt.metadata?.icon}
+                        category={prompt.metadata?.category}
+                        name={prompt.name}
+                        className="w-5 h-5 invert dark:invert-0"
+                        disableTooltip
+                    />
+                    Authenticate with {prompt.metadata?.category}
+                </a>
+            </Button>
+        </div>
+    );
+}
diff --git a/ui/admin/app/lib/model/chatEvents.ts b/ui/admin/app/lib/model/chatEvents.ts
@@ -14,14 +14,17 @@ export type ToolCall = {
 };
 
 type PromptOAuthMeta = {
-    authType: string;
+    authType: "oauth";
     authURL: string;
+    category: string;
+    icon: string;
     toolContext: string;
     toolDisplayName: string;
 };
 
-export type Prompt = {
+export type OAuthPrompt = {
     id?: string;
+    name: string;
     time?: Date;
     message?: string;
     fields?: string[];
@@ -40,7 +43,7 @@ export type ChatEvent = {
     waitingOnModel?: boolean;
     toolInput?: ToolInput;
     toolCall?: ToolCall;
-    prompt?: Prompt;
+    prompt?: OAuthPrompt;
 };
 
 export function combineChatEvents(events: ChatEvent[]): ChatEvent[] {

diff --git a/ui/admin/app/lib/model/messages.ts b/ui/admin/app/lib/model/messages.ts
@@ -1,11 +1,12 @@
-import { ChatEvent, Prompt, ToolCall } from "./chatEvents";
+import { ChatEvent, OAuthPrompt, ToolCall } from "./chatEvents";
 import { Run } from "./runs";
 
 export interface Message {
     text: string;
     sender: "user" | "agent";
     // note(ryanhopperlowe) we only support one tool call per message for now
     // leaving it as an array case that changes in the future
+    prompt?: OAuthPrompt;
     tools?: ToolCall[];
     runId?: string;
     isLoading?: boolean;
@@ -38,9 +39,10 @@ export const toolCallMessage = (toolCall: ToolCall): Message => ({
     tools: [toolCall],
 });
 
-export const promptMessage = (prompt: Prompt, runID: string): Message => ({
+export const promptMessage = (prompt: OAuthPrompt, runID: string): Message => ({
     sender: "agent",
-    text: prompt.message || "",
+    text: "",
+    prompt,
     runId: runID,
 });
 
@@ -74,7 +76,6 @@ export const chatEventsToMessages = (events: ChatEvent[]) => {
             continue;
         }
 
-        // note(ryanhopperlowe) this just splits out a new message. In the future we will want to create a custom prompt message
         if (prompt) {
             messages.push(promptMessage(prompt, runID));
             continue;