estou usando shadcn/ui

'use client'
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import {
  Hash,
  MessageCircle,
  Moon,
  Send,
  Settings,
  Sun,
  Users,
  Image as ImageIcon,
} from "lucide-react";
import React, { useState, useEffect, useRef } from "react";
import { GoogleGenerativeAI } from "@google/generative-ai";
import Image from 'next/image';


const genAI = new GoogleGenerativeAI("AIzaSyAUHcP5zxKGLZ0mNiLDPTLI72cjj2ILBpg"); //Remember to replace with your actual API key
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

type Config = {
  notifications: boolean;
  fontSize: number;
  username: string;
  avatarUrl: string;
};

type User = {
  username: string;
  avatarUrl: string;
};

type Message = {
  id: string;
  content: string;
  timestamp: Date;
  user: User;
  image?: string;
};

type Channel = {
  id: string;
  name: string;
  messages: Message[];
};

const initialConfig: Config = {
  notifications: true,
  fontSize: 16,
  username: "Anonymous",
  avatarUrl: "",
};

const initialChannels: Channel[] = [
  { id: "1", name: "general", messages: [] },
  { id: "2", name: "random", messages: [] },
  { id: "3", name: "announcements", messages: [] },
];

const defaultAvatarUrl = "https://via.placeholder.com/40";

