チャット画面で改行が可能になった

common/zod/schemas.ts

@@ -102,7 +102,8 @@ export const ShareRoomIDSchema = z.number();
 
 export const ContentSchema = z
   .string()
-  .min(1, { message: "Content must not be empty." });
+  .min(1, { message: "Content must not be empty." })
+  .max(255, { message: "Content is too big" });
 
 export const MessageSchema = z.object({
   id: MessageIDSchema,

web/src/components/chat/MessageInput.tsx

@@ -11,59 +11,75 @@ type Props = {
 
 const crossRoomMessageState = new Map<number, string>();
 
-export function MessageInput(props: Props) {
-  const { send, room } = props;
-
+export function MessageInput({ send, room }: Props) {
   const [message, _setMessage] = useState<string>("");
   const [error, setError] = useState<string | null>(null);
 
-  const setMessage = (m: string) => {
+  function setMessage(m: string) {
     _setMessage(m);
     crossRoomMessageState.set(room.friendId, m);
-  };
+  }
 
-  // change input message based on currently open room
   useEffect(() => {
     _setMessage(crossRoomMessageState.get(room.friendId) || "");
   }, [room.friendId]);
 
-  return (
-    <Box sx={{ padding: "0px" }}>
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          setError(null);
+  function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+
+    try {
+      parseContent(message);
+    } catch {
+      return;
+    }
 
-          try {
-            parseContent(message);
-          } catch {
-            return;
-          }
+    if (message.trim()) {
+      send(room.friendId, { content: message });
+      setMessage("");
+    }
+  }
 
-          if (message.trim()) {
-            send(room.friendId, {
-              content: message,
-            });
-            setMessage("");
-          }
-        }}
-      >
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      setError(null);
+
+      try {
+        parseContent(message);
+      } catch {
+        return;
+      }
+      if (message.trim()) {
+        send(room.friendId, { content: message });
+        setMessage("");
+      }
+    }
+  }
+
+  return (
+    <Box sx={{ padding: "0px" }}>
+      <form onSubmit={submit}>
         <Stack direction="row" spacing={1} alignItems="center" margin={2}>
           <TextField
             name="message"
             placeholder="メッセージを入力"
             variant="outlined"
             size="small"
             value={message}
-            fullWidth={true}
+            fullWidth
+            multiline
+            minRows={1}
+            maxRows={3}
             onChange={(e) => setMessage(e.target.value)}
+            onKeyDown={handleKeyDown}
             error={!!error}
           />
           <IconButton type="submit" color="primary">
             <SendIcon />
           </IconButton>
         </Stack>
-        {error && ( // エラーメッセージがある場合に表示
+        {error && (
           <Typography color="error" variant="body2" marginLeft={2}>
             {error}
           </Typography>

web/src/components/chat/RoomWindow.tsx

@@ -102,16 +102,19 @@ export function RoomWindow() {
 
   //画面スクロール
   const scrollDiv = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    state.data;
+  const scrollToBottom = useCallback(() => {
     if (scrollDiv.current) {
       const element = scrollDiv.current;
       element.scrollTo({
         top: element.scrollHeight,
         behavior: "instant",
       });
     }
-  }, [state.data]);
+  }, []);
+  useEffect(() => {
+    messages;
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
 
   const startEditing = useCallback(
     (messageId: number, currentContent: string) => {
@@ -244,7 +247,9 @@ export function RoomWindow() {
                       border: 1,
                     }}
                   >
-                    <Typography sx={{ wordBreak: "break-word" }}>
+                    <Typography
+                      sx={{ wordBreak: "break-word", whiteSpace: "pre-wrap" }}
+                    >
                       {m.content}
                     </Typography>
                     {m.creator === myId && (