Use core messages spec (vercel#337)

Marcos- · May 15, 2024 · 901e4cc · 901e4cc
1 parent 095550d
commit 901e4cc
Show file tree

Hide file tree

Showing 7 changed files with 231 additions and 107 deletions.
diff --git a/components/chat.tsx b/components/chat.tsx
@@ -7,9 +7,8 @@ import { EmptyScreen } from '@/components/empty-screen'
 import { useLocalStorage } from '@/lib/hooks/use-local-storage'
 import { useEffect, useState } from 'react'
 import { useUIState, useAIState } from 'ai/rsc'
-import { Session } from '@/lib/types'
+import { Message, Session } from '@/lib/types'
 import { usePathname, useRouter } from 'next/navigation'
-import { Message } from '@/lib/chat/actions'
 import { useScrollAnchor } from '@/lib/hooks/use-scroll-anchor'
 import { toast } from 'sonner'
 
@@ -71,7 +70,7 @@ export function Chat({ id, className, session, missingKeys }: ChatProps) {
         ) : (
           <EmptyScreen />
         )}
-        <div className="h-px w-full" ref={visibilityRef} />
+        <div className="w-full h-px" ref={visibilityRef} />
       </div>
       <ChatPanel
         id={id}

diff --git a/components/stocks/message.tsx b/components/stocks/message.tsx
@@ -7,7 +7,7 @@ import { CodeBlock } from '../ui/codeblock'
 import { MemoizedReactMarkdown } from '../markdown'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
-import { StreamableValue } from 'ai/rsc'
+import { StreamableValue, useStreamableValue } from 'ai/rsc'
 import { useStreamableText } from '@/lib/hooks/use-streamable-text'
 
 // Different types of message bubbles.

diff --git a/components/stocks/stock-purchase.tsx b/components/stocks/stock-purchase.tsx
@@ -14,7 +14,7 @@ interface Purchase {
 }
 
 export function Purchase({
-  props: { numberOfShares, symbol, price, status = 'requires_action' }
+  props: { numberOfShares, symbol, price, status = 'expired' }
 }: {
   props: Purchase
 }) {
@@ -60,8 +60,8 @@ export function Purchase({
   }
 
   return (
-    <div className="rounded-xl border bg-zinc-950 p-4 text-green-400">
-      <div className="float-right inline-block rounded-full bg-white/10 px-2 py-1 text-xs">
+    <div className="p-4 text-green-400 border rounded-xl bg-zinc-950">
+      <div className="inline-block float-right px-2 py-1 text-xs rounded-full bg-white/10">
         +1.23% ↑
       </div>
       <div className="text-lg text-zinc-300">{symbol}</div>
@@ -70,7 +70,7 @@ export function Purchase({
         <div className="mt-4 text-zinc-200">{purchasingUI}</div>
       ) : status === 'requires_action' ? (
         <>
-          <div className="relative mt-6 pb-6">
+          <div className="relative pb-6 mt-6">
             <p>Shares to purchase</p>
             <input
               id="labels-range-input"
@@ -79,46 +79,46 @@ export function Purchase({
               onChange={onSliderChange}
               min="10"
               max="1000"
-              className="h-1 w-full cursor-pointer appearance-none rounded-lg bg-zinc-600 accent-green-500 dark:bg-zinc-700"
+              className="w-full h-1 rounded-lg appearance-none cursor-pointer bg-zinc-600 accent-green-500 dark:bg-zinc-700"
             />
-            <span className="absolute bottom-1 start-0 text-xs text-zinc-400">
+            <span className="absolute text-xs bottom-1 start-0 text-zinc-400">
               10
             </span>
-            <span className="absolute bottom-1 start-1/3 -translate-x-1/2 text-xs text-zinc-400 rtl:translate-x-1/2">
+            <span className="absolute text-xs -translate-x-1/2 bottom-1 start-1/3 text-zinc-400 rtl:translate-x-1/2">
               100
             </span>
-            <span className="absolute bottom-1 start-2/3 -translate-x-1/2 text-xs text-zinc-400 rtl:translate-x-1/2">
+            <span className="absolute text-xs -translate-x-1/2 bottom-1 start-2/3 text-zinc-400 rtl:translate-x-1/2">
               500
             </span>
-            <span className="absolute bottom-1 end-0 text-xs text-zinc-400">
+            <span className="absolute text-xs bottom-1 end-0 text-zinc-400">
               1000
             </span>
           </div>
 
           <div className="mt-6">
             <p>Total cost</p>
             <div className="flex flex-wrap items-center text-xl font-bold sm:items-end sm:gap-2 sm:text-3xl">
-              <div className="flex basis-1/3 flex-col tabular-nums sm:basis-auto sm:flex-row sm:items-center sm:gap-2">
+              <div className="flex flex-col basis-1/3 tabular-nums sm:basis-auto sm:flex-row sm:items-center sm:gap-2">
                 {value}
                 <span className="mb-1 text-sm font-normal text-zinc-600 sm:mb-0 dark:text-zinc-400">
                   shares
                 </span>
               </div>
-              <div className="basis-1/3 text-center sm:basis-auto">×</div>
-              <span className="flex basis-1/3 flex-col tabular-nums sm:basis-auto sm:flex-row sm:items-center sm:gap-2">
+              <div className="text-center basis-1/3 sm:basis-auto">×</div>
+              <span className="flex flex-col basis-1/3 tabular-nums sm:basis-auto sm:flex-row sm:items-center sm:gap-2">
                 ${price}
                 <span className="mb-1 ml-1 text-sm font-normal text-zinc-600 sm:mb-0 dark:text-zinc-400">
                   per share
                 </span>
               </span>
-              <div className="mt-2 basis-full border-t border-t-zinc-700 pt-2 text-center sm:mt-0 sm:basis-auto sm:border-0 sm:pt-0 sm:text-left">
+              <div className="pt-2 mt-2 text-center border-t basis-full border-t-zinc-700 sm:mt-0 sm:basis-auto sm:border-0 sm:pt-0 sm:text-left">
                 = <span>{formatNumber(value * price)}</span>
               </div>
             </div>
           </div>
 
           <button
-            className="mt-6 w-full rounded-lg bg-green-400 px-4 py-2 font-bold text-zinc-900 hover:bg-green-500"
+            className="w-full px-4 py-2 mt-6 font-bold bg-green-400 rounded-lg text-zinc-900 hover:bg-green-500"
             onClick={async () => {
               const response = await confirmPurchase(symbol, price, value)
               setPurchasingUI(response.purchasingUI)