feat: add animate

package.json

@@ -43,6 +43,7 @@
     "markdown-it-kbd": "^2.2.2",
     "solid-js": "^1.7.6",
     "solid-start": "^0.2.26",
+    "solid-transition-group": "^0.2.2",
     "undici": "^5.22.1"
   },
   "devDependencies": {

src/components/Chat/MessageContainer.tsx

@@ -3,6 +3,8 @@ import { RootStore, defaultMessage } from "~/store"
 import { scrollToBottom } from "~/utils"
 import MessageItem from "./MessageItem"
 import { defaultInputBoxHeight } from "./InputBox"
+import { TransitionGroup } from "solid-transition-group"
+import "~/styles/transition.css"
 
 export default function ({
   sendMessage,
@@ -55,16 +57,18 @@ export default function ({
         <Show when={!store.messageList.length}>
           <MessageItem hiddenAction={true} message={defaultMessage} />
         </Show>
-        <For each={store.messageList}>
-          {(message, index) => (
-            <MessageItem
-              message={message}
-              hiddenAction={store.loading || message.type === "temporary"}
-              index={index()}
-              sendMessage={sendMessage}
-            />
-          )}
-        </For>
+        <TransitionGroup name="transition-group">
+          <For each={store.messageList}>
+            {(message, index) => (
+              <MessageItem
+                message={message}
+                hiddenAction={store.loading || message.type === "temporary"}
+                index={index()}
+                sendMessage={sendMessage}
+              />
+            )}
+          </For>
+        </TransitionGroup>
       </div>
       <Show
         when={!store.loading && (store.contextToken || store.inputContentToken)}

src/components/Chat/MessageItem.tsx

@@ -111,6 +111,9 @@ export default function MessageItem(props: Props) {
     <Show when={renderedMarkdown()}>
       <div
         class="group flex gap-3 px-4 mx--4 rounded-lg transition-colors sm:hover:bg-slate/6 dark:sm:hover:bg-slate/5 relative message-item"
+        style={{
+          transition: "all 0.3s"
+        }}
         classList={{
           temporary: props.message.type === "temporary"
         }}

src/styles/transition.css

@@ -0,0 +1,9 @@
+.transition-group-enter {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.transition-group-exit-to {
+  opacity: 0;
+  transform: translateX(30px);
+}