87 | >(({ className, ...props }, ref) => (
88 | | [role=checkbox]]:translate-y-[2px]",
92 | className
93 | )}
94 | {...props}
95 | />
96 | ));
97 | TableCell.displayName = "TableCell";
98 |
99 | const TableCaption = React.forwardRef<
100 | HTMLTableCaptionElement,
101 | React.HTMLAttributes
102 | >(({ className, ...props }, ref) => (
103 |
108 | ));
109 | TableCaption.displayName = "TableCaption";
110 |
111 | export {
112 | Table,
113 | TableHeader,
114 | TableBody,
115 | TableFooter,
116 | TableHead,
117 | TableRow,
118 | TableCell,
119 | TableCaption,
120 | };
121 |
--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | export interface TextareaProps
6 | extends React.TextareaHTMLAttributes {}
7 |
8 | const Textarea = React.forwardRef(
9 | ({ className, ...props }, ref) => {
10 | return (
11 |
19 | );
20 | }
21 | );
22 | Textarea.displayName = "Textarea";
23 |
24 | export { Textarea };
25 |
--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { Cross2Icon } from "@radix-ui/react-icons";
5 | import * as ToastPrimitives from "@radix-ui/react-toast";
6 | import { cva, type VariantProps } from "class-variance-authority";
7 |
8 | import { cn } from "@/lib/utils";
9 |
10 | const ToastProvider = ToastPrimitives.Provider;
11 |
12 | const ToastViewport = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, ...props }, ref) => (
16 |
24 | ));
25 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
26 |
27 | const toastVariants = cva(
28 | "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
29 | {
30 | variants: {
31 | variant: {
32 | default: "border bg-background text-foreground",
33 | destructive:
34 | "destructive group border-destructive bg-destructive text-destructive-foreground",
35 | },
36 | },
37 | defaultVariants: {
38 | variant: "default",
39 | },
40 | }
41 | );
42 |
43 | const Toast = React.forwardRef<
44 | React.ElementRef,
45 | React.ComponentPropsWithoutRef &
46 | VariantProps
47 | >(({ className, variant, ...props }, ref) => {
48 | return (
49 |
54 | );
55 | });
56 | Toast.displayName = ToastPrimitives.Root.displayName;
57 |
58 | const ToastAction = React.forwardRef<
59 | React.ElementRef,
60 | React.ComponentPropsWithoutRef
61 | >(({ className, ...props }, ref) => (
62 |
70 | ));
71 | ToastAction.displayName = ToastPrimitives.Action.displayName;
72 |
73 | const ToastClose = React.forwardRef<
74 | React.ElementRef,
75 | React.ComponentPropsWithoutRef
76 | >(({ className, ...props }, ref) => (
77 |
86 |
87 |
88 | ));
89 | ToastClose.displayName = ToastPrimitives.Close.displayName;
90 |
91 | const ToastTitle = React.forwardRef<
92 | React.ElementRef,
93 | React.ComponentPropsWithoutRef
94 | >(({ className, ...props }, ref) => (
95 |
100 | ));
101 | ToastTitle.displayName = ToastPrimitives.Title.displayName;
102 |
103 | const ToastDescription = React.forwardRef<
104 | React.ElementRef,
105 | React.ComponentPropsWithoutRef
106 | >(({ className, ...props }, ref) => (
107 |
112 | ));
113 | ToastDescription.displayName = ToastPrimitives.Description.displayName;
114 |
115 | type ToastProps = React.ComponentPropsWithoutRef;
116 |
117 | type ToastActionElement = React.ReactElement;
118 |
119 | export {
120 | type ToastProps,
121 | type ToastActionElement,
122 | ToastProvider,
123 | ToastViewport,
124 | Toast,
125 | ToastTitle,
126 | ToastDescription,
127 | ToastClose,
128 | ToastAction,
129 | };
130 |
--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useToast } from "@/hooks/use-toast";
4 | import {
5 | Toast,
6 | ToastClose,
7 | ToastDescription,
8 | ToastProvider,
9 | ToastTitle,
10 | ToastViewport,
11 | } from "@/components/ui/toast";
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast();
15 |
16 | return (
17 |
18 | {toasts.map(function ({ id, title, description, action, ...props }) {
19 | return (
20 |
21 |
22 | {title && {title}}
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
29 |
30 | );
31 | })}
32 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | const TooltipProvider = TooltipPrimitive.Provider;
9 |
10 | const Tooltip = TooltipPrimitive.Root;
11 |
12 | const TooltipTrigger = TooltipPrimitive.Trigger;
13 |
14 | const TooltipContent = React.forwardRef<
15 | React.ElementRef,
16 | React.ComponentPropsWithoutRef
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |
19 |
28 |
29 | ));
30 | TooltipContent.displayName = TooltipPrimitive.Content.displayName;
31 |
32 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
33 |
--------------------------------------------------------------------------------
/src/hooks/use-mobile.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | const MOBILE_BREAKPOINT = 768;
4 |
5 | export function useIsMobile() {
6 | const [isMobile, setIsMobile] = React.useState(
7 | undefined
8 | );
9 |
10 | React.useEffect(() => {
11 | try {
12 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
13 | const onChange = () => {
14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
15 | };
16 | mql.addEventListener("change", onChange);
17 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
18 | return () => mql.removeEventListener("change", onChange);
19 | } catch (e) {
20 | console.error("Error setting isMobile", e);
21 | }
22 | }, []);
23 |
24 | return !!isMobile;
25 | }
26 |
--------------------------------------------------------------------------------
/src/hooks/use-toast.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | // Inspired by react-hot-toast library
4 | import * as React from "react";
5 |
6 | import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
7 |
8 | const TOAST_LIMIT = 1;
9 | const TOAST_REMOVE_DELAY = 1000000;
10 |
11 | type ToasterToast = ToastProps & {
12 | id: string;
13 | title?: React.ReactNode;
14 | description?: React.ReactNode;
15 | action?: ToastActionElement;
16 | };
17 |
18 | const UNUSED_actionTypes = {
19 | ADD_TOAST: "ADD_TOAST",
20 | UPDATE_TOAST: "UPDATE_TOAST",
21 | DISMISS_TOAST: "DISMISS_TOAST",
22 | REMOVE_TOAST: "REMOVE_TOAST",
23 | } as const;
24 |
25 | let count = 0;
26 |
27 | function genId() {
28 | count = (count + 1) % Number.MAX_SAFE_INTEGER;
29 | return count.toString();
30 | }
31 |
32 | type ActionType = typeof UNUSED_actionTypes;
33 |
34 | type Action =
35 | | {
36 | type: ActionType["ADD_TOAST"];
37 | toast: ToasterToast;
38 | }
39 | | {
40 | type: ActionType["UPDATE_TOAST"];
41 | toast: Partial;
42 | }
43 | | {
44 | type: ActionType["DISMISS_TOAST"];
45 | toastId?: ToasterToast["id"];
46 | }
47 | | {
48 | type: ActionType["REMOVE_TOAST"];
49 | toastId?: ToasterToast["id"];
50 | };
51 |
52 | interface State {
53 | toasts: ToasterToast[];
54 | }
55 |
56 | const toastTimeouts = new Map>();
57 |
58 | const addToRemoveQueue = (toastId: string) => {
59 | if (toastTimeouts.has(toastId)) {
60 | return;
61 | }
62 |
63 | const timeout = setTimeout(() => {
64 | toastTimeouts.delete(toastId);
65 | dispatch({
66 | type: "REMOVE_TOAST",
67 | toastId: toastId,
68 | });
69 | }, TOAST_REMOVE_DELAY);
70 |
71 | toastTimeouts.set(toastId, timeout);
72 | };
73 |
74 | export const reducer = (state: State, action: Action): State => {
75 | switch (action.type) {
76 | case "ADD_TOAST":
77 | return {
78 | ...state,
79 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
80 | };
81 |
82 | case "UPDATE_TOAST":
83 | return {
84 | ...state,
85 | toasts: state.toasts.map((t) =>
86 | t.id === action.toast.id ? { ...t, ...action.toast } : t
87 | ),
88 | };
89 |
90 | case "DISMISS_TOAST": {
91 | const { toastId } = action;
92 |
93 | // ! Side effects ! - This could be extracted into a dismissToast() action,
94 | // but I'll keep it here for simplicity
95 | if (toastId) {
96 | addToRemoveQueue(toastId);
97 | } else {
98 | state.toasts.forEach((toast) => {
99 | addToRemoveQueue(toast.id);
100 | });
101 | }
102 |
103 | return {
104 | ...state,
105 | toasts: state.toasts.map((t) =>
106 | t.id === toastId || toastId === undefined
107 | ? {
108 | ...t,
109 | open: false,
110 | }
111 | : t
112 | ),
113 | };
114 | }
115 | case "REMOVE_TOAST":
116 | if (action.toastId === undefined) {
117 | return {
118 | ...state,
119 | toasts: [],
120 | };
121 | }
122 | return {
123 | ...state,
124 | toasts: state.toasts.filter((t) => t.id !== action.toastId),
125 | };
126 | }
127 | };
128 |
129 | const listeners: Array<(state: State) => void> = [];
130 |
131 | let memoryState: State = { toasts: [] };
132 |
133 | function dispatch(action: Action) {
134 | memoryState = reducer(memoryState, action);
135 | listeners.forEach((listener) => {
136 | listener(memoryState);
137 | });
138 | }
139 |
140 | type Toast = Omit;
141 | export type ToastInput = Toast;
142 |
143 | function toast({ ...props }: Toast) {
144 | const id = genId();
145 |
146 | const update = (props: ToasterToast) =>
147 | dispatch({
148 | type: "UPDATE_TOAST",
149 | toast: { ...props, id },
150 | });
151 | const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
152 |
153 | dispatch({
154 | type: "ADD_TOAST",
155 | toast: {
156 | ...props,
157 | id,
158 | open: true,
159 | onOpenChange: (open) => {
160 | if (!open) dismiss();
161 | },
162 | },
163 | });
164 |
165 | return {
166 | id: id,
167 | dismiss,
168 | update,
169 | };
170 | }
171 |
172 | function useToast() {
173 | const [state, setState] = React.useState(memoryState);
174 |
175 | React.useEffect(() => {
176 | listeners.push(setState);
177 | return () => {
178 | const index = listeners.indexOf(setState);
179 | if (index > -1) {
180 | listeners.splice(index, 1);
181 | }
182 | };
183 | }, [state]);
184 |
185 | return {
186 | ...state,
187 | toast,
188 | dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
189 | };
190 | }
191 |
192 | export { useToast, toast };
193 |
--------------------------------------------------------------------------------
/src/lib/client.ts:
--------------------------------------------------------------------------------
1 | import { Client } from "@langchain/langgraph-sdk";
2 |
3 | export const createClient = ({
4 | deploymentUrl,
5 | langchainApiKey,
6 | }: {
7 | deploymentUrl: string;
8 | langchainApiKey: string | undefined;
9 | }) => {
10 | return new Client({
11 | apiUrl: deploymentUrl,
12 | defaultHeaders: {
13 | ...(langchainApiKey && { "x-api-key": langchainApiKey }),
14 | },
15 | });
16 | };
17 |
--------------------------------------------------------------------------------
/src/lib/convert_messages.ts:
--------------------------------------------------------------------------------
1 | import {
2 | useExternalMessageConverter,
3 | ThreadMessageLike,
4 | ToolCallContentPart,
5 | } from "@assistant-ui/react";
6 | import { AIMessage, BaseMessage, ToolMessage } from "@langchain/core/messages";
7 |
8 | // Not exposed by `@assistant-ui/react` package, but is
9 | // the required return type for this callback function.
10 | type Message =
11 | | ThreadMessageLike
12 | | {
13 | role: "tool";
14 | toolCallId: string;
15 | toolName?: string | undefined;
16 | result: any;
17 | };
18 |
19 | export const getMessageType = (message: Record): string => {
20 | if ("getType" in message && typeof message.getType === "function") {
21 | return message.getType();
22 | } else if ("_getType" in message && typeof message._getType === "function") {
23 | return message._getType();
24 | } else if ("type" in message) {
25 | return message.type as string;
26 | } else {
27 | throw new Error("Unsupported message type");
28 | }
29 | };
30 |
31 | export const convertLangchainMessages: useExternalMessageConverter.Callback<
32 | BaseMessage
33 | > = (message): Message | Message[] => {
34 | if (typeof message?.content !== "string") {
35 | throw new Error("Only text messages are supported");
36 | }
37 |
38 | switch (getMessageType(message)) {
39 | case "system":
40 | return {
41 | role: "system",
42 | id: message.id,
43 | content: [{ type: "text", text: message.content }],
44 | };
45 | case "human":
46 | return {
47 | role: "user",
48 | id: message.id,
49 | content: [{ type: "text", text: message.content }],
50 | };
51 | case "ai":
52 | const aiMsg = message as AIMessage;
53 | const toolCallsContent: ToolCallContentPart[] = aiMsg.tool_calls?.length
54 | ? aiMsg.tool_calls.map((tc) => ({
55 | type: "tool-call" as const,
56 | toolCallId: tc.id ?? "",
57 | toolName: tc.name,
58 | args: tc.args,
59 | argsText: JSON.stringify(tc.args),
60 | }))
61 | : [];
62 | return {
63 | role: "assistant",
64 | id: message.id,
65 | content: [
66 | ...toolCallsContent,
67 | {
68 | type: "text",
69 | text: message.content,
70 | },
71 | ],
72 | };
73 | case "tool":
74 | return {
75 | role: "tool",
76 | toolName: message.name,
77 | toolCallId: (message as ToolMessage).tool_call_id,
78 | result: message.content,
79 | };
80 | default:
81 | throw new Error(`Unsupported message type: ${getMessageType(message)}`);
82 | }
83 | };
84 |
85 | export function convertToOpenAIFormat(message: BaseMessage) {
86 | if (typeof message?.content !== "string") {
87 | throw new Error("Only text messages are supported");
88 | }
89 | switch (getMessageType(message)) {
90 | case "system":
91 | return {
92 | role: "system",
93 | content: message.content,
94 | };
95 | case "human":
96 | return {
97 | role: "user",
98 | content: message.content,
99 | };
100 | case "ai":
101 | return {
102 | role: "assistant",
103 | content: message.content,
104 | };
105 | case "tool":
106 | return {
107 | role: "tool",
108 | toolName: message.name,
109 | result: message.content,
110 | };
111 | default:
112 | throw new Error(`Unsupported message type: ${getMessageType(message)}`);
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/src/lib/cookies.ts:
--------------------------------------------------------------------------------
1 | import Cookies from "js-cookie";
2 |
3 | export const getCookie = (name: string): string | undefined => {
4 | if (typeof window === "undefined") {
5 | return undefined;
6 | }
7 | return Cookies.get(name);
8 | };
9 |
10 | export const setCookie = (
11 | name: string,
12 | value: string,
13 | options?: Cookies.CookieAttributes
14 | ): void => {
15 | if (typeof window === "undefined") {
16 | return;
17 | }
18 | Cookies.set(name, value, {
19 | expires: 365, // Default to 1 year expiration
20 | ...(options || {}),
21 | });
22 | };
23 |
24 | export const removeCookie = (name: string): void => {
25 | if (typeof window === "undefined") {
26 | return;
27 | }
28 | Cookies.remove(name);
29 | };
30 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | const config: Config = {
4 | darkMode: ["class"],
5 | content: [
6 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
8 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
9 | ],
10 | theme: {
11 | extend: {
12 | keyframes: {
13 | 'gradient-xy-enhanced': {
14 | '0%, 100%': {
15 | 'background-size': '400% 400%',
16 | 'background-position': 'left center',
17 | transform: 'rotate(-3deg)'
18 | },
19 | '50%': {
20 | 'background-size': '200% 200%',
21 | 'background-position': 'right center',
22 | transform: 'rotate(3deg)'
23 | }
24 | },
25 | 'gradient-x': {
26 | '0%, 100%': {
27 | 'background-size': '200% 200%',
28 | 'background-position': 'left center'
29 | },
30 | '50%': {
31 | 'background-size': '200% 200%',
32 | 'background-position': 'right center'
33 | }
34 | }
35 | },
36 | animation: {
37 | 'gradient-xy-enhanced': 'gradient-xy-enhanced 15s ease infinite',
38 | 'gradient-x': 'gradient-x 3s ease-in-out infinite'
39 | },
40 | backgroundImage: {
41 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
42 | 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
43 | },
44 | borderRadius: {
45 | lg: 'var(--radius)',
46 | md: 'calc(var(--radius) - 2px)',
47 | sm: 'calc(var(--radius) - 4px)'
48 | },
49 | colors: {
50 | background: 'hsl(var(--background))',
51 | foreground: 'hsl(var(--foreground))',
52 | card: {
53 | DEFAULT: 'hsl(var(--card))',
54 | foreground: 'hsl(var(--card-foreground))'
55 | },
56 | popover: {
57 | DEFAULT: 'hsl(var(--popover))',
58 | foreground: 'hsl(var(--popover-foreground))'
59 | },
60 | primary: {
61 | DEFAULT: 'hsl(var(--primary))',
62 | foreground: 'hsl(var(--primary-foreground))'
63 | },
64 | secondary: {
65 | DEFAULT: 'hsl(var(--secondary))',
66 | foreground: 'hsl(var(--secondary-foreground))'
67 | },
68 | muted: {
69 | DEFAULT: 'hsl(var(--muted))',
70 | foreground: 'hsl(var(--muted-foreground))'
71 | },
72 | accent: {
73 | DEFAULT: 'hsl(var(--accent))',
74 | foreground: 'hsl(var(--accent-foreground))'
75 | },
76 | destructive: {
77 | DEFAULT: 'hsl(var(--destructive))',
78 | foreground: 'hsl(var(--destructive-foreground))'
79 | },
80 | border: 'hsl(var(--border))',
81 | input: 'hsl(var(--input))',
82 | ring: 'hsl(var(--ring))',
83 | chart: {
84 | '1': 'hsl(var(--chart-1))',
85 | '2': 'hsl(var(--chart-2))',
86 | '3': 'hsl(var(--chart-3))',
87 | '4': 'hsl(var(--chart-4))',
88 | '5': 'hsl(var(--chart-5))'
89 | },
90 | sidebar: {
91 | DEFAULT: 'hsl(var(--sidebar-background))',
92 | foreground: 'hsl(var(--sidebar-foreground))',
93 | primary: 'hsl(var(--sidebar-primary))',
94 | 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
95 | accent: 'hsl(var(--sidebar-accent))',
96 | 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
97 | border: 'hsl(var(--sidebar-border))',
98 | ring: 'hsl(var(--sidebar-ring))'
99 | }
100 | },
101 | fontFamily: {
102 | mono: [
103 | `"Fira Code"`,
104 | `ui-monospace`,
105 | `SFMono-Regular`,
106 | `Menlo`,
107 | `Monaco`,
108 | `Consolas`,
109 | `"Liberation Mono"`,
110 | `"Courier New"`,
111 | `monospace`,
112 | ],
113 | sans: [
114 | "Inter",
115 | "-apple-system",
116 | "BlinkMacSystemFont",
117 | 'Segoe UI',
118 | "Roboto",
119 | "Helvetica",
120 | "Arial",
121 | "sans-serif",
122 | 'Apple Color Emoji',
123 | 'Segoe UI Emoji',
124 | 'Segoe UI Symbol',
125 | ],
126 | },
127 | letterSpacing: {
128 | tighter: '-0.04em'
129 | }
130 | }
131 | },
132 | plugins: [
133 | require("tailwind-scrollbar-hide"),
134 | require("tailwindcss-animate"),
135 | require("@assistant-ui/react/tailwindcss")({
136 | components: ["thread"],
137 | }),
138 | require('tailwind-scrollbar'),
139 | ],
140 | };
141 | export default config;
142 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "plugins": [
16 | {
17 | "name": "next"
18 | }
19 | ],
20 | "paths": {
21 | "@/*": ["./src/*"]
22 | }
23 | },
24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/hooks/use-threads", "src/app/thread/[threadId]"],
25 | "exclude": ["node_modules"]
26 | }
27 |
--------------------------------------------------------------------------------
|