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

Admin Theme Redesign #666

Merged
merged 3 commits into from
Nov 22, 2024
Merged

Admin Theme Redesign #666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b017eb
feat: update admin ui theming
ryanhopperlowe Nov 18, 2024
71c7dd8
feat: theme touch ups to buttons/links
ryanhopperlowe Nov 22, 2024
ed24524
fix: make auth prompt CTAs more apparent in chat
ryanhopperlowe Nov 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
2 changes: 1 addition & 1 deletion ui/admin/app/components/Typography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export function TypographyPAccent({
...props
}: TypographyProps<"p">) {
return (
<TypographyP className={cn(`text-info-muted`, className)} {...props}>
<TypographyP className={cn(`text-secondary`, className)} {...props}>
{children}
</TypographyP>
);
Expand Down
47 changes: 25 additions & 22 deletions ui/admin/app/components/agent/Agent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { PastThreads } from "~/components/agent/PastThreads";
import { ToolForm } from "~/components/agent/ToolForm";
import { AgentKnowledgePanel } from "~/components/knowledge";
import { Button } from "~/components/ui/button";
import { Card } from "~/components/ui/card";
import { CardDescription } from "~/components/ui/card";
import { ScrollArea } from "~/components/ui/scroll-area";
import { useDebounce } from "~/hooks/useDebounce";

Expand Down Expand Up @@ -55,69 +55,72 @@ export function Agent({ className, onRefresh }: AgentProps) {
onChange={partialSetAgent}
/>

<Card className="p-4 m-4 lg:mx-6 xl:mx-8">
<div className="p-4 m-4 lg:mx-6 xl:mx-8">
<AgentForm
agent={agentUpdates}
onChange={debouncedSetAgentInfo}
/>
</Card>
</div>

<Card className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
<div className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
<TypographyH4 className="flex items-center gap-2 border-b pb-2">
<WrenchIcon className="w-5 h-5" />
Tools
</TypographyH4>

<TypographyP className="text-muted-foreground flex items-center gap-2">
<CardDescription>
Add tools the allow the agent to perform useful actions
such as searching the web, reading files, or interacting
with other systems.
</TypographyP>
</CardDescription>

<ToolForm
agent={agentUpdates}
onChange={({ tools }) =>
debouncedSetAgentInfo(convertTools(tools))
}
/>
</Card>
</div>

<Card className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
<div className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
<TypographyH4 className="flex items-center gap-2 border-b pb-2">
<LibraryIcon className="w-6 h-6" />
Knowledge
</TypographyH4>
<TypographyP className="text-muted-foreground flex items-center gap-2">
<CardDescription>
Provide knowledge to the agent in the form of files,
website, or external links in order to give it context
about various topics.
</TypographyP>
</CardDescription>
<AgentKnowledgePanel
agentId={agent.id}
agent={agent}
updateAgent={debouncedSetAgentInfo}
/>
</Card>
</div>
</ScrollArea>

<footer className="flex justify-between items-center px-8 py-4 gap-4 text-muted-foreground shadow-inner">
{error ? (
<TypographyP>Error saving agent</TypographyP>
) : isUpdating ? (
<TypographyP>Saving...</TypographyP>
) : lastUpdated ? (
<TypographyP>Saved</TypographyP>
) : (
<div />
)}
<footer className="flex justify-between items-center px-8 py-4 gap-4 shadow-inner">
<div className="text-muted-foreground">
{error ? (
<TypographyP>Error saving agent</TypographyP>
) : isUpdating ? (
<TypographyP>Saving...</TypographyP>
) : lastUpdated ? (
<TypographyP>Saved</TypographyP>
) : (
<div />
)}
</div>

<div className="flex gap-2">
<PastThreads
agentId={agent.id}
onThreadSelect={handleThreadSelect}
/>

<Button
variant="secondary"
variant="outline"
className="flex gap-2"
onClick={() => {
onRefresh?.(null);
Expand Down
6 changes: 4 additions & 2 deletions ui/admin/app/components/agent/PastThreads.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,15 +60,17 @@ export const PastThreads: React.FC<PastThreadsProps> = ({

return (
<Tooltip>
<TooltipContent>Switch threads</TooltipContent>

<Popover open={open} onOpenChange={handleOpenChange}>
<PopoverTrigger asChild>
<TooltipTrigger asChild>
<Button variant="secondary" size="icon">
<Button variant="ghost" size="icon">
<ChevronUpIcon className="w-4 h-4" />
</Button>
</TooltipTrigger>
</PopoverTrigger>
<TooltipContent>Switch threads</TooltipContent>

<PopoverContent className="w-80 p-0">
<Command className="flex-col-reverse">
<CommandInput placeholder="Search threads..." />
Expand Down
4 changes: 2 additions & 2 deletions ui/admin/app/components/agent/ToolEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export function ToolEntry({

return (
<div className="flex items-center space-x-2 justify-between mt-1">
<div className="border text-sm px-3 shadow-sm rounded-md p-2 w-full flex items-center justify-between gap-2">
<div className="text-sm px-3 shadow-sm rounded-md p-2 w-full flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
{isLoading ? (
<LoadingSpinner className="w-5 h-5" />
Expand All @@ -46,7 +46,7 @@ export function ToolEntry({

<Button
type="button"
variant="secondary"
variant="ghost"
size="icon"
onClick={() => onDelete()}
>
Expand Down
7 changes: 3 additions & 4 deletions ui/admin/app/components/chat/Chatbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { CircleArrowUpIcon } from "lucide-react";
import { ArrowUpIcon } from "lucide-react";
import { useState } from "react";

import { cn } from "~/lib/utils";
Expand Down Expand Up @@ -34,7 +34,7 @@ export function Chatbar({ className }: ChatbarProps) {
>
<div className="relative flex-grow">
<AutosizeTextarea
className="resize-none rounded-xl h-[2.5rem] line-height-[1.25rem] min-h-[2.5rem]"
className="resize-none rounded-xl h-[2.5rem] line-height-[1.25rem] min-h-[2.5rem] bg-background"
value={input}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
Expand All @@ -51,12 +51,11 @@ export function Chatbar({ className }: ChatbarProps) {

<Button
size="icon"
variant="secondary"
className="rounded-full"
type="submit"
disabled={!input || isRunning || isInvoking}
>
{isInvoking ? <LoadingSpinner /> : <CircleArrowUpIcon />}
{isInvoking ? <LoadingSpinner /> : <ArrowUpIcon />}
</Button>
</form>
);
Expand Down
23 changes: 10 additions & 13 deletions ui/admin/app/components/chat/Message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { ControlledInput } from "~/components/form/controlledInputs";
import { CustomMarkdownComponents } from "~/components/react-markdown";
import { ToolIcon } from "~/components/tools/ToolIcon";
import { Button } from "~/components/ui/button";
import { Card } from "~/components/ui/card";
import {
Dialog,
DialogContent,
Expand Down Expand Up @@ -67,13 +66,13 @@ export const Message = React.memo(({ message }: MessageProps) => {
<div
className={cn("flex", isUser ? "justify-end" : "justify-start")}
>
<Card
className={cn(
message.error &&
"border border-error bg-error-foreground",
"break-words overflow-hidden",
isUser ? "max-w-[80%] bg-blue-500" : "w-full max-w-full"
)}
<div
className={cn({
"border border-error bg-error-foreground rounded-xl":
message.error,
"rounded-2xl max-w-[80%] bg-accent": isUser,
"w-full max-w-full": !isUser,
})}
>
<div className="max-w-full overflow-hidden p-4 flex gap-2 items-center pl-[20px]">
{toolCall?.metadata?.icon && (
Expand All @@ -92,7 +91,8 @@ export const Message = React.memo(({ message }: MessageProps) => {
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,
"text-accent-foreground prose-invert":
isUser,
}
)}
remarkPlugins={[remarkGfm]}
Expand Down Expand Up @@ -131,7 +131,7 @@ export const Message = React.memo(({ message }: MessageProps) => {
</div>
)}
</div>
</Card>
</div>
</div>
</div>
);
Expand All @@ -158,12 +158,10 @@ function PromptMessage({ prompt }: { prompt: AuthPrompt }) {

{prompt.metadata.authType === "oauth" && (
<Link
buttonVariant="secondary"
as="button"
rel="noreferrer"
target="_blank"
to={prompt.metadata.authURL}
className="w-fit"
>
<ToolIcon
icon={prompt.metadata.icon}
Expand All @@ -179,7 +177,6 @@ function PromptMessage({ prompt }: { prompt: AuthPrompt }) {
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button
variant="secondary"
startContent={
<ToolIcon
icon={prompt.metadata.icon}
Expand Down
9 changes: 6 additions & 3 deletions ui/admin/app/components/chat/NoMessages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ export function NoMessages() {
</p>
<div className="flex flex-wrap justify-center gap-2">
<Button
variant="secondary"
variant="outline"
shape="pill"
disabled={isInvoking}
onClick={() =>
handleAddMessage(
Expand All @@ -30,7 +31,8 @@ export function NoMessages() {
Objectives
</Button>
<Button
variant="secondary"
variant="outline"
shape="pill"
disabled={isInvoking}
onClick={() =>
handleAddMessage(
Expand All @@ -42,7 +44,8 @@ export function NoMessages() {
Tools
</Button>
<Button
variant="secondary"
variant="outline"
shape="pill"
disabled={isInvoking}
onClick={() =>
handleAddMessage(
Expand Down
2 changes: 1 addition & 1 deletion ui/admin/app/components/composed/CopyText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function CopyText({
return (
<div
className={cn(
"flex items-center gap-2 bg-secondary rounded-md w-fit overflow-hidden",
"flex items-center gap-2 bg-accent rounded-md w-fit overflow-hidden",
className
)}
>
Expand Down
4 changes: 2 additions & 2 deletions ui/admin/app/components/composed/DataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ export function DataTable<TData, TValue>({
});

return (
<div className="rounded-md border max-h-full overflow-auto">
<div className="rounded-md max-h-full overflow-auto">
<Table className="h-full">
<TableHeader className="sticky top-0 bg-secondary">
<TableHeader className="sticky top-0">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="p-4">
{headerGroup.headers.map((header) => {
Expand Down
2 changes: 1 addition & 1 deletion ui/admin/app/components/header/HeaderNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function HeaderNav() {
)}
>
<div className="h-full flex-auto flex">
<div className="flex flex-grow border-b">
<div className="flex flex-grow z-20">
<div className="flex-grow flex justify-start items-center p-4">
<SidebarTrigger className="h-4 w-4" />
<div className="border-r h-4 mx-4" />
Expand Down
2 changes: 1 addition & 1 deletion ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -433,7 +433,7 @@ export default function AgentKnowledgePanel({
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="secondary"
variant="ghost"
className="flex items-center gap-2"
>
<PlusIcon className="h-5 w-5 text-foreground" />
Expand Down
4 changes: 2 additions & 2 deletions ui/admin/app/components/oauth-apps/OAuthAppTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function OAuthAppTile({
return (
<Card
className={cn("w-full flex flex-col", {
"border-2 border-primary": info.appOverride,
"border-2 border-accent-bold": info.appOverride,
})}
>
<CardHeader className="flex flex-row justify-between items-start pb-2 space-y-0">
Expand All @@ -49,7 +49,7 @@ export function OAuthAppTile({
{info.appOverride ? (
<Tooltip>
<TooltipTrigger>
<Badge>Custom</Badge>
<Badge variant="bold">Custom</Badge>
</TooltipTrigger>

<TooltipContent>
Expand Down
2 changes: 1 addition & 1 deletion ui/admin/app/components/oauth-apps/custom/CustomOAuthAppForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ export function CustomOAuthAppForm({
<Button
className="flex-1 w-full"
type="button"
variant="outline"
variant="secondary"
onClick={onBack}
>
{prevLabel}
Expand Down
5 changes: 1 addition & 4 deletions ui/admin/app/components/sidebar/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,7 @@ export function AppSidebar() {
<Sidebar collapsible="icon">
<SidebarRail />
<SidebarHeader
className={cn(
"border-b h-[60px]",
state === "collapsed" ? "" : "px-4"
)}
className={cn("h-[60px]", state === "collapsed" ? "" : "px-4")}
>
<div className={cn("flex items-center justify-center h-full")}>
<OttoLogo hideText={state === "collapsed"} />
Expand Down
2 changes: 1 addition & 1 deletion ui/admin/app/components/thread/ThreadMeta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function ThreadMeta({
return (
<Card className={cn("h-full bg-0", className)}>
<CardContent className="space-y-4 pt-6">
<div className="border dark:bg-secondary/25 rounded-md p-4 overflow-hidden">
<div className="bg-muted rounded-md p-4 overflow-hidden">
<table className="w-full">
<tbody>
<tr className="border-foreground/25">
Expand Down
6 changes: 1 addition & 5 deletions ui/admin/app/components/tools/CreateTool.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,6 @@ export function CreateTool({ onSuccess }: CreateToolProps) {
});
reset();
onSuccess();
},
{
onError: (error) =>
console.error("Failed to create tool reference:", error),
}
);

Expand All @@ -41,7 +37,7 @@ export function CreateTool({ onSuccess }: CreateToolProps) {
/>
</div>
<div className="flex justify-end">
<Button type="submit" variant="secondary" disabled={isLoading}>
<Button type="submit" disabled={isLoading}>
<PlusCircle className="w-4 h-4 mr-2" />
{isLoading ? "Creating..." : "Register Tool"}
</Button>
Expand Down
2 changes: 1 addition & 1 deletion ui/admin/app/components/tools/ToolCatalog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export function ToolCatalogDialog(props: ToolCatalogProps) {
</DialogContent>

<DialogTrigger asChild>
<Button variant="secondary">
<Button variant="ghost">
<PlusIcon className="w-4 h-4 mr-2" /> Add Tool
</Button>
</DialogTrigger>
Expand Down
Loading