4 | No agent selected
5 |
9 | );
10 | }
11 |
12 | export function AgentNotFound() {
13 | return (
14 | 6 | Please select an agent from the sidebar 7 |
8 |
15 | Agent not found
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/client/components/agents/agent-skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { Skeleton } from "@client/components/ui/skeleton";
2 |
3 | export function AgentSkeleton() {
4 | return (
5 |
6 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/src/client/components/agents/new-agent-dialog.tsx:
--------------------------------------------------------------------------------
1 | import { zodResolver } from "@hookform/resolvers/zod";
2 | import { useMutation, useQueryClient } from "@tanstack/react-query";
3 | import { useForm } from "react-hook-form";
4 |
5 | import { Button } from "@client/components/ui/button";
6 | import {
7 | Dialog,
8 | DialogContent,
9 | DialogDescription,
10 | DialogFooter,
11 | DialogHeader,
12 | DialogTitle,
13 | } from "@client/components/ui/dialog";
14 | import { Form } from "@client/components/ui/form";
15 | import { honoClient } from "@client/lib/api-client";
16 | import { type AgentFormValues, createAgentSchema } from "@shared/types";
17 | import { useRouter } from "@tanstack/react-router";
18 | import { AgentForm } from "./agent-form";
19 |
20 | export function NewAgentDialog({
21 | open,
22 | setOpen,
23 | }: {
24 | open: boolean;
25 | setOpen: (open: boolean) => void;
26 | }) {
27 | return (
28 |
33 | );
34 | }
35 |
36 | function NewAgentDialogContent({
37 | setOpen,
38 | }: {
39 | setOpen: (open: boolean) => void;
40 | }) {
41 | const router = useRouter();
42 | const queryClient = useQueryClient();
43 | const form = useForm
9 |
23 |
24 |
10 |
12 |
13 |
14 |
17 |
18 |
19 |
22 |
25 |
26 |
28 |
29 |
42 |
26 |
28 |
29 |
30 |
41 |
31 |
40 |
33 | {Array.from({ length: 4 }).map((_, i) => (
34 | // biome-ignore lint/suspicious/noArrayIndexKey:
35 |
38 |
35 |
60 | );
61 | }
62 |
63 | function ChatMemberListEmpty() {
64 | return (
65 |
41 |
58 | ))}
59 |
42 |
43 |
45 | {member.name[0]?.toUpperCase() ?? "?"}
46 |
47 |
48 | {member.name}
49 |
51 | {showRemoveButton &&
52 | room &&
53 | !isSessionPending &&
54 | session?.user.id !== member.id && (
55 |
66 | No members in this chat room
67 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/src/client/components/chat-room-member/chat-member-remove-button.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@client/components/ui/button";
4 | import {
5 | Dialog,
6 | DialogContent,
7 | DialogDescription,
8 | DialogFooter,
9 | DialogHeader,
10 | DialogTitle,
11 | DialogTrigger,
12 | } from "@client/components/ui/dialog";
13 | import { honoClient } from "@client/lib/api-client";
14 | import type { ChatRoomMember } from "@shared/types";
15 | import { useMutation } from "@tanstack/react-query";
16 | import { Trash2 } from "lucide-react";
17 | import { useState } from "react";
18 |
19 | interface ChatMemberRemoveButtonProps {
20 | member: ChatRoomMember;
21 | roomId: string;
22 | }
23 |
24 | export function ChatMemberRemoveButton({
25 | member,
26 | roomId,
27 | }: ChatMemberRemoveButtonProps) {
28 | const [open, setOpen] = useState(false);
29 |
30 | const removeMemberMutation = useMutation({
31 | mutationFn: async () => {
32 | const response = await honoClient.api.chat["chat-rooms"][
33 | ":chatRoomId"
34 | ].members[":memberId"].$delete({
35 | param: {
36 | chatRoomId: roomId,
37 | memberId: member.id,
38 | },
39 | });
40 | return response.json();
41 | },
42 | onSuccess: () => {
43 | setOpen(false);
44 | },
45 | });
46 |
47 | return (
48 |
80 | );
81 | }
82 |
--------------------------------------------------------------------------------
/src/client/components/chat-room-member/new/chat-member-add-dialog.tsx:
--------------------------------------------------------------------------------
1 | import { ChatMemberAddForm } from "@client/components/chat-room-member/new/chat-member-add-form";
2 | import { useOrganizationConnectionContext } from "@client/components/providers/organization-connection-provider";
3 | import { Button } from "@client/components/ui/button";
4 | import {
5 | Dialog,
6 | DialogContent,
7 | DialogTrigger,
8 | } from "@client/components/ui/dialog";
9 | import { Plus } from "lucide-react";
10 | import { useState } from "react";
11 |
12 | export function ChatMemberAddDialog() {
13 | const [open, setOpen] = useState(false);
14 |
15 | return (
16 |
27 | );
28 | }
29 |
30 | function ChatMemberAddDialogContent({
31 | onSuccess,
32 | }: {
33 | onSuccess: () => void;
34 | }) {
35 | const {
36 | mainChatRoomState: { room },
37 | } = useOrganizationConnectionContext();
38 |
39 | if (!room) {
40 | return null;
41 | }
42 |
43 | return
13 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/client/components/chat-room/chat-room.tsx:
--------------------------------------------------------------------------------
1 | import { ChatRoomNotSelected } from "@client/components/chat-room/chat-room-not-selected";
2 | import { ChatRoomMainDisplay } from "@client/components/chat-room/main/chat-room-main-display";
3 | import { ChatRoomMainHeader } from "@client/components/chat-room/main/chat-room-main-header";
4 | import { ChatRoomThreadHeader } from "@client/components/chat-room/thread/chat-room-thread-header";
5 | import {
6 | ResizableHandle,
7 | ResizablePanel,
8 | ResizablePanelGroup,
9 | } from "@client/components/ui/resizable";
10 | import { useSearch } from "@tanstack/react-router";
11 | import { ChatRoomThreadDisplay } from "./thread/chat-room-thread-display";
12 |
13 | export function ChatRoom() {
14 | const { roomId, threadId } = useSearch({ strict: false });
15 |
16 | if (!roomId) {
17 | return
14 |
19 | No chat room selected
15 |16 | Select a chat room from the sidebar to start chatting 17 |
18 |
30 |
33 |
43 |
46 |
18 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/src/client/components/chat-room/new/new-chat-dialog.tsx:
--------------------------------------------------------------------------------
1 | import { useMutation } from "@tanstack/react-query";
2 | import type { z } from "zod";
3 |
4 | import { NewChatRoomGroupForm } from "@client/components/chat-room/new/new-chat-room-group";
5 | import {
6 | Dialog,
7 | DialogContent,
8 | DialogDescription,
9 | DialogHeader,
10 | DialogTitle,
11 | } from "@client/components/ui/dialog";
12 | import { honoClient } from "@client/lib/api-client";
13 | import type { ChatRoomType, createChatRoomSchema } from "@shared/types";
14 | import { useRouter } from "@tanstack/react-router";
15 | import type { Dispatch, SetStateAction } from "react";
16 | import { toast } from "sonner";
17 |
18 | type CreateChatRoomFormValues = z.infer
19 |
22 |
23 | {room.name}
20 |
26 |
52 |
27 |
41 |
42 |
28 |
30 |
31 |
40 | Created
32 |33 | {new Date(room.createdAt).toLocaleDateString("en-US", { 34 | year: "numeric", 35 | month: "long", 36 | day: "numeric", 37 | })} 38 |
39 |
43 |
51 |
44 |
46 |
47 |
50 | Members
48 |{members.length || 0}
49 |
42 |
46 |
70 |
81 | );
82 | }
83 |
--------------------------------------------------------------------------------
/src/client/components/chat-room/thread/chat-room-thread-header.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@client/components/ui/button";
4 | import { Separator } from "@client/components/ui/separator";
5 | import { useRouter } from "@tanstack/react-router";
6 | import { X } from "lucide-react";
7 |
8 | export function ChatRoomThreadHeader() {
9 | const router = useRouter();
10 |
11 | return (
12 |
47 |
69 |
48 | {threadMessage ? (
49 |
54 |
56 | {isLoading ? (
57 |
68 |
64 | Send a message to start the thread
65 |
66 | )}
67 |
71 |
76 |
79 |
80 |
14 |
31 |
37 |
23 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/src/client/components/common/card-toggle-groups.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ToggleGroup,
3 | ToggleGroupItem,
4 | } from "@client/components/ui/toggle-group";
5 | import { idToReadableText } from "@client/lib/id-parsing";
6 |
7 | interface ToggleGroupProps
24 | {value ? (
25 | 
30 | ) : (
31 |
36 |
44 |
77 |
32 |
34 | )}
35 | 43 | {descriptions[option]} 44 |
45 |
9 |
13 |
10 |
31 | );
32 | }
33 |
34 | export function AppLayoutSkeleton() {
35 | return (
36 |
11 |
16 |
17 | {Array.from({ length: 5 }).map((_, i) => (
18 |
21 | i
22 | }`}
23 | className="h-8 w-full mb-2"
24 | />
25 | ))}
26 |
27 |
28 |
30 |
37 |
41 |
45 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/client/components/layout/app-layout.tsx:
--------------------------------------------------------------------------------
1 | import { AppSidebar } from "@client/components/layout/app-sidebar";
2 | import { SidebarInset } from "@client/components/ui/sidebar";
3 |
4 | export function AppLayout({
5 | children,
6 | sidebarChildren,
7 | }: {
8 | children: React.ReactNode;
9 | sidebarChildren: React.ReactNode;
10 | }) {
11 | return (
12 | <>
13 |
38 |
40 |
42 |
44 |
24 |
41 |
42 | );
43 | }
44 |
45 | export interface ToolInvocationSourcesListProps {
46 | sources: ToolSource[];
47 | maxVisible?: number;
48 | maxHeight?: string;
49 | }
50 |
51 | export function ToolInvocationSourcesList({
52 | sources,
53 | }: ToolInvocationSourcesListProps) {
54 | return (
55 |
25 | {source.title}
26 |
27 |
28 |
34 | {source.url}
35 |
36 |
37 |
38 | {source.content}
39 |
40 |
56 |
58 |
67 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/src/client/components/ui/alert.tsx:
--------------------------------------------------------------------------------
1 | import { type VariantProps, cva } from "class-variance-authority";
2 | import type * as React from "react";
3 |
4 | import { cn } from "@client/lib/utils";
5 |
6 | const alertVariants = cva(
7 | "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
8 | {
9 | variants: {
10 | variant: {
11 | default: "bg-card text-card-foreground",
12 | destructive:
13 | "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
14 | },
15 | },
16 | defaultVariants: {
17 | variant: "default",
18 | },
19 | },
20 | );
21 |
22 | function Alert({
23 | className,
24 | variant,
25 | ...props
26 | }: React.ComponentProps<"div"> & VariantPropsSources ({sources.length})
57 |
59 | {sources.map((source, index) => (
60 |
66 |
59 |
60 |
62 | {showScrollButton && (
63 |
70 | );
71 | }
72 |
73 | ChatMessageArea.displayName = "ChatMessageArea";
74 |
--------------------------------------------------------------------------------
/src/client/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
2 | import { CheckIcon } from "lucide-react";
3 | import type * as React from "react";
4 |
5 | import { cn } from "@client/lib/utils";
6 |
7 | function Checkbox({
8 | className,
9 | ...props
10 | }: React.ComponentProps{children}
61 |
47 |
49 | )}
50 |
76 | {props.items.length ? (
77 | props.items.map((item, index) => (
78 |
104 | ))
105 | ) : (
106 |
111 | );
112 | });
113 |
--------------------------------------------------------------------------------
/src/client/components/ui/tiptap/metion-plugin.ts:
--------------------------------------------------------------------------------
1 | import Mention from "@tiptap/extension-mention";
2 | /* import type { Node } from "@tiptap/pm/model"; */
3 |
4 | export const MentioPlugin = Mention.extend({
5 | name: "mention",
6 | /* addStorage() {
7 | return {
8 | markdown: {
9 | serialize: (state: { write: (arg: string) => void }, node: Node) => {
10 | state.write(`@{"id":${node.attrs.id},"label":"${node.attrs.label}"}`);
11 | },
12 | },
13 | };
14 | }, */
15 | });
16 |
--------------------------------------------------------------------------------
/src/client/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
1 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
2 | import type { VariantProps } from "class-variance-authority";
3 | import * as React from "react";
4 |
5 | import { toggleVariants } from "@client/components/ui/toggle";
6 | import { cn } from "@client/lib/utils";
7 |
8 | const ToggleGroupContext = React.createContext<
9 | VariantProps
107 | No results found
108 |
109 | )}
110 |
25 | {children}
26 |
27 | );
28 | }
29 |
30 | export function ToolInvocationContent({
31 | children,
32 | className,
33 | }: { children: React.ReactNode; className?: string }) {
34 | return {children}
;
35 | }
36 |
37 | export function ToolInvocationName({
38 | name,
39 | capitalize = true,
40 | type,
41 | className,
42 | }: {
43 | name: string;
44 | capitalize?: boolean;
45 | type: "tool-call" | "tool-result";
46 | className?: string;
47 | }) {
48 | return (
49 |
50 | {type === "tool-call" && (
51 |
70 |
75 | );
76 | }
77 |
78 | // biome-ignore lint/suspicious/noExplicitAny: Result:
71 |
72 | {JSON.stringify(result, null, 2)}
73 |
74 |
82 |
86 | );
87 | }
88 |
--------------------------------------------------------------------------------
/src/client/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
4 | import type * as React from "react";
5 |
6 | import { cn } from "@client/lib/utils";
7 |
8 | function TooltipProvider({
9 | delayDuration = 0,
10 | ...props
11 | }: React.ComponentProps
83 | {JSON.stringify(args, null, 2)}
84 |
85 |
33 |
34 |
35 |
37 |
38 |
40 | );
41 | }
42 |
43 | return