From ccbc649317e3378115e2cc6e688432ea2b0d0c38 Mon Sep 17 00:00:00 2001
From: Jeremy <git@jrmyphlmn.com>
Date: Thu, 3 Apr 2025 01:05:07 -0700
Subject: [PATCH] feat: update chat greeting (#905)

---
 components/chat-header.tsx      |  2 +-
 components/greeting.tsx         | 29 ++++++++++++++++++
 components/messages.tsx         | 10 +++----
 components/multimodal-input.tsx |  4 +--
 components/overview.tsx         | 52 ---------------------------------
 5 files changed, 37 insertions(+), 60 deletions(-)
 create mode 100644 components/greeting.tsx
 delete mode 100644 components/overview.tsx

diff --git a/components/chat-header.tsx b/components/chat-header.tsx
index 9d595ef..003f880 100644
--- a/components/chat-header.tsx
+++ b/components/chat-header.tsx
@@ -11,7 +11,7 @@ import { PlusIcon, VercelIcon } from './icons';
 import { useSidebar } from './ui/sidebar';
 import { memo } from 'react';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
-import { VisibilityType, VisibilitySelector } from './visibility-selector';
+import { type VisibilityType, VisibilitySelector } from './visibility-selector';
 
 function PureChatHeader({
   chatId,
diff --git a/components/greeting.tsx b/components/greeting.tsx
new file mode 100644
index 0000000..9543c77
--- /dev/null
+++ b/components/greeting.tsx
@@ -0,0 +1,29 @@
+import { motion } from 'framer-motion';
+
+export const Greeting = () => {
+  return (
+    <div
+      key="overview"
+      className="max-w-3xl mx-auto md:mt-20 px-8 size-full flex flex-col justify-center"
+    >
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 10 }}
+        transition={{ delay: 0.5 }}
+        className="text-2xl font-semibold"
+      >
+        Hello there!
+      </motion.div>
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 10 }}
+        transition={{ delay: 0.6 }}
+        className="text-2xl text-zinc-500"
+      >
+        How can I help you today?
+      </motion.div>
+    </div>
+  );
+};
diff --git a/components/messages.tsx b/components/messages.tsx
index 045f3ae..dbcb546 100644
--- a/components/messages.tsx
+++ b/components/messages.tsx
@@ -1,11 +1,11 @@
-import { UIMessage } from 'ai';
+import type { UIMessage } from 'ai';
 import { PreviewMessage, ThinkingMessage } from './message';
 import { useScrollToBottom } from './use-scroll-to-bottom';
-import { Overview } from './overview';
+import { Greeting } from './greeting';
 import { memo } from 'react';
-import { Vote } from '@/lib/db/schema';
+import type { Vote } from '@/lib/db/schema';
 import equal from 'fast-deep-equal';
-import { UseChatHelpers } from '@ai-sdk/react';
+import type { UseChatHelpers } from '@ai-sdk/react';
 
 interface MessagesProps {
   chatId: string;
@@ -35,7 +35,7 @@ function PureMessages({
       ref={messagesContainerRef}
       className="flex flex-col min-w-0 gap-6 flex-1 overflow-y-scroll pt-4"
     >
-      {messages.length === 0 && <Overview />}
+      {messages.length === 0 && <Greeting />}
 
       {messages.map((message, index) => (
         <PreviewMessage
diff --git a/components/multimodal-input.tsx b/components/multimodal-input.tsx
index 19b2810..17d3279 100644
--- a/components/multimodal-input.tsx
+++ b/components/multimodal-input.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { Attachment, Message, UIMessage } from 'ai';
+import type { Attachment, UIMessage } from 'ai';
 import cx from 'classnames';
 import type React from 'react';
 import {
@@ -22,7 +22,7 @@ import { Button } from './ui/button';
 import { Textarea } from './ui/textarea';
 import { SuggestedActions } from './suggested-actions';
 import equal from 'fast-deep-equal';
-import { UseChatHelpers } from '@ai-sdk/react';
+import type { UseChatHelpers } from '@ai-sdk/react';
 
 function PureMultimodalInput({
   chatId,
diff --git a/components/overview.tsx b/components/overview.tsx
deleted file mode 100644
index cc2e4a9..0000000
--- a/components/overview.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { motion } from 'framer-motion';
-import Link from 'next/link';
-
-import { MessageIcon, VercelIcon } from './icons';
-
-export const Overview = () => {
-  return (
-    <motion.div
-      key="overview"
-      className="max-w-3xl mx-auto md:mt-20"
-      initial={{ opacity: 0, scale: 0.98 }}
-      animate={{ opacity: 1, scale: 1 }}
-      exit={{ opacity: 0, scale: 0.98 }}
-      transition={{ delay: 0.5 }}
-    >
-      <div className="rounded-xl p-6 flex flex-col gap-8 leading-relaxed text-center max-w-xl">
-        <p className="flex flex-row justify-center gap-4 items-center">
-          <VercelIcon size={32} />
-          <span>+</span>
-          <MessageIcon size={32} />
-        </p>
-        <p>
-          This is an{' '}
-          <Link
-            className="font-medium underline underline-offset-4"
-            href="https://github.com/vercel/ai-chatbot"
-            target="_blank"
-          >
-            open source
-          </Link>{' '}
-          chatbot template built with Next.js and the AI SDK by Vercel. It uses
-          the{' '}
-          <code className="rounded-md bg-muted px-1 py-0.5">streamText</code>{' '}
-          function in the server and the{' '}
-          <code className="rounded-md bg-muted px-1 py-0.5">useChat</code> hook
-          on the client to create a seamless chat experience.
-        </p>
-        <p>
-          You can learn more about the AI SDK by visiting the{' '}
-          <Link
-            className="font-medium underline underline-offset-4"
-            href="https://sdk.vercel.ai/docs"
-            target="_blank"
-          >
-            docs
-          </Link>
-          .
-        </p>
-      </div>
-    </motion.div>
-  );
-};