チャットのイメージ画像にアニメーションを追加

Author: na-trium-144

app/featureCard.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import clsx from "clsx";
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import { StyledMarkdown } from "./markdown/markdown";
 import { Heading } from "./markdown/heading";
 import {
@@ -117,6 +117,51 @@ export function PracticeImage() {
 
 export function ChatImage() {
   // public/docs/python/1-basics/2-1-str.md より
+  const [chatAreaText, setChatAreaText] = useState<string>("");
+  const [docsReplaced, setDocsReplaced] = useState<boolean>(false);
+  const replacedDocsRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    let animTimeout: ReturnType<typeof setTimeout> | null = null;
+    let chatInterval: ReturnType<typeof setInterval> | null = null;
+    const chatAreaFullText = `Pythonには「double型」は存在しません。他の言語（C++、Java、C#など）でおなじみのdouble型に相当するのは、Pythonの**float型**です。
+
+Pythonのfloat型は**倍精度浮動小数点数（double-precision floating point）** を表し、`;
+    // 他の言語のdouble型と同じ桁数の精度（通常15〜17桁）を提供します。そのため、Pythonでは単一のfloat型だけで十分です。
+    const animLoop = () => {
+      let chatAreaLen = 0;
+      setDocsReplaced(false);
+      chatInterval = setInterval(() => {
+        if (chatAreaLen < chatAreaFullText.length) {
+          setChatAreaText(chatAreaFullText.slice(0, chatAreaLen));
+          chatAreaLen += 4;
+        } else {
+          setDocsReplaced(true);
+          replacedDocsRef.current?.animate(
+            [{ opacity: "0" }, { opacity: "1" }],
+            {
+              duration: 500,
+              fill: "forwards",
+              easing: "ease-out",
+            }
+          );
+          if (chatInterval) {
+            clearInterval(chatInterval);
+            chatInterval = null;
+          }
+          animTimeout = setTimeout(animLoop, 1500);
+        }
+      }, 50);
+    };
+    animLoop();
+    return () => {
+      if (animTimeout) {
+        clearTimeout(animTimeout);
+      }
+      if (chatInterval) {
+        clearInterval(chatInterval);
+      }
+    };
+  }, []);
   return (
     <>
       <div className="absolute right-2/5 w-[85%] md:w-[70%] top-0 scale-70 md:scale-85 origin-top-right pointer-events-none">
@@ -125,14 +170,26 @@ export function ChatImage() {
         */}
         <ChatAreaStateProvider>
           <ChatAreaStateUpdater chatId="sample" />
-          <StyledMarkdown
-            content={`### 数値（int, float）
+          <div
+            className={clsx(!docsReplaced && "hidden", "opacity-0")}
+            ref={replacedDocsRef}
+          >
+            <StyledMarkdown
+              content={`### 数値（int, float）
 
 Pythonは整数 (\`int\`) と浮動小数点数 (\`float\`) を区別します。
 浮動小数点数 (\`float\`) は、他の言語の double 型に相当する倍精度浮動小数点数です。
 `}
-            replacedRange={[{ start: 64, end: 120, id: "sample" }]}
-          />
+              replacedRange={[{ start: 64, end: 120, id: "sample" }]}
+            />
+          </div>
+          <div className={clsx(docsReplaced && "hidden")}>
+            <StyledMarkdown
+              content={`### 数値（int, float）
+
+Pythonは整数 (\`int\`) と浮動小数点数 (\`float\`) を区別します。`}
+            />
+          </div>
         </ChatAreaStateProvider>
         <pre
           className={clsx(
@@ -165,13 +222,11 @@ Pythonは整数 (\`int\`) と浮動小数点数 (\`float\`) を区別します
       </div>
       <aside
         className={clsx(
-          "absolute left-3/5 md:w-80 top-0 scale-70 md:scale-85 origin-top-left",
+          "absolute left-3/5 md:w-80 top-0 h-200 scale-70 md:scale-85 origin-top-left",
           "bg-base-300 shadow-md p-3 flex flex-col"
         )}
       >
-        <span className="flex-1 text-base font-bold opacity-40">
-          AIへの質問
-        </span>
+        <span className="text-base font-bold opacity-40">AIへの質問</span>
         <Heading level={2} className="mt-1! mb-1! text-nowrap">
           Pythonのdouble型について
         </Heading>
@@ -184,11 +239,7 @@ Pythonは整数 (\`int\`) と浮動小数点数 (\`float\`) を区別します
             <StyledMarkdown content="double型はありますか？" />
           </div>
         </div>
-        <StyledMarkdown
-          content={`Pythonには「double型」は存在しません。他の言語（C++、Java、C#など）でおなじみのdouble型に相当するのは、Pythonの**float型**です。
-
-Pythonのfloat型は**倍精度浮動小数点数（double-precision floating point）** を表し、他の言語のdouble型と同じ桁数の精度（通常15〜17桁）を提供します。そのため、Pythonでは単一のfloat型だけで十分です。`}
-        />
+        <StyledMarkdown content={chatAreaText} />
       </aside>
     </>
   );