30 |
32 |
8 |
22 |
23 | );
24 | }
25 |
26 | const styles = {
27 | error: {
28 | fontFamily:
29 | 'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
30 | height: "100vh",
31 | textAlign: "center",
32 | display: "flex",
33 | flexDirection: "column",
34 | alignItems: "center",
35 | justifyContent: "center",
36 | },
37 |
38 | desc: {
39 | display: "inline-block",
40 | },
41 |
42 | h1: {
43 | display: "inline-block",
44 | margin: "0 20px 0 0",
45 | padding: "0 23px 0 0",
46 | fontSize: 24,
47 | fontWeight: 500,
48 | verticalAlign: "top",
49 | lineHeight: "49px",
50 | },
51 |
52 | h2: {
53 | fontSize: 14,
54 | fontWeight: 400,
55 | lineHeight: "49px",
56 | margin: 0,
57 | },
58 | } as const;
59 |
--------------------------------------------------------------------------------
/app/opengraph-image.tsx:
--------------------------------------------------------------------------------
1 | import { ImageResponse } from "@vercel/og";
2 |
3 | export const size = {
4 | width: 1200,
5 | height: 630,
6 | };
7 | export const runtime = "edge";
8 |
9 | export const alt = "AI Driven Insights With Cloudflare D1";
10 |
11 | export default async function og() {
12 | const baseURL =
13 | process.env.NODE_ENV === "development"
14 | ? "http://localhost:3000"
15 | : "https://di1-iyr.pages.dev";
16 |
17 | const logourl = `${baseURL}/logobg.png`;
18 |
19 | return new ImageResponse(
20 | (
21 |
9 |
14 |
21 | 15 | 404 16 |
17 |
18 |
20 | This page could not be found.
19 |
37 | 
47 |
73 | ),
74 | {
75 | width: 1200,
76 | height: 630,
77 | }
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { ChatBar } from "@/components/ChatBar";
2 | import { nanoid } from "@/lib/utils";
3 | import { AI } from "./action";
4 |
5 | export const runtime = "edge";
6 |
7 | export default async function IndexPage() {
8 | const id = nanoid();
9 |
10 | return (
11 | 55 | Di1 56 |
57 |58 | AI Driven Insights With Cloudflare D1 & Vercel AI SDK 59 |
60 | 70 | di1-iyr.pages.dev 71 | 72 |
19 |
21 |
41 |
51 |
77 | ),
78 | {
79 | width: 1200,
80 | height: 630,
81 | }
82 | );
83 | }
84 |
85 | return new ImageResponse(
86 | (
87 | 59 | {"No Chat Found"} .. 60 |
61 |62 | AI Driven Insights With Cloudflare D1 & Vercel AI SDK 63 |
64 | 74 | di1-iyr.pages.dev 75 | 76 |
103 |
113 |
139 | ),
140 | {
141 | width: 1200,
142 | height: 630,
143 | }
144 | );
145 | }
146 |
--------------------------------------------------------------------------------
/app/share/chat/[id]/page.tsx:
--------------------------------------------------------------------------------
1 | import { AI } from "@/app/action";
2 | import { getChat } from "@/app/actions";
3 | import { ChatBar } from "@/components/ChatBar";
4 | import { type Metadata } from "next";
5 | import { redirect } from "next/navigation";
6 |
7 | interface SharePageProps {
8 | params: {
9 | id: string;
10 | };
11 | }
12 | export const dynamicParams = false;
13 | export const runtime = "edge";
14 |
15 | export async function generateMetadata({
16 | params,
17 | }: SharePageProps): Promise121 | {chat.title} .. 122 |
123 |124 | AI Driven Insights With Cloudflare D1 & Vercel AI SDK 125 |
126 | 136 | di1-iyr.pages.dev 137 | 138 |
52 |
54 |
51 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/components/Charts.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { AI, QueryResult } from "@/app/action";
3 | import { Card } from "@tremor/react";
4 |
5 | import { ChartType } from "@/lib/validation";
6 | import {
7 | AreaComp,
8 | BarComp,
9 | BarListComp,
10 | DonutComp,
11 | LineComp,
12 | NumberComp,
13 | ProgressComp,
14 | ScatterComp,
15 | TableComp,
16 | } from "./llm-charts";
17 |
18 | interface ChartProps {
19 | queryResult: QueryResult;
20 | format: ChartType;
21 | title?: string;
22 | description?: string;
23 | timeField?: string;
24 | categories?: string[];
25 | index?: string;
26 | yaxis?: string;
27 | size?: string;
28 | }
29 |
30 | export function Chart({
31 | queryResult,
32 | format,
33 | title,
34 | timeField,
35 | categories = [],
36 | index,
37 | yaxis,
38 | size,
39 | }: ChartProps) {
40 | try {
41 | switch (format) {
42 | case "area":
43 | return (
44 |
62 |
66 |
63 | {format_query}
64 |
65 |
107 |
108 |
112 |
113 | );
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/components/ChatBar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type { AI } from "@/app/action";
4 | import { useEnterSubmit } from "@/lib/hooks/use-enter-submit";
5 | import { useLocalStorage } from "@/lib/hooks/use-local-storage";
6 | import { cn, nanoid } from "@/lib/utils";
7 | import { Message } from "ai";
8 | import { useActions, useUIState } from "ai/rsc";
9 | import { SendHorizontal } from "lucide-react";
10 | import { usePathname } from "next/navigation";
11 | import { Suspense, useEffect, useRef, useState } from "react";
12 | import { toast } from "sonner";
13 | import { ChatMessages } from "./ChatMessages";
14 | import InitialMessages from "./InitialMessages";
15 | import { UserMessage } from "./message";
16 | import { Button } from "./ui/button";
17 | import { IconArrowElbow } from "./ui/icons";
18 |
19 | export interface ChatProps extends React.ComponentProps<"div"> {
20 | id?: string;
21 | isShared?: boolean;
22 | }
23 |
24 | export function ChatBar({ id, isShared }: ChatProps) {
25 | const [input, setInput] = useState("");
26 | const { submitUserMessage } = useActions();
27 | const [messages, setMessages] = useUIState109 | Error rendering chart 110 |
111 |
86 |
170 |
95 |
161 | {messages.length === 0 && (
162 |
168 | )}
169 |
163 | {" "}
164 |
166 | )}
167 |
25 | {message.spinner}
26 | {message.display}
27 | {message.attachments}
28 |
29 | ))
30 | : null}
31 | {!isShared && }
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import React from "react";
3 | import { IconGitHub, IconX } from "./ui/icons";
4 |
5 | export default async function Footer() {
6 | return (
7 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/components/InitialMessages.tsx:
--------------------------------------------------------------------------------
1 | import { AI } from "@/app/action";
2 | import { cn, nanoid } from "@/lib/utils";
3 | import { useActions, useUIState } from "ai/rsc";
4 | import React from "react";
5 | import { UserMessage } from "./message";
6 |
7 | const exampleMessages = [
8 | {
9 | heading: "Number of companies founded over time. Area chart",
10 | subheading: "",
11 | message: `Number of companies founded over time. Area chart`,
12 | },
13 | {
14 | heading:
15 | "Distribution of companies by status (e.g., active, acquired).? Donut chart",
16 | subheading: "",
17 | message:
18 | "Show me Distribution of companies by status (e.g., active, acquired).? Donut chart",
19 | },
20 | {
21 | heading: "Give me Trend of team sizes over years as line chart",
22 | subheading: "",
23 | message: "Give me Trend of team sizes over years as line chart",
24 | },
25 | {
26 | heading:
27 | "Distribution of companies by status (e.g., active, acquired).? Donut chart",
28 | subheading: "",
29 | message: "Show me Team size of each company, listed as 'barlist' chart !",
30 | },
31 | ];
32 |
33 | export default function InitialMessages() {
34 | const [messages, setMessages] = useUIState
39 |
90 | );
91 | }
92 |
--------------------------------------------------------------------------------
/components/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import Link from "next/link";
3 | import logobg from "../lib/assets/logobg.png";
4 | import { Button } from "./ui/button";
5 |
6 | export default async function Navbar() {
7 | return (
8 | 40 | Examples 41 |
42 | {messages.length === 0 && 43 | exampleMessages.map((example, index) => ( 44 | 1 && "hidden md:block"
49 | )}
50 | onClick={async () => {
51 | setMessages((currentMessages) => [
52 | ...currentMessages,
53 | {
54 | id: nanoid(),
55 | display: {example.message} ,
56 | },
57 | ]);
58 |
59 | try {
60 | const responseMessage = await submitUserMessage(
61 | example.message
62 | );
63 |
64 | setMessages((currentMessages) => [
65 | ...currentMessages,
66 | responseMessage,
67 | ]);
68 | } catch {
69 | console.error("Failed to submit message");
70 | }
71 | }}
72 | >
73 |
75 | ))}
76 | {example.heading}
74 | 77 | Check an existing chat 78 |
79 | {
84 | window.location.href = "/chat/NQFtTkt";
85 | }}
86 | >
87 |
89 | Insights on YC companies
88 |
10 |
11 |
19 |
20 |
28 |
29 | 54 | {title} 55 |
56 |
13 |
20 |
16 |
19 |
40 | console.log(v)}
51 | showAnimation={true}
52 | animationDuration={1000}
53 | autoMinValue={true}
54 | />
55 |
56 | 41 | {title} 42 |
43 |
38 | console.log(v)}
49 | sortOrder="descending"
50 | />
51 |
52 | 39 | {title} 40 |
41 |42 | Shows a max of 10 items 43 |
44 |52 | {title} 53 |
54 |40 | {title} 41 |
42 |
43 |
55 | 36 | {title} 37 |
38 |39 | {isNumeric ? `$${parseFloat(value).toFixed(2)}` : value} 40 |
41 |47 | Expected data not found. 48 |
49 |12 | {"xxxxxx"} 13 |
14 |15 | . . . 16 |
17 |39 | {title} 40 |
41 |53 | {title} 54 |
55 |
23 |
24 |
28 |
47 |
48 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/components/llm-charts/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import dynamic from "next/dynamic";
4 | import AreaSkeleton from "./AreaSkeleton";
5 | import NumberSkeleton from "./NumberSkeleton";
6 |
7 | export { Chart } from "@/components/Charts";
8 |
9 | const AreaComp = dynamic(
10 | () => import("./AreaChartComponent").then((mod) => mod.AreaChartComponent),
11 | {
12 | ssr: false,
13 | loading: () => 25 | {title} 26 |
27 |
16 |
23 | );
24 | }
25 |
26 | export function BotMessage({
27 | content,
28 | className,
29 | }: {
30 | content: string | StreamableValue
17 |
19 |
20 | {children}
21 |
22 |
37 |
44 | );
45 | }
46 |
47 | export function BotCard({
48 | children,
49 | showAvatar = true,
50 | }: {
51 | children: React.ReactNode;
52 | showAvatar?: boolean;
53 | }) {
54 | return (
55 |
38 |
40 |
41 | {text}
42 |
43 |
56 |
68 | );
69 | }
70 |
71 | export function SystemMessage({ children }: { children: React.ReactNode }) {
72 | return (
73 |
62 |
64 |
65 | {children}
66 |
67 |
78 |
80 | );
81 | }
82 |
83 | export function SpinnerMessage() {
84 | return (
85 | {children}
79 |
86 |
93 | );
94 | }
95 |
--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 | destructive:
14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 | outline:
16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 | secondary:
18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 | ghost: "hover:bg-accent hover:text-accent-foreground",
20 | link: "text-primary underline-offset-4 hover:underline",
21 | },
22 | size: {
23 | default: "h-10 px-4 py-2",
24 | sm: "h-9 rounded-md px-3",
25 | lg: "h-11 rounded-md px-8",
26 | icon: "h-10 w-10",
27 | },
28 | },
29 | defaultVariants: {
30 | variant: "default",
31 | size: "default",
32 | },
33 | }
34 | )
35 |
36 | export interface ButtonProps
37 | extends React.ButtonHTMLAttributes
87 | 
88 |
89 |
88 |
90 | {spinner}
91 |
92 |