Prototype

components/ChatMessage.tsx

@@ -14,6 +14,7 @@ import MessageDisplay from "./MessageDisplay";
 
 import UserIcon from "./UserIcon";
 import AssistantIcon from "./AssistantIcon";
+import ZundamonIcon from "./ZundamonIcon";
 import { Message } from "@/stores/Message";
 import {
   delMessage,
@@ -178,11 +179,11 @@ export default function ChatDisplay({ message }: { message: Message }) {
           >
             <MediaQuery smallerThan="md" styles={{ display: "none" }}>
               <div className={classes.topOfMessage}>
-                <Avatar size="sm">
+                <Avatar size="xl">
                   {message.role === "system" ? (
                     <IconSettings />
                   ) : message.role === "assistant" ? (
-                    <AssistantIcon width={px("1.5rem")} height={px("1.5rem")} />
+                    <ZundamonIcon number={message.pictureNumber} />
                   ) : (
                     <UserIcon width={px("1.5rem")} height={px("1.5rem")} />
                   )}

components/ZundamonIcon.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+import React from 'react';
+
+// Propsの型定義
+interface ImageComponentProps {
+  number: string | undefined;
+}
+
+const ImageComponent: React.FC<ImageComponentProps> = (props) => {
+  const { number } = props;
+
+  // 本来はnumberを使って何かしらの処理をするかもしれません
+  const parsedNumber = () => {
+    console.log("number: ", number)
+    if(number !== undefined) {
+      const match = number.match(/\{ select: (\d+) \}/);
+      const selectValue = match ? parseInt(match[1], 10) : null;
+      return selectValue
+    }
+  };
+
+  return (
+    <div>
+      <Image
+        src={`/zundamon/${parsedNumber() || "19"}.png`}
+        alt="Description of example1"
+        width={100}
+        height={100}
+      />
+    </div>
+  );
+};
+
+export default ImageComponent;