قدرت تفکر …"من می توانم"

{/* Outermost layout will have a left align by default */}
<div className="flex-grow flex-col p-4 overflow-y-auto">
  {/* Chat bubble from other senders */}
  <div className="flex mb-4">
    <div className="flex items-start mr-4"> 
      {/* The contents of the chat bubble */} 
    </div>
  </div>
</div>

{/* Outermost layout will have a left align by default */}
<div className="flex-grow flex-col p-4 overflow-y-auto">
  {/* Chat bubble from other senders */}
  <div className="flex mb-4">
    <div className="flex items-start mr-4"> 
      {/* Next, we add our profile image. */}
      <div className="w-8 h-8 rounded-full overflow-hidden mr-2">
        <Image 
          src="/female-student-chinese.jpg" 
          alt="Profile Picture" 
          width={50} 
          height={50} 
          className="object-cover" 
        />
      </div> 
    </div>
  </div>
</div>

{/* Outermost layout will have a left align by default */}
<div className="flex-grow flex-col p-4 overflow-y-auto">
  {/* Chat bubble from other senders */}
  <div className="flex mb-4">
    <div className="flex items-start mr-4"> 
      {/* Profile Image here. */}

      <div className="bg-gray-200 rounded-lg p-3 max-w-xs">
        <p className="text-xs font-medium text-gray-800">Agnes Yeo</p> 
        <p className="text-sm">Hey everyone, just wanted to check in and see how the project's coming along!</p>
        <span className="text-xs text-gray-500">Tue 10:15 am</span>
      </div>
    </div>
  </div>
</div>

<div className="flex justify-end mb-4">
  <div className="bg-blue-500 text-white rounded-lg p-3 max-w-xs ml-4"> 
    <p className="text-sm">Hey Agnes! I'm making good progress on the research. How's the mood board coming along?</p>
    <span className="text-xs text-gray-100">Tue 10:45 am</span> 
  </div>
</div>

{/* Message Input Area */}
<div className="border-t border-gray-300 p-4 bg-white"> 
  {/* Use flex-col for vertical layout */}
  <div className="flex flex-col justify-start">
    {/* Container for textarea and send button */}
    <div className="flex"> 
      <textarea 
        className="flex-grow resize-none border border-gray-400 rounded-md p-2 mr-2 focus:outline-none focus:ring focus:ring-blue-300 bg-gray-100" 
        placeholder="Type your message..."
      ></textarea>
      <button className="flex bg-blue-500 text-white px-4 py-2 rounded-md self-start items-center justify-center ml-2"> 
        Send <SendHorizonal width={20} height={20} className="ml-1" />
      </button>
    </div>
    {/* Attachment button below */}
    <button className="bg-gray-300 rounded-md py-2 px-4 mt-2 flex items-center justify-center w-max"> 
      <Paperclip width={16} height={16} className="mr-1"/> Add Attachments
    </button>
  </div>
</div>

<div className="flex justify-end mb-4">
  <div className="bg-blue-500 text-white rounded-lg p-3 max-w-xs ml-4"> 
    {/* Our message content remains here. */}

    {/* Container for attachment previews */}
    <div className="flex flex-row gap-x-2 mt-2"> 
      <div className="w-1/2 relative"> 
        {/* Add "relative" for image overlay */}
        <div className="relative aspect-square overflow-hidden rounded-md">
          <Image 
            src="/sample-wireframes-01.jpg"
            fill={true}
            quality={90}
            alt="Mobile friendly wireframes" 
            className="object-cover w-1/2 aspect-square" 
          />
        </div>
        <div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-50 bg-gray-900 rounded-md transition duration-300">
          {/* Expand icon */}
          <Expand className="text-white" size={32} /> 
        </div>
      </div>
      <div className="w-1/2 relative">
        <div className="relative aspect-square overflow-hidden rounded-md"> 
          {/* Image 2 */}
          <Image 
            src="/sample-wireframes-02.jpg"
            alt="Mobile friendly wireframes"
            quality={90}
            fill={true}
            className="object-cover w-1/2 aspect-square" 
          />
        </div>
        <div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-50 bg-gray-900 rounded-md transition duration-300">
          {/* Expand icon */}
          <Expand className="text-white" size={32} /> 
        </div>
      </div>
    </div>
    <span className="text-xs text-gray-100">Thu 2:15 pm</span> 
  </div>
</div>

{/* Image Modal Overlay */}
{isShowImageModal && (
  <div className="absolute left-0 top-0 w-full h-full z-40 items-center justify-center"
    style={{
      backgroundColor: "#000000AA"
    }}
  >
    {/* Container for image and controls */}
    <div className="relative">  
      {/* Close button */}
      <button className="absolute top-4 right-4 z-50 text-white"> 
        <X size={32} onClick={() => setIsShowImageModal(false)} /> 
      </button>
    </div>

    <div className="w-[90%] h-[90%] opacity-100">
      {/* Left Chevron button */}
      {currModalImage.includes("02") && (
        <button 
          className="absolute top-[50%] left-5 z-50 text-white"
          onClick={() => {
            if (currModalImage.includes("02")) {
              setCurrModalImage("/sample-wireframes-01.jpg");
            }
          }}
        > 
          <ChevronLeft 
            size={48} 
          /> 
        </button>
      )}

      <Image src={currModalImage} alt="attachment image" fill style={{ objectFit: "contain" }} className="aspect-auto" />

      {/* Right Chevron button */}      
      {currModalImage.includes("01") && (
        <button 
          className="absolute top-[50%] right-5 z-50 text-white"
          onClick={() => {
            if (currModalImage.includes("01")) {
              setCurrModalImage("/sample-wireframes-02.jpg");
            }
          }}
        > 
          <ChevronRight size={48} />
        </button>
      )}
    </div>
  </div>
)}

<Image 
  src={currModalImage} 
  alt="attachment image" 
  fill 
  style={{ objectFit: "contain" }} 
  className="aspect-auto" 
/>

{/* Left Chevron button */}
{currModalImage.includes("02") && (
  <button 
    className="absolute top-[50%] left-5 z-50 text-white"
    onClick={() => {
      if (currModalImage.includes("02")) {
        setCurrModalImage("/sample-wireframes-01.jpg");
      }
    }}
  > 
    <ChevronLeft 
      size={48} 
    /> 
  </button>
)}

<Image src={currModalImage} alt="attachment image" fill style={{ objectFit: "contain" }} className="aspect-auto" />

{/* Right Chevron button */}
{currModalImage.includes("01") && (
  <button 
    className="absolute top-[50%] right-5 z-50 text-white"
    onClick={() => {
      if (currModalImage.includes("01")) {
        setCurrModalImage("/sample-wireframes-02.jpg");
      }
    }}
  > 
    <ChevronRight size={48} />
  </button>
)}

{/* Right Chevron button */}
{currModalImage.includes("01") && (
  <button 
    className="absolute top-[50%] right-5 z-50 text-white"
    onClick={() => setCurrModalImage("/sample-wireframes-02.jpg")}
  > 
    <ChevronRight size={48} />
  </button>
)}