Implement Image Detection and Rendering in Chat Messages

[QU3TZL]

Task

Implement logic to detect and render images in chat messages when tools like DALL-E return image URLs.

Plan

1. Modify chat-messages.tsx to detect if a message contains an image URL (ending in .jpg, .png, .gif, etc.).
2. Use a function like isImageUrl(url) to check for image URLs.
3. If the content is an image URL, render it with an <img> or Next.js <Image> component.
4. Test with generated image URLs from tools like DALL-E.

Example Code

const ChatMessages = ({ messages }) => {
  const isImageUrl = (url) => {
    return /\.(jpeg|jpg|gif|png)$/.test(url);
  };

  return (
    <div>
      {messages.map((message, index) => (
        <div key={index} className="chat-message">
          {isImageUrl(message.content) ? (
            <img
              src={message.content}
              alt="Generated Image"
              width={250}
              height={250}
              style={{ borderRadius: '8px' }}
            />
          ) : (
            <p>{message.content}</p>
          )}
        </div>
      ))}
    </div>
  );
};

Let me know when it's complete to move this task to DONE.

[QU3TZL]

Hey there! Just checking in on this task to make sure we're aligned on the latest status. Let me know if anything's changed or if we're good to proceed as planned!