From ba13852514b06ab94666f00807cf23c80d809652 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Mon, 9 Dec 2024 18:01:17 -0700
Subject: [PATCH] feat: add back message animation

---
 apps/web/components/chat-message.tsx |  1 +
 apps/web/components/chat.tsx         | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/apps/web/components/chat-message.tsx b/apps/web/components/chat-message.tsx
index dfb3f79..3136ded 100644
--- a/apps/web/components/chat-message.tsx
+++ b/apps/web/components/chat-message.tsx
@@ -35,6 +35,7 @@ function ChatMessage({ message, isLast }: ChatMessageProps) {
       return (
         <m.div
           // Only track layout on the last message to improve performance
+          layoutId={isLast ? message.id : undefined}
           variants={{
             hidden: {
               opacity: 0,
diff --git a/apps/web/components/chat.tsx b/apps/web/components/chat.tsx
index 01172e0..9f11349 100644
--- a/apps/web/components/chat.tsx
+++ b/apps/web/components/chat.tsx
@@ -549,6 +549,26 @@ export default function Chat() {
           )}
           onSubmit={handleFormSubmit}
         >
+          {' '}
+          {/*
+           * This is a hidden dummy message acting as an animation anchor
+           * before the real message is added to the chat.
+           *
+           * The animation starts in this element's position and moves over to
+           * the location of the real message after submit.
+           *
+           * It works by sharing the same `layoutId` between both message elements
+           * which framer motion requires to animate between them.
+           */}
+          {input && (
+            <m.div
+              layout="position"
+              layoutId={nextMessageId}
+              className="absolute invisible -top-12 px-5 py-2.5 text-base rounded-3xl bg-neutral-100 whitespace-pre-wrap"
+            >
+              {input}
+            </m.div>
+          )}
           <textarea
             ref={inputRef}
             id="input"