├── .env.example
├── .eslintrc.json
├── app
    ├── favicon.ico
    └── (preview)
    │   ├── uncut-sans.woff2
    │   ├── twitter-image.png
    │   ├── opengraph-image.png
    │   ├── layout.tsx
    │   ├── api
    │       └── chat
    │       │   └── route.ts
    │   ├── globals.css
    │   └── page.tsx
├── public
    ├── tv.png
    ├── iphone.png
    └── watch.png
├── next.config.mjs
├── postcss.config.mjs
├── .gitignore
├── LICENSE.txt
├── tsconfig.json
├── components
    ├── use-scroll-to-bottom.ts
    ├── data.ts
    ├── orders.tsx
    ├── message.tsx
    ├── tracker.tsx
    └── icons.tsx
├── package.json
├── README.md
└── tailwind.config.ts


/.env.example:
--------------------------------------------------------------------------------
1 | OPENAI_API_KEY=sk-****


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-roundtrips/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/public/tv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-roundtrips/HEAD/public/tv.png


--------------------------------------------------------------------------------
/public/iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-roundtrips/HEAD/public/iphone.png


--------------------------------------------------------------------------------
/public/watch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-roundtrips/HEAD/public/watch.png


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/app/(preview)/uncut-sans.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-roundtrips/HEAD/app/(preview)/uncut-sans.woff2


--------------------------------------------------------------------------------
/app/(preview)/twitter-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-roundtrips/HEAD/app/(preview)/twitter-image.png


--------------------------------------------------------------------------------
/app/(preview)/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-roundtrips/HEAD/app/(preview)/opengraph-image.png


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright 2024 Vercel, Inc.
 2 | 
 3 | Licensed under the Apache License, Version 2.0 (the "License");
 4 | you may not use this file except in compliance with the License.
 5 | You may obtain a copy of the License at
 6 | 
 7 |     http://www.apache.org/licenses/LICENSE-2.0
 8 | 
 9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
14 | 


--------------------------------------------------------------------------------
/app/(preview)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import "./globals.css";
 2 | import { Metadata } from "next";
 3 | import { Toaster } from "sonner";
 4 | 
 5 | export const metadata: Metadata = {
 6 |   metadataBase: new URL("https://ai-sdk-preview-roundtrips.vercel.app"),
 7 |   title: "Automatic Multiple Tool Steps Preview",
 8 |   description: "Automatically handle multiple tool steps using the AI SDK",
 9 | };