export default function App() {
  const [config, setConfig] = useState<Config>(initialConfig);
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  const [channels, setChannels] = useState<Channel[]>(initialChannels);
  const [activeChannel, setActiveChannel] = useState<Channel>(channels[0]);
  const [messageInput, setMessageInput] = useState("");
  const [selectedImage, setSelectedImage] = useState<File | null>(null);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleConfigChange = (
    key: keyof Config,
    value: boolean | number | string,
  ) => {
    setConfig((prevConfig) => ({ ...prevConfig, [key]: value }));
  };


  const handleChannelSelect = (channel: Channel) => {
    setActiveChannel(channel);
  };

  const handleSendMessage = async () => {
    if (messageInput.trim() === "" && !selectedImage) return;

    let content = messageInput;
    let image: string | undefined;

    if (selectedImage) {
      const reader = new FileReader();
      reader.readAsDataURL(selectedImage);
      await new Promise((resolve) => {
        reader.onload = () => {
          image = reader.result as string;
          resolve(null);
        };
      });
    }

    if (content.startsWith("/chat")) {
      const prompt = content.slice(6);
      try {
        const result = await model.generateContent([prompt]);
        content = result.response.text();
      } catch (error) {
        console.error("Error generating content with Gemini:", error);
        content = "Sorry, I couldn't process that request.";
      }
    }

    const newMessage: Message = {
      id: Date.now().toString(),
      content,
      timestamp: new Date(),
      user: {
        username: config.username,
        avatarUrl: config.avatarUrl || defaultAvatarUrl,
      },
      image,
    };

    setChannels((prevChannels) =>
      prevChannels.map((channel) =>
        channel.id === activeChannel.id
          ? { ...channel, messages: [...channel.messages, newMessage] }
          : channel
      )
    );

    setMessageInput("");
    setSelectedImage(null);
  };

  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      setSelectedImage(file);
    }
  };

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [activeChannel.messages]);

  const SettingsModal = () => (
    <Dialog open={isSettingsOpen} onOpenChange={setIsSettingsOpen}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Chat Settings</DialogTitle>
        </DialogHeader>
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <Label htmlFor="notifications">Notifications</Label>
            <Switch
              id="notifications"
              checked={config.notifications}
              onCheckedChange={(checked) =>
                handleConfigChange("notifications", checked)
              }
            />
          </div>
          <div className="flex items-center justify-between">
            <Label htmlFor="fontSize">Font Size</Label>
            <Input
              id="fontSize"
              type="number"
              value={config.fontSize}
              onChange={(e) =>
                handleConfigChange("fontSize", parseInt(e.target.value, 10))
              }
              className="w-20"
            />
          </div>
          <div className="flex items-center justify-between">
            <Label htmlFor="username">Username</Label>
            <Input
              id="username"
              value={config.username}
              onChange={(e) => handleConfigChange("username", e.target.value)}
              className="w-48"
            />
          </div>
          <div className="flex items-center justify-between">
            <Label htmlFor="avatarUrl">Avatar URL</Label>
            <Input
              id="avatarUrl"
              value={config.avatarUrl}
              onChange={(e) => handleConfigChange("avatarUrl", e.target.value)}
              className="w-48"
              placeholder="https://example.com/avatar.png"
            />
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );

  return (
    <div
      className={`flex h-screen bg-background text-foreground`}
      style={{ fontSize: `${config.fontSize}px` }}
    >
      {/* Sidebar */}
      <div className="w-16 bg-card flex flex-col items-center py-4 space-y-4">
        <Button variant="ghost" className="rounded-full p-2">
          <MessageCircle className="h-6 w-6 text-primary" />
        </Button>
        <Button variant="ghost" className="rounded-full p-2">
          <Hash className="h-6 w-6 text-secondary" />
        </Button>
        <Button variant="ghost" className="rounded-full p-2">
          <Users className="h-6 w-6 text-accent" />
        </Button>
        <Button
          variant="ghost"
          className="rounded-full p-2"
          onClick={() => setIsSettingsOpen(true)}
        >
          <Settings className="h-6 w-6 text-muted-foreground" />
        </Button>
        <Separator className="my-2" />
      </div>

      {/* Channels */}
      <div className="w-64 bg-card border-r border-border">
        <div className="p-4">
          <h2 className="text-lg font-bold mb-4">Channels</h2>
          <Input placeholder="Search channels" className="mb-4" />
          <div className="space-y-2">
            {channels.map((channel) => (
              <Button
                key={channel.id}
                variant={
                  channel.id === activeChannel.id ? "secondary" : "ghost"
                }
                className="w-full justify-start"
                onClick={() => handleChannelSelect(channel)}
              >
                <Hash className="h-4 w-4 mr-2" />
                {channel.name}
              </Button>
            ))}
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 flex flex-col">
        <header className="bg-card border-b border-border p-4">
          <h1 className="text-2xl font-bold">#{activeChannel.name}</h1>
        </header>
        <div className="flex-1 p-6 overflow-auto">
          <div className="space-y-4">
            {activeChannel.messages.map((message) => (
              <Card key={message.id} className="p-4 bg-popover text-popover-foreground">
                <div className="flex items-start space-x-4">
                  <Avatar>
                    <AvatarImage src={message.user.avatarUrl} alt={message.user.username} />
                    <AvatarFallback>{message.user.username.charAt(0).toUpperCase()}</AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-semibold">{message.user.username}</p>
                    <p>{message.content}</p>
                    {message.image && (
                      <div className="mt-2">
                        <Image src={message.image} alt="Uploaded Image" width={200} height={200} objectFit="contain" />
                      </div>
                    )}
                    <p className="text-xs text-muted-foreground mt-2">
                      {message.timestamp.toLocaleString()}
                    </p>
                  </div>
                </div>
              </Card>
            ))}
            <div ref={messagesEndRef} />
          </div>
        </div>
        <div className="p-4 bg-card border-t border-border">
          <div className="flex space-x-2">
            <Input
              placeholder="Type a message..."
              value={messageInput}
              onChange={(e) => setMessageInput(e.target.value)}
              onKeyPress={(e) => {
                if (e.key === "Enter") {
                  handleSendMessage();
                }
              }}
            />
            <Button onClick={() => fileInputRef.current?.click()}>
              <ImageIcon className="h-4 w-4" />
            </Button>
            <input
              type="file"
              ref={fileInputRef}
              style={{ display: "none" }}
              onChange={handleImageUpload}
              accept="image/*"
            />
            <Button onClick={handleSendMessage}>
              <Send className="h-4 w-4" />
            </Button>
          </div>
          {selectedImage && (
            <p className="mt-2 text-sm text-muted-foreground">
              Image selected: {selectedImage.name}
            </p>
          )}
        </div>
      </div>
      <SettingsModal />
    </div>
  );
}

quero arrumar o probelma de q toda vez q eu envio uma mensagem eu preciso sair do canal e voltar, eu quero q quando enviei a mensagem ja renderize para mim, arruma o metodo de Imagem para a nova versao do next js usando Image em vez de img.