added new Chat with Reasoning - alpha v0.1

package.json

@@ -17,6 +17,7 @@
     "shadcn:add": "pnpm dlx shadcn-ui@latest add"
   },
   "dependencies": {
+    "@ai-sdk/openai": "^0.0.62",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -37,11 +38,13 @@
     "@upstash/ratelimit": "^2.0.1",
     "@upstash/redis": "^1.34.0",
     "@vercel/analytics": "^1.3.1",
+    "ai": "^3.4.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "csv-parse": "^5.5.6",
     "csvtojson": "^2.0.10",
+    "framer-motion": "^11.5.6",
     "geist": "^1.3.1",
     "ioredis": "^5.4.1",
     "next": "^14.2.5",
@@ -57,6 +60,7 @@
     "react-markdown": "^9.0.1",
     "recharts": "^2.12.7",
     "redis": "^4.7.0",
+    "remark-gfm": "^4.0.0",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",

src/app/ChatSelect/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+
+export default function Home() {
+  const chatVersions = [
+    { 
+      title: "Chat Version 1", 
+      link: "/chat",
+      description: "Basic chat with an Assistant who has access to the CSV files and code interpreter."
+    },
+    { 
+      title: "Chat Version 2", 
+      link: "/chat2",
+      description: "Chat with a function call connected to Recharts."
+    },
+    { 
+      title: "Chat Version 3", 
+      link: "/o1",
+      description: "Reasoning with 4.0."
+    },
+  ];
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen py-2">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-4xl px-4">
+        {chatVersions.map((chat, index) => (
+          <Link key={index} href={chat.link}>
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1 * index }}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className="border border-zinc-200 dark:border-zinc-800 rounded-lg p-6 text-center cursor-pointer hover:shadow-lg flex flex-col justify-between h-full transition-transform duration-200"
+            >
+              <div>
+                <div className="text-lg font-medium text-zinc-800 dark:text-zinc-300">
+                  {chat.title}
+                </div>
+                <div className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+                  {chat.description}
+                </div>
+              </div>
+            </motion.div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

src/app/api/chat/route.ts

@@ -0,0 +1,63 @@
+import { openai } from "@ai-sdk/openai";
+import { convertToCoreMessages, streamText } from "ai";
+import { z } from "zod";
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  const systemMessage = `You are an expert AI assistant that explains your reasoning step by step.
+    You approach every question scientifically.
+    For each step, provide a title that describes what you're doing in that step, along with the content. Decide if you need another step or if you're ready to give the final answer.
+
+    Follow these guidelines exactly:
+    - Answer every question mathematically where possible.
+    - USE AS MANY REASONING STEPS AS POSSIBLE. AT LEAST 4.
+    - BE AWARE OF YOUR LIMITATIONS AS AN LLM AND WHAT YOU CAN AND CANNOT DO.
+    - IN YOUR REASONING, INCLUDE EXPLORATION OF ALTERNATIVE ANSWERS.
+    - CONSIDER YOU MAY BE WRONG, AND IF YOU ARE WRONG IN YOUR REASONING, WHERE IT WOULD BE.
+    - FULLY TEST ALL OTHER POSSIBILITIES.
+    - YOU CAN BE WRONG.
+    - WHEN YOU SAY YOU ARE RE-EXAMINING, ACTUALLY RE-EXAMINE, AND USE ANOTHER APPROACH TO DO SO.
+    - DO NOT JUST SAY YOU ARE RE-EXAMINING.
+    - USE AT LEAST 4 METHODS TO DERIVE THE ANSWER. USE BEST PRACTICES.
+    - TRY AND DISPROVE YOUR ANSWER. Slow down.
+    - Explain why you are right and why you are wrong.
+    - Have at least one step where you explain things slowly (breaking things onto different lines).
+    - USE FIRST PRINCIPLES AND MENTAL MODELS (like thinking through the question backwards).
+    - If you need to count letters, separate each letter by one dash on either side and identify it by the iterator.
+    - When checking your work, do it from the perspective of Albert Einstein, who is looking for mistakes.
+
+    NOTE, YOUR FIRST ANSWER MIGHT BE WRONG. Check your work twice.
+
+    Use the addReasoningStep function for each step of your reasoning.
+    `;
+
+  const result = await streamText({
+    model: openai("gpt-4o-mini"),
+    system: systemMessage,
+    messages: convertToCoreMessages(messages),
+    maxSteps: 10,
+    experimental_toolCallStreaming: true,
+    tools: {
+      addAReasoningStep: {
+        description: "Add a step to the reasoning process.",
+        parameters: z.object({
+          title: z.string().describe("The title of the reasoning step"),
+          content: z
+            .string()
+            .describe(
+              "The content of the reasoning step. WRITE OUT ALL OF YOUR WORK. Where relevant, prove things mathematically.",
+            ),
+          nextStep: z
+            .enum(["continue", "finalAnswer"])
+            .describe(
+              "Whether to continue with another step or provide the final answer",
+            ),
+        }),
+        execute: async (params) => params,
+      },
+    },
+  });
+
+  return result.toDataStreamResponse();
+}

src/app/o1/components/data.ts

@@ -0,0 +1,59 @@
+export interface Order {
+  id: string;
+  name: string;
+  orderedAt: string;
+  image: string;
+}
+
+export const ORDERS: Order[] = [
+  {
+    id: "412093",
+    name: "Apple Watch Ultra 2",
+    orderedAt: "2024-08-26",
+    image: "watch.png",
+  },
+  {
+    id: "539182",
+    name: "Apple TV",
+    orderedAt: "2024-08-25",
+    image: "tv.png",
+  },
+  {
+    id: "281958",
+    name: "Apple iPhone 14 Pro",
+    orderedAt: "2024-08-24",
+    image: "iphone.png",
+  },
+];
+
+export interface TrackingInformation {
+  orderId: string;
+  progress: "Shipped" | "Out for Delivery" | "Delivered";
+  description: string;
+}
+
+export const TRACKING_INFORMATION = [
+  {
+    orderId: "412093",
+    progress: "Shipped",
+    description: "Last Updated Today 4:31 PM",
+  },
+  {
+    orderId: "281958",
+    progress: "Out for Delivery",
+    description: "ETA Today 5:45 PM",
+  },
+  {
+    orderId: "539182",
+    progress: "Delivered",
+    description: "Front Porch Today 3:16 PM",
+  },
+];
+
+export const getOrders = () => {
+  return ORDERS;
+};
+
+export const getTrackingInformation = ({ orderId }: { orderId: string }) => {
+  return TRACKING_INFORMATION.find((info) => info.orderId === orderId);
+};