diff --git a/src/components/assistant-ui/markdown-text.tsx b/src/components/assistant-ui/markdown-text.tsx
new file mode 100644
index 0000000..4dbdce1
--- /dev/null
+++ b/src/components/assistant-ui/markdown-text.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import "@assistant-ui/react-markdown/styles/dot.css";
+
+import {
+ CodeHeaderProps,
+ MarkdownTextPrimitive,
+ unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
+ useIsMarkdownCodeBlock,
+} from "@assistant-ui/react-markdown";
+import remarkGfm from "remark-gfm";
+import { FC, memo, useState } from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { cn } from "@/lib/utils";
+
+const MarkdownTextImpl = () => {
+ return (
+
+ );
+};
+
+export const MarkdownText = memo(MarkdownTextImpl);
+
+const CodeHeader: FC
= ({ language, code }) => {
+ const { isCopied, copyToClipboard } = useCopyToClipboard();
+ const onCopy = () => {
+ if (!code || isCopied) return;
+ copyToClipboard(code);
+ };
+
+ return (
+
+ {language}
+
+ {!isCopied && }
+ {isCopied && }
+
+
+ );
+};
+
+const useCopyToClipboard = ({
+ copiedDuration = 3000,
+}: {
+ copiedDuration?: number;
+} = {}) => {
+ const [isCopied, setIsCopied] = useState(false);
+
+ const copyToClipboard = (value: string) => {
+ if (!value) return;
+
+ navigator.clipboard.writeText(value).then(() => {
+ setIsCopied(true);
+ setTimeout(() => setIsCopied(false), copiedDuration);
+ });
+ };
+
+ return { isCopied, copyToClipboard };
+};
+
+const defaultComponents = memoizeMarkdownComponents({
+ h1: ({ className, ...props }) => (
+
+ ),
+ h2: ({ className, ...props }) => (
+
+ ),
+ h3: ({ className, ...props }) => (
+
+ ),
+ h4: ({ className, ...props }) => (
+
+ ),
+ h5: ({ className, ...props }) => (
+
+ ),
+ h6: ({ className, ...props }) => (
+
+ ),
+ p: ({ className, ...props }) => (
+
+ ),
+ a: ({ className, ...props }) => (
+
+ ),
+ blockquote: ({ className, ...props }) => (
+
+ ),
+ ul: ({ className, ...props }) => (
+ li]:mt-2", className)} {...props} />
+ ),
+ ol: ({ className, ...props }) => (
+ li]:mt-2", className)} {...props} />
+ ),
+ hr: ({ className, ...props }) => (
+
+ ),
+ table: ({ className, ...props }) => (
+
+ ),
+ th: ({ className, ...props }) => (
+ |
+ ),
+ td: ({ className, ...props }) => (
+ |
+ ),
+ tr: ({ className, ...props }) => (
+ td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg", className)} {...props} />
+ ),
+ sup: ({ className, ...props }) => (
+ a]:text-xs [&>a]:no-underline", className)} {...props} />
+ ),
+ pre: ({ className, ...props }) => (
+
+ ),
+ code: function Code({ className, ...props }) {
+ const isCodeBlock = useIsMarkdownCodeBlock();
+ return (
+
+
+
+
+
+
+ );
+};
+
+const ThreadScrollToBottom: FC = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+const ThreadWelcome: FC = () => {
+ return (
+
+
+
+
+ C
+
+
+ How can I help you today?
+
+
+
+
+
+
+ What is the weather in Tokyo?
+
+
+
+
+ What is assistant-ui?
+
+
+
+ );
+};
+
+const Composer: FC = () => {
+ return (
+
+
+
+
+ );
+};
+
+const ComposerAction: FC = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const UserMessage: FC = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const UserActionBar: FC = () => {
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+const EditComposer: FC = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const AssistantMessage: FC = () => {
+ return (
+
+
+ A
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const AssistantActionBar: FC = () => {
+ return (
+
+ {/*
+
+
+
+
+
+
+
+
+
+
+
+
+ */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const BranchPicker: FC = ({
+ className,
+ ...rest
+}) => {
+ return (
+
+
+
+
+
+
+
+ /
+
+
+
+
+
+
+
+ );
+};
+
+const CircleStopIcon = () => {
+ return (
+
+ );
+};
diff --git a/src/components/assistant-ui/tooltip-icon-button.tsx b/src/components/assistant-ui/tooltip-icon-button.tsx
new file mode 100644
index 0000000..7a09c3b
--- /dev/null
+++ b/src/components/assistant-ui/tooltip-icon-button.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { forwardRef } from "react";
+
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Button, ButtonProps } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export type TooltipIconButtonProps = ButtonProps & {
+ tooltip: string;
+ side?: "top" | "bottom" | "left" | "right";
+};
+
+export const TooltipIconButton = forwardRef<
+ HTMLButtonElement,
+ TooltipIconButtonProps
+>(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
+ return (
+
+
+
+
+
+ {tooltip}
+
+
+ );
+});
+
+TooltipIconButton.displayName = "TooltipIconButton";
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..991f56e
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..65d4fcd
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-8",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return (
+
+ )
+ }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..218d183
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/index.css b/src/index.css
index e69de29..043f6df 100644
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,67 @@
+@import "tailwindcss/preflight";
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 0 0% 3.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 0 0% 3.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 0 0% 3.9%;
+ --primary: 0 0% 9%;
+ --primary-foreground: 0 0% 98%;
+ --secondary: 0 0% 96.1%;
+ --secondary-foreground: 0 0% 9%;
+ --muted: 0 0% 96.1%;
+ --muted-foreground: 0 0% 45.1%;
+ --accent: 0 0% 96.1%;
+ --accent-foreground: 0 0% 9%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 0 0% 89.8%;
+ --input: 0 0% 89.8%;
+ --ring: 0 0% 3.9%;
+ --chart-1: 12 76% 61%;
+ --chart-2: 173 58% 39%;
+ --chart-3: 197 37% 24%;
+ --chart-4: 43 74% 66%;
+ --chart-5: 27 87% 67%;
+ --radius: 0.5rem
+ }
+ .dark {
+ --background: 0 0% 3.9%;
+ --foreground: 0 0% 98%;
+ --card: 0 0% 3.9%;
+ --card-foreground: 0 0% 98%;
+ --popover: 0 0% 3.9%;
+ --popover-foreground: 0 0% 98%;
+ --primary: 0 0% 98%;
+ --primary-foreground: 0 0% 9%;
+ --secondary: 0 0% 14.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 0 0% 14.9%;
+ --muted-foreground: 0 0% 63.9%;
+ --accent: 0 0% 14.9%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 0 0% 14.9%;
+ --input: 0 0% 14.9%;
+ --ring: 0 0% 83.1%;
+ --chart-1: 220 70% 50%;
+ --chart-2: 160 60% 45%;
+ --chart-3: 30 80% 55%;
+ --chart-4: 280 65% 60%;
+ --chart-5: 340 75% 55%
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/src/main.tsx b/src/main.tsx
index c983b84..b6f086c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,10 @@
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
+import { RuntimeProvider } from "./providers/Runtime.tsx";
-createRoot(document.getElementById("root")!).render();
+createRoot(document.getElementById("root")!).render((
+
+
+
+));
diff --git a/src/providers/Runtime.tsx b/src/providers/Runtime.tsx
new file mode 100644
index 0000000..6c3e67f
--- /dev/null
+++ b/src/providers/Runtime.tsx
@@ -0,0 +1,93 @@
+import { useState, ReactNode } from "react";
+import {
+ useExternalStoreRuntime,
+ ThreadMessageLike,
+ AppendMessage,
+ AssistantRuntimeProvider,
+} from "@assistant-ui/react";
+import { Message } from "@langchain/langgraph-sdk";
+
+function langChainRoleToAssistantRole(role: Message["type"]): "system" | "assistant" | "user" {
+ if (role === "ai") return "assistant";
+ if (role === "system") return "system";
+ if (["human", "tool", "function"].includes(role)) return "user";
+ throw new Error(`Unknown role: ${role}`);
+}
+
+function langChainContentToAssistantContent(content: Message["content"]): ThreadMessageLike["content"] {
+ if (!content) return [];
+
+ if (typeof content === "string") return content;
+
+ if (typeof content === "object") {
+ if ("text" in content) {
+ return [{
+ type: "text",
+ text: content.text as string,
+ }]
+ }
+
+ if ("thinking" in content) {
+ return [{
+ type: "reasoning",
+ text: content.thinking as string,
+ }]
+ }
+ }
+
+ throw new Error(`Unknown content: ${content}`);
+}
+
+const convertMessage = (message: Message): ThreadMessageLike => {
+ return {
+ role: langChainRoleToAssistantRole(message.type),
+ content: langChainContentToAssistantContent(message.content),
+ };
+};
+
+async function sleep(ms: number) {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export function RuntimeProvider({
+ children,
+}: Readonly<{
+ children: ReactNode;
+}>) {
+ const [isRunning, setIsRunning] = useState(false);
+ const [messages, setMessages] = useState([]);
+
+ const onNew = async (message: AppendMessage) => {
+ if (message.content[0]?.type !== "text")
+ throw new Error("Only text messages are supported");
+
+ const input = message.content[0].text;
+ setMessages((currentConversation) => [
+ ...currentConversation,
+ { type: "human", content: input },
+ ]);
+
+ setIsRunning(true);
+ // CALL API HERE
+ // const assistantMessage = await backendApi(input);
+ await sleep(2000);
+ setMessages((currentConversation) => [
+ ...currentConversation,
+ { type: "ai", content: [{ type: "text", text: "This is an assistant message" }] },
+ ]);
+ setIsRunning(false);
+ };
+
+ const runtime = useExternalStoreRuntime({
+ isRunning,
+ messages,
+ convertMessage,
+ onNew,
+ });
+
+ return (
+
+ {children}
+
+ );
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..3fc12b0
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,57 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ darkMode: ["class"],
+ content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
+ theme: {
+ extend: {
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)'
+ },
+ colors: {
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))'
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))'
+ },
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))'
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))'
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))'
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))'
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))'
+ },
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ chart: {
+ '1': 'hsl(var(--chart-1))',
+ '2': 'hsl(var(--chart-2))',
+ '3': 'hsl(var(--chart-3))',
+ '4': 'hsl(var(--chart-4))',
+ '5': 'hsl(var(--chart-5))'
+ }
+ }
+ }
+ },
+ plugins: [require("tailwindcss-animate")],
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index e1251b8..03d39fa 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -20,7 +20,11 @@
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
- "noUncheckedSideEffectImports": true
+ "noUncheckedSideEffectImports": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
},
"include": ["src", "agent"]
}
diff --git a/tsconfig.json b/tsconfig.json
index 1ffef60..fec8c8e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,5 +3,11 @@
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
- ]
+ ],
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
}
diff --git a/vite.config.ts b/vite.config.ts
index 8b0f57b..ec03c4c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,13 @@
+import path from "path"
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
})