10 | 
11 | export default function RootLayout({
12 |   children,
13 | }: Readonly<{
14 |   children: React.ReactNode;
15 | }>) {
16 |   return (
17 |     <html lang="en">
18 |       <body>
19 |         <Toaster position="top-center" richColors />
20 |         {children}
21 |       </body>
22 |     </html>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/components/use-scroll-to-bottom.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, RefObject } from "react";
 2 | 
 3 | export function useScrollToBottom<T extends HTMLElement>(): [
 4 |   RefObject<T>,
 5 |   RefObject<T>,
 6 | ] {
 7 |   const containerRef = useRef<T>(null);
 8 |   const endRef = useRef<T>(null);
 9 | 
10 |   useEffect(() => {
11 |     const container = containerRef.current;
12 |     const end = endRef.current;
13 | 
14 |     if (container && end) {
15 |       const observer = new MutationObserver(() => {
16 |         end.scrollIntoView({ behavior: "smooth" });
17 |       });
18 | 
19 |       observer.observe(container, {
20 |         childList: true,
21 |         subtree: true,
22 |       });
23 | 
24 |       return () => observer.disconnect();
25 |     }
26 |   }, []);
27 | 
28 |   return [containerRef, endRef];
29 | }
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ai-sdk-preview-roundtrips",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@ai-sdk/openai": "^1.0.10",
13 |     "@vercel/analytics": "^1.3.1",
14 |     "@vercel/kv": "^2.0.0",
15 |     "ai": "^4.0.21",
16 |     "d3-scale": "^4.0.2",
17 |     "date-fns": "^3.6.0",
18 |     "framer-motion": "^11.3.19",
19 |     "next": "14.2.5",
20 |     "react": "^18",
21 |     "react-dom": "^18",
22 |     "react-use": "^17.5.1",
23 |     "sonner": "^1.5.0",
24 |     "streamdown": "^1.6.7",
25 |     "tailwindcss-animate": "^1.0.7",
26 |     "zod": "^3.23.8"
27 |   },
28 |   "devDependencies": {
29 |     "@types/d3-scale": "^4.0.8",
30 |     "@types/node": "^20",
31 |     "@types/react": "^18",
32 |     "@types/react-dom": "^18",
33 |     "eslint": "^8",
34 |     "eslint-config-next": "14.2.5",
35 |     "postcss": "^8",
36 |     "tailwindcss": "^3.4.1",
37 |     "typescript": "^5"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/components/data.ts:
--------------------------------------------------------------------------------
 1 | export interface Order {
 2 |   id: string;
 3 |   name: string;
 4 |   orderedAt: string;
 5 |   image: string;
 6 | }
 7 | 
 8 | export const ORDERS: Order[] = [
 9 |   {
10 |     id: "412093",
11 |     name: "Apple Watch Ultra 2",
12 |     orderedAt: "2024-08-26",
13 |     image: "watch.png",
14 |   },
15 |   {
16 |     id: "539182",
17 |     name: "Apple TV",
18 |     orderedAt: "2024-08-25",
19 |     image: "tv.png",
20 |   },
21 |   {
22 |     id: "281958",
23 |     name: "Apple iPhone 14 Pro",
24 |     orderedAt: "2024-08-24",
25 |     image: "iphone.png",
26 |   },
27 | ];
28 | 
29 | export interface TrackingInformation {
30 |   orderId: string;
31 |   progress: "Shipped" | "Out for Delivery" | "Delivered";
32 |   description: string;
33 | }
34 | 
35 | export const TRACKING_INFORMATION = [
36 |   {
37 |     orderId: "412093",
38 |     progress: "Shipped",
39 |     description: "Last Updated Today 4:31 PM",
40 |   },
41 |   {
42 |     orderId: "281958",
43 |     progress: "Out for Delivery",
44 |     description: "ETA Today 5:45 PM",
45 |   },
46 |   {
47 |     orderId: "539182",
48 |     progress: "Delivered",
49 |     description: "Front Porch Today 3:16 PM",
50 |   },
51 | ];
52 | 
53 | export const getOrders = () => {
54 |   return ORDERS;
55 | };
56 | 
57 | export const getTrackingInformation = ({ orderId }: { orderId: string }) => {
58 |   return TRACKING_INFORMATION.find((info) => info.orderId === orderId);
59 | };
60 | 


--------------------------------------------------------------------------------
/app/(preview)/api/chat/route.ts:
--------------------------------------------------------------------------------
 1 | import { getOrders, getTrackingInformation, ORDERS } from "@/components/data";
 2 | import { openai } from "@ai-sdk/openai";
 3 | import { streamText } from "ai";
 4 | import { z } from "zod";
 5 | 
 6 | export async function POST(request: Request) {
 7 |   const { messages } = await request.json();
 8 | 
 9 |   const stream = streamText({
10 |     model: openai("gpt-4o"),
11 |     system: `\
12 |       - you are a friendly package tracking assistant
13 |       - your responses are concise
14 |       - you do not ever use lists, tables, or bullet points; instead, you provide a single response
15 |     `,
16 |     messages,
17 |     maxSteps: 5,
18 |     tools: {
19 |       listOrders: {
20 |         description: "list all orders",
21 |         parameters: z.object({}),
22 |         execute: async function ({}) {
23 |           const orders = getOrders();
24 |           return orders;
25 |         },
26 |       },
27 |       viewTrackingInformation: {
28 |         description: "view tracking information for a specific order",
29 |         parameters: z.object({
30 |           orderId: z.string(),
31 |         }),
32 |         execute: async function ({ orderId }) {
33 |           const trackingInformation = getTrackingInformation({ orderId });
34 |           await new Promise((resolve) => setTimeout(resolve, 500));
35 |           return trackingInformation;
36 |         },
37 |       },
38 |     },
39 |   });
40 | 
41 |   return stream.toDataStreamResponse();
42 | }
43 | 


--------------------------------------------------------------------------------
/components/orders.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { motion } from "framer-motion";
 4 | import { InvoiceIcon } from "./icons";
 5 | import Image from "next/image";
 6 | import { format } from "date-fns";
 7 | 
 8 | export const Orders = ({ orders }: { orders: any[] }) => {
 9 |   return (
10 |     <div className="flex flex-col gap-4 md:max-w-[452px] max-w-[calc(100dvw-80px)] w-full">
11 |       {orders.map((order, index) => (
12 |         <motion.div
13 |           className="flex flex-row gap-4 items-center"
14 |           key={order.id}
15 |           initial={{ opacity: 0, y: 10 }}
16 |           animate={{ opacity: 1, y: 0 }}
17 |           transition={{ delay: 0.05 * index }}
18 |         >
19 |           <div className="size-12 bg-zinc-200 flex-shrink-0 rounded-lg">
20 |             <Image
21 |               src={`/${order.image}`}
22 |               alt={order.name}
23 |               width={48}
24 |               height={48}
25 |               className="w-12 h-12 rounded-lg"
26 |             />
27 |           </div>
28 | 
29 |           <div className="flex flex-row justify-between w-full">
30 |             <div className="flex flex-col gap-1">
31 |               <div className="text-sm">{order.name}</div>
32 |               <div className="text-sm text-zinc-500 dark:text-zinc-400">
33 |                 Ordered {format(new Date(order.orderedAt), "dd LLL, yyyy")}
34 |               </div>
35 |             </div>
36 | 
37 |             <div className="flex flex-col flex-start">
38 |               <div className="flex flex-row gap-2 items-center">
39 |                 <div className="text-zinc-400">
40 |                   <InvoiceIcon size={14} />
41 |                 </div>
42 |                 <div className="text-sm text-zinc-500 dark:text-zinc-400">
43 |                   {order.id}
44 |                 </div>
45 |               </div>
46 |             </div>
47 |           </div>
48 |         </motion.div>
49 |       ))}
50 |     </div>
51 |   );
52 | };
53 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Automatic Multiple Tool Steps Preview
 2 | 
 3 | This example demonstrates how to use the [Vercel AI SDK](https://sdk.vercel.ai/docs) with [Next.js](https://nextjs.org/) and the `streamText` function to automatically handle multiple tool steps.
 4 | 
 5 | ## Deploy your own
 6 | 
 7 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-preview-roundtrips&env=OPENAI_API_KEY&envDescription=API%20keys%20needed%20for%20application&envLink=platform.openai.com)
 8 | 
 9 | ## How to use
10 | 
11 | Run [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
12 | 
13 | ```bash
14 | npx create-next-app --example https://github.com/vercel-labs/ai-sdk-preview-roundtrips ai-sdk-preview-roundtrips-example
15 | ```
16 | 
17 | ```bash
18 | yarn create next-app --example https://github.com/vercel-labs/ai-sdk-preview-roundtrips ai-sdk-preview-roundtrips-example
19 | ```
20 | 
21 | ```bash
22 | pnpm create next-app --example https://github.com/vercel-labs/ai-sdk-preview-roundtrips ai-sdk-preview-roundtrips-example
23 | ```
24 | 
25 | To run the example locally you need to:
26 | 
27 | 1. Sign up for accounts with the AI providers you want to use (e.g., OpenAI, Anthropic).
28 | 2. Obtain API keys for each provider.
29 | 3. Set the required environment variables as shown in the `.env.example` file, but in a new file called `.env`.
30 | 4. `npm install` to install the required dependencies.
31 | 5. `npm run dev` to launch the development server.
32 | 
33 | 
34 | ## Learn More
35 | 
36 | To learn more about Vercel AI SDK or Next.js take a look at the following resources:
37 | 
38 | - [Vercel AI SDK docs](https://sdk.vercel.ai/docs)
39 | - [Vercel AI Playground](https://play.vercel.ai)
40 | - [Next.js Documentation](https://nextjs.org/docs)
41 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | import { fontFamily } from "tailwindcss/defaultTheme";
 3 | import animate from "tailwindcss-animate";
 4 | 
 5 | const config: Config = {
 6 |   content: [
 7 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 9 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
10 |     "./node_modules/streamdown/dist/*.js",
11 |   ],
12 |   theme: {
13 |     container: {
14 |       center: true,
15 |       padding: "2rem",
16 |       screens: {
17 |         "2xl": "1400px",
18 |       },
19 |     },
20 |     extend: {
21 |       colors: {
22 |         border: "hsl(var(--border))",
23 |         input: "hsl(var(--input))",
24 |         ring: "hsl(var(--ring))",
25 |         background: "hsl(var(--background))",
26 |         foreground: "hsl(var(--foreground))",
27 |         primary: {
28 |           DEFAULT: "hsl(var(--primary))",
29 |           foreground: "hsl(var(--primary-foreground))",
30 |         },
31 |         secondary: {
32 |           DEFAULT: "hsl(var(--secondary))",
33 |           foreground: "hsl(var(--secondary-foreground))",
34 |         },
35 |         destructive: {
36 |           DEFAULT: "hsl(var(--destructive))",
37 |           foreground: "hsl(var(--destructive-foreground))",
38 |         },
39 |         muted: {
40 |           DEFAULT: "hsl(var(--muted))",
41 |           foreground: "hsl(var(--muted-foreground))",
42 |         },
43 |         accent: {
44 |           DEFAULT: "hsl(var(--accent))",
45 |           foreground: "hsl(var(--accent-foreground))",
46 |         },
47 |         popover: {
48 |           DEFAULT: "hsl(var(--popover))",
49 |           foreground: "hsl(var(--popover-foreground))",
50 |         },
51 |         card: {
52 |           DEFAULT: "hsl(var(--card))",
53 |           foreground: "hsl(var(--card-foreground))",
54 |         },
55 |       },
56 |       borderRadius: {
57 |         lg: `var(--radius)`,
58 |         md: `calc(var(--radius) - 2px)`,
59 |         sm: "calc(var(--radius) - 4px)",
60 |       },
61 |       fontFamily: {
62 |         sans: ["var(--font-sans)", ...fontFamily.sans],
63 |       },
64 |       keyframes: {
65 |         "accordion-down": {
66 |           from: { height: "0" },
67 |           to: { height: "var(--radix-accordion-content-height)" },
68 |         },
69 |         "accordion-up": {
70 |           from: { height: "var(--radix-accordion-content-height)" },
71 |           to: { height: "0" },
72 |         },
73 |       },
74 |       animation: {
75 |         "accordion-down": "accordion-down 0.2s ease-out",
76 |         "accordion-up": "accordion-up 0.2s ease-out",
77 |       },
78 |       backgroundImage: {
79 |         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
80 |         "gradient-conic":
81 |           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
82 |       },
83 |     },
84 |   },
85 |   plugins: [animate],
86 | };
87 | export default config;
88 | 


--------------------------------------------------------------------------------
/app/(preview)/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer base {
  6 |     :root {
  7 |         --background: 0 0% 100%;
  8 |         --foreground: 0 0% 3.9%;
  9 | 
 10 |         --card: 0 0% 100%;
 11 |         --card-foreground: 0 0% 3.9%;
 12 | 
 13 |         --popover: 0 0% 100%;
 14 |         --popover-foreground: 0 0% 3.9%;
 15 | 
 16 |         --primary: 0 0% 9%;
 17 |         --primary-foreground: 0 0% 98%;
 18 | 
 19 |         --secondary: 0 0% 96.1%;
 20 |         --secondary-foreground: 0 0% 9%;
 21 | 
 22 |         --muted: 0 0% 96.1%;
 23 |         --muted-foreground: 0 0% 45.1%;
 24 | 
 25 |         --accent: 0 0% 96.1%;
 26 |         --accent-foreground: 0 0% 9%;
 27 | 
 28 |         --destructive: 0 84.2% 60.2%;
 29 |         --destructive-foreground: 0 0% 98%;
 30 | 
 31 |         --border: 0 0% 89.8%;
 32 |         --input: 0 0% 89.8%;
 33 |         --ring: 0 0% 3.9%;
 34 | 
 35 |         --radius: 0.5rem;
 36 |     }
 37 | 
 38 |     .dark {
 39 |         --background: 0 0% 3.9%;
 40 |         --foreground: 0 0% 98%;
 41 | 
 42 |         --card: 0 0% 3.9%;
 43 |         --card-foreground: 0 0% 98%;
 44 | 
 45 |         --popover: 0 0% 3.9%;
 46 |         --popover-foreground: 0 0% 98%;
 47 | 
 48 |         --primary: 0 0% 98%;
 49 |         --primary-foreground: 0 0% 9%;
 50 | 
 51 |         --secondary: 0 0% 14.9%;
 52 |         --secondary-foreground: 0 0% 98%;
 53 | 
 54 |         --muted: 0 0% 14.9%;
 55 |         --muted-foreground: 0 0% 63.9%;
 56 | 
 57 |         --accent: 0 0% 14.9%;
 58 |         --accent-foreground: 0 0% 98%;
 59 | 
 60 |         --destructive: 0 62.8% 30.6%;
 61 |         --destructive-foreground: 0 0% 98%;
 62 | 
 63 |         --border: 0 0% 14.9%;
 64 |         --input: 0 0% 14.9%;
 65 |         --ring: 0 0% 83.1%;
 66 |     }
 67 | }
 68 | 
 69 | @layer base {
 70 |     * {
 71 |         @apply border-border;
 72 |     }
 73 |     body {
 74 |         @apply bg-background text-foreground;
 75 |     }
 76 | }
 77 | 
 78 | :root {
 79 |     --foreground-rgb: 0, 0, 0;
 80 |     --background-start-rgb: 214, 219, 220;
 81 |     --background-end-rgb: 255, 255, 255;
 82 | }
 83 | 
 84 | @font-face {
 85 |     font-family: "uncut sans";
 86 |     src: url("./uncut-sans.woff2") format("woff2");
 87 | }
 88 | 
 89 | * {
 90 |     font-family: "uncut sans", sans-serif;
 91 | }
 92 | 
 93 | @media (prefers-color-scheme: dark) {
 94 |     :root {
 95 |         --foreground-rgb: 255, 255, 255;
 96 |         --background-start-rgb: 0, 0, 0;
 97 |         --background-end-rgb: 0, 0, 0;
 98 |     }
 99 | }
100 | 
101 | body {
102 |     color: rgb(var(--foreground-rgb));
103 |     background: linear-gradient(
104 |             to bottom,
105 |             transparent,
106 |             rgb(var(--background-end-rgb))
107 |         )
108 |         rgb(var(--background-start-rgb));
109 | }
110 | 
111 | @layer utilities {
112 |     .text-balance {
113 |         text-wrap: balance;
114 |     }
115 | }
116 | 


--------------------------------------------------------------------------------
/components/message.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { motion } from "framer-motion";
 4 | import { BotIcon, UserIcon } from "./icons";
 5 | import { ReactNode } from "react";
 6 | import { StreamableValue, useStreamableValue } from "ai/rsc";
 7 | import { Streamdown } from "streamdown";
 8 | import { ToolInvocation } from "ai";
 9 | import { Orders } from "./orders";
10 | import { Tracker } from "./tracker";
11 | 
12 | export const TextStreamMessage = ({
13 |   content,
14 | }: {
15 |   content: StreamableValue;
16 | }) => {
17 |   const [text] = useStreamableValue(content);
18 | 
19 |   return (
20 |     <motion.div
21 |       className={`flex flex-row gap-4 px-4 w-full md:w-[500px] md:px-0 first-of-type:pt-20`}
22 |       initial={{ y: 5, opacity: 0 }}
23 |       animate={{ y: 0, opacity: 1 }}
24 |     >
25 |       <div className="size-[24px] flex flex-col justify-center items-center flex-shrink-0 text-zinc-400">
26 |         <BotIcon />
27 |       </div>
28 | 
29 |       <div className="flex flex-col gap-1 w-full">
30 |         <div className="text-zinc-800 dark:text-zinc-300 flex flex-col gap-4">
31 |           <Streamdown>{text}</Streamdown>
32 |         </div>
33 |       </div>
34 |     </motion.div>
35 |   );
36 | };
37 | 
38 | export const Message = ({
39 |   role,
40 |   content,
41 |   toolInvocations,
42 | }: {
43 |   role: string;
44 |   content: string | ReactNode;
45 |   toolInvocations: Array<ToolInvocation> | undefined;
46 | }) => {
47 |   return (
48 |     <motion.div
49 |       className={`flex flex-row gap-4 px-4 w-full md:w-[500px] md:px-0 first-of-type:pt-20`}
50 |       initial={{ y: 5, opacity: 0 }}
51 |       animate={{ y: 0, opacity: 1 }}
52 |     >
53 |       <div className="size-[24px] flex flex-col justify-center items-center flex-shrink-0 text-zinc-400">
54 |         {role === "assistant" ? <BotIcon /> : <UserIcon />}
55 |       </div>
56 | 
57 |       <div className="flex flex-col gap-6 w-full">
58 |         {content && (
59 |           <div className="text-zinc-800 dark:text-zinc-300 flex flex-col gap-4">
60 |             <Streamdown>{content as string}</Streamdown>
61 |           </div>
62 |         )}
63 | 
64 |         {toolInvocations && (
65 |           <div className="flex flex-col gap-4">
66 |             {toolInvocations.map((toolInvocation) => {
67 |               const { toolName, toolCallId, state } = toolInvocation;
68 | 
69 |               if (state === "result") {
70 |                 const { result } = toolInvocation;
71 | 
72 |                 return (
73 |                   <div key={toolCallId}>
74 |                     {toolName === "listOrders" ? (
75 |                       <Orders orders={result} />
76 |                     ) : toolName === "viewTrackingInformation" ? (
77 |                       <div key={toolCallId}>
78 |                         <Tracker trackingInformation={result} />
79 |                       </div>
80 |                     ) : null}
81 |                   </div>
82 |                 );
83 |               }
84 |             })}
85 |           </div>
86 |         )}
87 |       </div>
88 |     </motion.div>
89 |   );
90 | };
91 | 


--------------------------------------------------------------------------------
/app/(preview)/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useRef } from "react";
  4 | import { Message } from "@/components/message";
  5 | import { useScrollToBottom } from "@/components/use-scroll-to-bottom";
  6 | import { motion } from "framer-motion";
  7 | import { MasonryIcon, VercelIcon } from "@/components/icons";
  8 | import Link from "next/link";
  9 | import { useChat } from "ai/react";
 10 | 
 11 | export default function Home() {
 12 |   const { messages, handleSubmit, input, setInput, append } = useChat();
 13 | 
 14 |   const inputRef = useRef<HTMLInputElement>(null);
 15 |   const [messagesContainerRef, messagesEndRef] =
 16 |     useScrollToBottom<HTMLDivElement>();
 17 | 
 18 |   const suggestedActions = [
 19 |     {
 20 |       title: "Where is",
 21 |       label: "my watch?",
 22 |       action: "where is my watch?",
 23 |     },
 24 |     {
 25 |       title: "What orders",
 26 |       label: "have shipped?",
 27 |       action: "what orders have shipped?",
 28 |     },
 29 |   ];
 30 | 
 31 |   return (
 32 |     <div className="flex flex-row justify-center pb-20 h-dvh bg-white dark:bg-zinc-900">
 33 |       <div className="flex flex-col justify-between gap-4">
 34 |         <div
 35 |           ref={messagesContainerRef}
 36 |           className="flex flex-col gap-6 h-full w-dvw items-center overflow-y-scroll"
 37 |         >
 38 |           {messages.length === 0 && (
 39 |             <motion.div className="h-[350px] px-4 w-full md:w-[500px] md:px-0 pt-20">
 40 |               <div className="border rounded-lg p-6 flex flex-col gap-4 text-zinc-500 text-sm dark:text-zinc-400 dark:border-zinc-700">
 41 |                 <p className="flex flex-row justify-center gap-4 items-center text-zinc-900 dark:text-zinc-50">
 42 |                   <VercelIcon size={16} />
 43 |                   <span>+</span>
 44 |                   <MasonryIcon />
 45 |                 </p>
 46 |                 <p>
 47 |                   The maxSteps parameter of streamText function allows you to
 48 |                   automatically handle multiple tool calls in sequence using the
 49 |                   AI SDK in your application.
 50 |                 </p>
 51 |                 <p>
 52 |                   {" "}
 53 |                   Learn more about{" "}
 54 |                   <Link
 55 |                     className="text-blue-500 dark:text-blue-400"
 56 |                     href="https://sdk.vercel.ai/docs/ai-sdk-core/tools-and-tool-calling#multi-step-calls"
 57 |                     target="_blank"
 58 |                   >
 59 |                     Multiple Tool Steps{" "}
 60 |                   </Link>
 61 |                   from the Vercel AI SDK.
 62 |                 </p>
 63 |               </div>
 64 |             </motion.div>
 65 |           )}
 66 | 
 67 |           {messages.map((message) => (
 68 |             <Message
 69 |               key={message.id}
 70 |               role={message.role}
 71 |               content={message.content}
 72 |               toolInvocations={message.toolInvocations}
 73 |             ></Message>
 74 |           ))}
 75 |           <div ref={messagesEndRef} />
 76 |         </div>
 77 | 
 78 |         <div className="grid sm:grid-cols-2 gap-2 w-full px-4 md:px-0 mx-auto md:max-w-[500px] mb-4">
 79 |           {messages.length === 0 &&
 80 |             suggestedActions.map((suggestedAction, index) => (
 81 |               <motion.div
 82 |                 initial={{ opacity: 0, y: 20 }}
 83 |                 animate={{ opacity: 1, y: 0 }}
 84 |                 transition={{ delay: 0.05 * index }}
 85 |                 key={index}
 86 |                 className={index > 1 ? "hidden sm:block" : "block"}
 87 |               >
 88 |                 <button
 89 |                   onClick={async () => {
 90 |                     append({
 91 |                       role: "user",
 92 |                       content: suggestedAction.action,
 93 |                     });
 94 |                   }}
 95 |                   className="w-full text-left border border-zinc-200 dark:border-zinc-800 text-zinc-800 dark:text-zinc-300 rounded-lg p-2 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors flex flex-col"
 96 |                 >
 97 |                   <span className="font-medium">{suggestedAction.title}</span>
 98 |                   <span className="text-zinc-500 dark:text-zinc-400">
 99 |                     {suggestedAction.label}
100 |                   </span>
101 |                 </button>
102 |               </motion.div>
103 |             ))}
104 |         </div>
105 | 
106 |         <form
107 |           className="flex flex-col gap-2 relative items-center"
108 |           onSubmit={handleSubmit}
109 |         >
110 |           <input
111 |             ref={inputRef}
112 |             className="bg-zinc-100 rounded-md px-2 py-1.5 w-full outline-none dark:bg-zinc-700 text-zinc-800 dark:text-zinc-300 md:max-w-[500px] max-w-[calc(100dvw-32px)]"
113 |             placeholder="Send a message..."
114 |             value={input}
115 |             onChange={(event) => {
116 |               setInput(event.target.value);
117 |             }}
118 |           />
119 |         </form>
120 |       </div>
121 |     </div>
122 |   );
123 | }
124 | 


--------------------------------------------------------------------------------
/components/tracker.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { TrackingInformation } from "./data";
  4 | import { BoxIcon, GPSIcon, HomeIcon, InvoiceIcon } from "./icons";
  5 | import { motion } from "framer-motion";
  6 | 
  7 | const getColorFromProgress = ({
  8 |   progress,
  9 |   type,
 10 | }: {
 11 |   progress: string;
 12 |   type: "foreground" | "text";
 13 | }) => {
 14 |   switch (progress) {
 15 |     case "Shipped":
 16 |       return type === "foreground" ? "#a1a1aa" : "#fafafa";
 17 |     case "Out for Delivery":
 18 |       return type === "foreground" ? "#3b82f6" : "#eff6ff";
 19 |     case "Delivered":
 20 |       return type === "foreground" ? "#10b981" : "#f0fdf4";
 21 |     default:
 22 |       return type === "foreground" ? "#f4f4f5" : "#71717a";
 23 |   }
 24 | };
 25 | 
 26 | export const Tracker = ({
 27 |   trackingInformation,
 28 | }: {
 29 |   trackingInformation: TrackingInformation;
 30 | }) => {
 31 |   const { progress } = trackingInformation;
 32 | 
 33 |   return (
 34 |     <div className="my-4 flex flex-col gap-6 md:max-w-[452px] max-w-[calc(100dvw-80px)] w-full justify-between">
 35 |       <motion.div
 36 |         className="flex flex-col justify-between items-center"
 37 |         initial={{ opacity: 0 }}
 38 |         animate={{ opacity: 1 }}
 39 |         transition={{ delay: 0.0 }}
 40 |       >
 41 |         <div className="flex flex-row gap-2 items-center text-sm text-zinc-500 dark:text-zinc-400">
 42 |           <div>Tracking Order</div>
 43 |           <InvoiceIcon size={14} />
 44 |           <div>{trackingInformation.orderId}</div>
 45 |         </div>
 46 |       </motion.div>
 47 | 
 48 |       <motion.div
 49 |         className="flex flex-row items-center gap-2"
 50 |         initial={{ opacity: 0 }}
 51 |         animate={{ opacity: 1 }}
 52 |         transition={{ delay: 0.1 }}
 53 |       >
 54 |         <motion.div
 55 |           className="size-8 text-blue-50 rounded-full flex-shrink-0 flex flex-row justify-center items-center"
 56 |           initial={{ background: "#f4f4f5" }}
 57 |           animate={{
 58 |             background: getColorFromProgress({
 59 |               progress,
 60 |               type: "foreground",
 61 |             }),
 62 |             color: getColorFromProgress({
 63 |               progress,
 64 |               type: "text",
 65 |             }),
 66 |           }}
 67 |           transition={{ delay: 0.2 }}
 68 |         >
 69 |           <BoxIcon size={14} />
 70 |         </motion.div>
 71 |         <div className="h-2 bg-zinc-100 w-full rounded-lg relative dark:bg-zinc-700">
 72 |           <motion.div
 73 |             className="h-2 rounded-lg z-10 absolute"
 74 |             initial={{ width: 0, background: "#f4f4f5" }}
 75 |             animate={{
 76 |               width:
 77 |                 progress === "Delivered"
 78 |                   ? "100%"
 79 |                   : progress === "Out for Delivery"
 80 |                     ? "100%"
 81 |                     : progress === "Shipped"
 82 |                       ? "34%"
 83 |                       : "0%",
 84 |               background: getColorFromProgress({
 85 |                 progress,
 86 |                 type: "foreground",
 87 |               }),
 88 |             }}
 89 |             transition={{ delay: 0.3 }}
 90 |           />
 91 |         </div>
 92 | 
 93 |         <motion.div
 94 |           className="size-8 text-blue-50 rounded-full flex-shrink-0 flex flex-row justify-center items-center"
 95 |           initial={{ background: "#f4f4f5" }}
 96 |           animate={{
 97 |             background:
 98 |               progress === "Shipped"
 99 |                 ? "#f4f4f5"
100 |                 : getColorFromProgress({
101 |                     progress,
102 |                     type: "foreground",
103 |                   }),
104 |             color:
105 |               progress === "Shipped"
106 |                 ? "#71717a"
107 |                 : getColorFromProgress({
108 |                     progress,
109 |                     type: "text",
110 |                   }),
111 |           }}
112 |           transition={{ delay: 0.4 }}
113 |         >
114 |           <span style={{ transform: "translateX(-1.25px) translateY(1px)" }}>
115 |             <GPSIcon size={14} />
116 |           </span>
117 |         </motion.div>
118 | 
119 |         <div className="h-2 bg-zinc-100 w-full rounded-lg relative dark:bg-zinc-700">
120 |           <motion.div
121 |             className="h-2 rounded-lg z-10 absolute"
122 |             initial={{ width: 0, background: "#f4f4f5" }}
123 |             animate={{
124 |               width:
125 |                 progress === "Delivered"
126 |                   ? "100%"
127 |                   : progress === "Out for Delivery"
128 |                     ? "71%"
129 |                     : "0%",
130 |               background: getColorFromProgress({
131 |                 progress,
132 |                 type: "foreground",
133 |               }),
134 |             }}
135 |             transition={{ delay: 0.5 }}
136 |           />
137 |         </div>
138 |         <motion.div
139 |           className="size-8 bg-zinc-100 text-zinc-500 dark:text-zinc-400 rounded-full flex-shrink-0 flex flex-row justify-center items-center"
140 |           initial={{
141 |             background: "#f4f4f5",
142 |             color: "#71717a",
143 |           }}
144 |           transition={{ delay: 0.5 }}
145 |           animate={{
146 |             background: ["Out for Delivery", "Shipped"].includes(progress)
147 |               ? "#f4f4f5"
148 |               : getColorFromProgress({
149 |                   progress,
150 |                   type: "foreground",
151 |                 }),
152 |             color: ["Out for Delivery", "Shipped"].includes(progress)
153 |               ? "#71717a"
154 |               : getColorFromProgress({
155 |                   progress,
156 |                   type: "text",
157 |                 }),
158 |           }}
159 |         >
160 |           <HomeIcon size={14} />
161 |         </motion.div>
162 |       </motion.div>
163 | 
164 |       <motion.div
165 |         className="flex flex-col justify-between items-center gap-1"
166 |         initial={{ opacity: 0 }}
167 |         animate={{ opacity: 1 }}
168 |         transition={{ delay: 0.6 }}
169 |       >
170 |         <div className="text-sm">{progress}</div>
171 |         <div className="text-sm text-zinc-500 dark:text-zinc-400">
172 |           {trackingInformation.description}
173 |         </div>
174 |       </motion.div>
175 |     </div>
176 |   );
177 | };
178 | 


--------------------------------------------------------------------------------
/components/icons.tsx:
--------------------------------------------------------------------------------
  1 | export const BotIcon = () => {
  2 |   return (
  3 |     <svg
  4 |       height="16"
  5 |       strokeLinejoin="round"
  6 |       viewBox="0 0 16 16"
  7 |       width="16"
  8 |       style={{ color: "currentcolor" }}
  9 |     >
 10 |       <path
 11 |         fillRule="evenodd"
 12 |         clipRule="evenodd"
 13 |         d="M8.75 2.79933C9.19835 2.53997 9.5 2.05521 9.5 1.5C9.5 0.671573 8.82843 0 8 0C7.17157 0 6.5 0.671573 6.5 1.5C6.5 2.05521 6.80165 2.53997 7.25 2.79933V5H7C4.027 5 1.55904 7.16229 1.08296 10H0V13H1V14.5V16H2.5H13.5H15V14.5V13H16V10H14.917C14.441 7.16229 11.973 5 9 5H8.75V2.79933ZM7 6.5C4.51472 6.5 2.5 8.51472 2.5 11V14.5H13.5V11C13.5 8.51472 11.4853 6.5 9 6.5H7ZM7.25 11.25C7.25 12.2165 6.4665 13 5.5 13C4.5335 13 3.75 12.2165 3.75 11.25C3.75 10.2835 4.5335 9.5 5.5 9.5C6.4665 9.5 7.25 10.2835 7.25 11.25ZM10.5 13C11.4665 13 12.25 12.2165 12.25 11.25C12.25 10.2835 11.4665 9.5 10.5 9.5C9.5335 9.5 8.75 10.2835 8.75 11.25C8.75 12.2165 9.5335 13 10.5 13Z"
 14 |         fill="currentColor"
 15 |       ></path>
 16 |     </svg>
 17 |   );
 18 | };
 19 | 
 20 | export const UserIcon = () => {
 21 |   return (
 22 |     <svg
 23 |       data-testid="geist-icon"
 24 |       height="16"
 25 |       strokeLinejoin="round"
 26 |       viewBox="0 0 16 16"
 27 |       width="16"
 28 |       style={{ color: "currentcolor" }}
 29 |     >
 30 |       <path
 31 |         fillRule="evenodd"
 32 |         clipRule="evenodd"
 33 |         d="M7.75 0C5.95507 0 4.5 1.45507 4.5 3.25V3.75C4.5 5.54493 5.95507 7 7.75 7H8.25C10.0449 7 11.5 5.54493 11.5 3.75V3.25C11.5 1.45507 10.0449 0 8.25 0H7.75ZM6 3.25C6 2.2835 6.7835 1.5 7.75 1.5H8.25C9.2165 1.5 10 2.2835 10 3.25V3.75C10 4.7165 9.2165 5.5 8.25 5.5H7.75C6.7835 5.5 6 4.7165 6 3.75V3.25ZM2.5 14.5V13.1709C3.31958 11.5377 4.99308 10.5 6.82945 10.5H9.17055C11.0069 10.5 12.6804 11.5377 13.5 13.1709V14.5H2.5ZM6.82945 9C4.35483 9 2.10604 10.4388 1.06903 12.6857L1 12.8353V13V15.25V16H1.75H14.25H15V15.25V13V12.8353L14.931 12.6857C13.894 10.4388 11.6452 9 9.17055 9H6.82945Z"
 34 |         fill="currentColor"
 35 |       ></path>
 36 |     </svg>
 37 |   );
 38 | };
 39 | 
 40 | export const AttachmentIcon = () => {
 41 |   return (
 42 |     <svg
 43 |       height="16"
 44 |       strokeLinejoin="round"
 45 |       viewBox="0 0 16 16"
 46 |       width="16"
 47 |       style={{ color: "currentcolor" }}
 48 |     >
 49 |       <path
 50 |         fillRule="evenodd"
 51 |         clipRule="evenodd"
 52 |         d="M14.5 6.5V13.5C14.5 14.8807 13.3807 16 12 16H4C2.61929 16 1.5 14.8807 1.5 13.5V1.5V0H3H8H9.08579C9.351 0 9.60536 0.105357 9.79289 0.292893L14.2071 4.70711C14.3946 4.89464 14.5 5.149 14.5 5.41421V6.5ZM13 6.5V13.5C13 14.0523 12.5523 14.5 12 14.5H4C3.44772 14.5 3 14.0523 3 13.5V1.5H8V5V6.5H9.5H13ZM9.5 2.12132V5H12.3787L9.5 2.12132Z"
 53 |         fill="currentColor"
 54 |       ></path>
 55 |     </svg>
 56 |   );
 57 | };
 58 | 
 59 | export const VercelIcon = ({ size = 17 }) => {
 60 |   return (
 61 |     <svg
 62 |       height={size}
 63 |       strokeLinejoin="round"
 64 |       viewBox="0 0 16 16"
 65 |       width={size}
 66 |       style={{ color: "currentcolor" }}
 67 |     >
 68 |       <path
 69 |         fillRule="evenodd"
 70 |         clipRule="evenodd"
 71 |         d="M8 1L16 15H0L8 1Z"
 72 |         fill="currentColor"
 73 |       ></path>
 74 |     </svg>
 75 |   );
 76 | };
 77 | 
 78 | export const MasonryIcon = () => {
 79 |   return (
 80 |     <svg
 81 |       height="16"
 82 |       strokeLinejoin="round"
 83 |       viewBox="0 0 16 16"
 84 |       width="16"
 85 |       style={{ color: "currentcolor" }}
 86 |     >
 87 |       <path
 88 |         fillRule="evenodd"
 89 |         clipRule="evenodd"
 90 |         d="M2.5 6.5V2.5H5.5V6.5H2.5ZM1 2C1 1.44772 1.44772 1 2 1H6C6.55228 1 7 1.44772 7 2V7C7 7.55228 6.55228 8 6 8H2C1.44772 8 1 7.55228 1 7V2ZM2.5 13.5V11.5H5.5V13.5H2.5ZM1 11C1 10.4477 1.44772 10 2 10H6C6.55228 10 7 10.4477 7 11V14C7 14.5523 6.55228 15 6 15H2C1.44772 15 1 14.5523 1 14V11ZM10.5 2.5V4.5H13.5V2.5H10.5ZM10 1C9.44772 1 9 1.44772 9 2V5C9 5.55228 9.44772 6 10 6H14C14.5523 6 15 5.55228 15 5V2C15 1.44772 14.5523 1 14 1H10ZM13.5 13.5H10.5V9.5H13.5V13.5ZM9 9C9 8.44772 9.44772 8 10 8H14C14.5523 8 15 8.44772 15 9V14C15 14.5523 14.5523 15 14 15H10C9.44772 15 9 14.5523 9 14V9Z"
 91 |         fill="currentColor"
 92 |       ></path>
 93 |     </svg>
 94 |   );
 95 | };
 96 | 
 97 | export const GitIcon = () => {
 98 |   return (
 99 |     <svg
100 |       height="16"
101 |       strokeLinejoin="round"
102 |       viewBox="0 0 16 16"
103 |       width="16"
104 |       style={{ color: "currentcolor" }}
105 |     >
106 |       <g clipPath="url(#clip0_872_3147)">
107 |         <path
108 |           fillRule="evenodd"
109 |           clipRule="evenodd"
110 |           d="M8 0C3.58 0 0 3.57879 0 7.99729C0 11.5361 2.29 14.5251 5.47 15.5847C5.87 15.6547 6.02 15.4148 6.02 15.2049C6.02 15.0149 6.01 14.3851 6.01 13.7154C4 14.0852 3.48 13.2255 3.32 12.7757C3.23 12.5458 2.84 11.836 2.5 11.6461C2.22 11.4961 1.82 11.1262 2.49 11.1162C3.12 11.1062 3.57 11.696 3.72 11.936C4.44 13.1455 5.59 12.8057 6.05 12.5957C6.12 12.0759 6.33 11.726 6.56 11.5261C4.78 11.3262 2.92 10.6364 2.92 7.57743C2.92 6.70773 3.23 5.98797 3.74 5.42816C3.66 5.22823 3.38 4.40851 3.82 3.30888C3.82 3.30888 4.49 3.09895 6.02 4.1286C6.66 3.94866 7.34 3.85869 8.02 3.85869C8.7 3.85869 9.38 3.94866 10.02 4.1286C11.55 3.08895 12.22 3.30888 12.22 3.30888C12.66 4.40851 12.38 5.22823 12.3 5.42816C12.81 5.98797 13.12 6.69773 13.12 7.57743C13.12 10.6464 11.25 11.3262 9.47 11.5261C9.76 11.776 10.01 12.2558 10.01 13.0056C10.01 14.0752 10 14.9349 10 15.2049C10 15.4148 10.15 15.6647 10.55 15.5847C12.1381 15.0488 13.5182 14.0284 14.4958 12.6673C15.4735 11.3062 15.9996 9.67293 16 7.99729C16 3.57879 12.42 0 8 0Z"
111 |           fill="currentColor"
112 |         ></path>
113 |       </g>
114 |       <defs>
115 |         <clipPath id="clip0_872_3147">
116 |           <rect width="16" height="16" fill="white"></rect>
117 |         </clipPath>
118 |       </defs>
119 |     </svg>
120 |   );
121 | };
122 | 
123 | export const BoxIcon = ({ size = 16 }: { size: number }) => {
124 |   return (
125 |     <svg
126 |       height={size}
127 |       strokeLinejoin="round"
128 |       viewBox="0 0 16 16"
129 |       width={size}
130 |       style={{ color: "currentcolor" }}
131 |     >
132 |       <path
133 |         fillRule="evenodd"
134 |         clipRule="evenodd"
135 |         d="M8 0.154663L8.34601 0.334591L14.596 3.58459L15 3.79466V4.25V11.75V12.2053L14.596 12.4154L8.34601 15.6654L8 15.8453L7.65399 15.6654L1.40399 12.4154L1 12.2053V11.75V4.25V3.79466L1.40399 3.58459L7.65399 0.334591L8 0.154663ZM2.5 11.2947V5.44058L7.25 7.81559V13.7647L2.5 11.2947ZM8.75 13.7647L13.5 11.2947V5.44056L8.75 7.81556V13.7647ZM8 1.84534L12.5766 4.22519L7.99998 6.51352L3.42335 4.2252L8 1.84534Z"
136 |         fill="currentColor"
137 |       ></path>
138 |     </svg>
139 |   );
140 | };
141 | 
142 | export const HomeIcon = ({ size = 16 }: { size: number }) => {
143 |   return (
144 |     <svg
145 |       height={size}
146 |       strokeLinejoin="round"
147 |       viewBox="0 0 16 16"
148 |       width={size}
149 |       style={{ color: "currentcolor" }}
150 |     >
151 |       <path
152 |         fillRule="evenodd"
153 |         clipRule="evenodd"
154 |         d="M12.5 6.56062L8.00001 2.06062L3.50001 6.56062V13.5L6.00001 13.5V11C6.00001 9.89539 6.89544 8.99996 8.00001 8.99996C9.10458 8.99996 10 9.89539 10 11V13.5L12.5 13.5V6.56062ZM13.78 5.71933L8.70711 0.646409C8.31659 0.255886 7.68342 0.255883 7.2929 0.646409L2.21987 5.71944C2.21974 5.71957 2.21961 5.7197 2.21949 5.71982L0.469676 7.46963L-0.0606537 7.99996L1.00001 9.06062L1.53034 8.53029L2.00001 8.06062V14.25V15H2.75001L6.00001 15H7.50001H8.50001H10L13.25 15H14V14.25V8.06062L14.4697 8.53029L15 9.06062L16.0607 7.99996L15.5303 7.46963L13.7806 5.71993C13.7804 5.71973 13.7802 5.71953 13.78 5.71933ZM8.50001 11V13.5H7.50001V11C7.50001 10.7238 7.72386 10.5 8.00001 10.5C8.27615 10.5 8.50001 10.7238 8.50001 11Z"
155 |         fill="currentColor"
156 |       ></path>
157 |     </svg>
158 |   );
159 | };
160 | 
161 | export const GPSIcon = ({ size = 16 }: { size: number }) => {
162 |   return (
163 |     <svg
164 |       height={size}
165 |       strokeLinejoin="round"
166 |       viewBox="0 0 16 16"
167 |       width={size}
168 |       style={{ color: "currentcolor" }}
169 |     >
170 |       <path
171 |         d="M1 6L15 1L10 15L7.65955 8.91482C7.55797 8.65073 7.34927 8.44203 7.08518 8.34045L1 6Z"
172 |         stroke="currentColor"
173 |         strokeWidth="1.5"
174 |         strokeLinecap="round"
175 |         strokeLinejoin="bevel"
176 |         fill="transparent"
177 |       ></path>
178 |     </svg>
179 |   );
180 | };
181 | 
182 | export const InvoiceIcon = ({ size = 16 }: { size: number }) => {
183 |   return (
184 |     <svg
185 |       height={size}
186 |       strokeLinejoin="round"
187 |       viewBox="0 0 16 16"
188 |       width={size}
189 |       style={{ color: "currentcolor" }}
190 |     >
191 |       <path
192 |         fillRule="evenodd"
193 |         clipRule="evenodd"
194 |         d="M13 15.1L12 14.5L10.1524 15.8857C10.0621 15.9534 9.93791 15.9534 9.8476 15.8857L8 14.5L6.14377 15.8922C6.05761 15.9568 5.94008 15.9601 5.85047 15.9003L3.75 14.5L3 15L2.83257 15.1116L1.83633 15.7758L1.68656 15.8756C1.60682 15.9288 1.5 15.8716 1.5 15.7758V15.5958V14.3985V14.1972V1.5V0H3H8H9.08579C9.351 0 9.60536 0.105357 9.79289 0.292893L14.2071 4.70711C14.3946 4.89464 14.5 5.149 14.5 5.41421V6.5V14.2507V14.411V15.5881V15.7881C14.5 15.8813 14.3982 15.9389 14.3183 15.891L14.1468 15.7881L13.1375 15.1825L13 15.1ZM12.3787 5L9.5 2.12132V5H12.3787ZM8 1.5V5V6.5H9.5H13V13.3507L12.7717 13.2138L11.9069 12.6948L11.1 13.3L10 14.125L8.9 13.3L8 12.625L7.1 13.3L5.94902 14.1632L4.58205 13.2519L3.75 12.6972L3 13.1972V1.5H8Z"
195 |         fill="currentColor"
196 |       ></path>
197 |     </svg>
198 |   );
199 | };
200 | 


--------------------------------------------------------------------------------