Restore Ultracite + fix sidebar (#1233)

components/message-editor.tsx

@@ -1,24 +1,25 @@
-'use client';
+"use client";
 
-import { Button } from './ui/button';
+import type { UseChatHelpers } from "@ai-sdk/react";
 import {
   type Dispatch,
   type SetStateAction,
+  useCallback,
   useEffect,
   useRef,
   useState,
-} from 'react';
-import { Textarea } from './ui/textarea';
-import { deleteTrailingMessages } from '@/app/(chat)/actions';
-import type { UseChatHelpers } from '@ai-sdk/react';
-import type { ChatMessage } from '@/lib/types';
-import { getTextFromMessage } from '@/lib/utils';
+} from "react";
+import { deleteTrailingMessages } from "@/app/(chat)/actions";
+import type { ChatMessage } from "@/lib/types";
+import { getTextFromMessage } from "@/lib/utils";
+import { Button } from "./ui/button";
+import { Textarea } from "./ui/textarea";
 
 export type MessageEditorProps = {
   message: ChatMessage;
-  setMode: Dispatch<SetStateAction<'view' | 'edit'>>;
-  setMessages: UseChatHelpers<ChatMessage>['setMessages'];
-  regenerate: UseChatHelpers<ChatMessage>['regenerate'];
+  setMode: Dispatch<SetStateAction<"view" | "edit">>;
+  setMessages: UseChatHelpers<ChatMessage>["setMessages"];
+  regenerate: UseChatHelpers<ChatMessage>["regenerate"];
 };
 
 export function MessageEditor({
@@ -30,22 +31,22 @@ export function MessageEditor({
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 
   const [draftContent, setDraftContent] = useState<string>(
-    getTextFromMessage(message),
+    getTextFromMessage(message)
   );
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
+  const adjustHeight = useCallback(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight + 2}px`;
+    }
+  }, []);
+
   useEffect(() => {
     if (textareaRef.current) {
       adjustHeight();
     }
-  }, []);
-
-  const adjustHeight = () => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-      textareaRef.current.style.height = `${textareaRef.current.scrollHeight + 2}px`;
-    }
-  };
+  }, [adjustHeight]);
 
   const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     setDraftContent(event.target.value);
@@ -55,27 +56,26 @@ export function MessageEditor({
   return (
     <div className="flex w-full flex-col gap-2">
       <Textarea
-        data-testid="message-editor"
-        ref={textareaRef}
         className="w-full resize-none overflow-hidden rounded-xl bg-transparent text-base! outline-hidden"
-        value={draftContent}
+        data-testid="message-editor"
         onChange={handleInput}
+        ref={textareaRef}
+        value={draftContent}
       />
 
       <div className="flex flex-row justify-end gap-2">
         <Button
-          variant="outline"
           className="h-fit px-3 py-2"
           onClick={() => {
-            setMode('view');
+            setMode("view");
           }}
+          variant="outline"
         >
           Cancel
         </Button>
         <Button
-          data-testid="message-editor-send-button"
-          variant="default"
           className="h-fit px-3 py-2"
+          data-testid="message-editor-send-button"
           disabled={isSubmitting}
           onClick={async () => {
             setIsSubmitting(true);
@@ -90,7 +90,7 @@ export function MessageEditor({
               if (index !== -1) {
                 const updatedMessage: ChatMessage = {
                   ...message,
-                  parts: [{ type: 'text', text: draftContent }],
+                  parts: [{ type: "text", text: draftContent }],
                 };
 
                 return [...messages.slice(0, index), updatedMessage];
@@ -99,11 +99,12 @@ export function MessageEditor({
               return messages;
             });
 
-            setMode('view');
+            setMode("view");
             regenerate();
           }}
+          variant="default"
         >
-          {isSubmitting ? 'Sending...' : 'Send'}
+          {isSubmitting ? "Sending..." : "Send"}
         </Button>
       </div>
     </div>