From 5f0835d88372695229a3ae73c01ca4dd08eb160e Mon Sep 17 00:00:00 2001
From: Yasir Ekinci <yas.ekinci@grafana.com>
Date: Thu, 28 Mar 2024 15:55:39 +0100
Subject: [PATCH] Revert "Revert "wrap <img> in <picture> to avoid build
 warning""

This reverts commit 077713058e1e1e49b63e657cad5dc4d8b9141af9.
---
 src/components/chat/chat-list.tsx | 28 ++++++++++++++++------------
 src/components/sidebar.tsx        | 22 +++++++++++++---------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/components/chat/chat-list.tsx b/src/components/chat/chat-list.tsx
index 940bb00..36a5c77 100644
--- a/src/components/chat/chat-list.tsx
+++ b/src/components/chat/chat-list.tsx
@@ -26,13 +26,15 @@ export default function ChatList({
     return (
       <div className="w-full h-full flex justify-center items-center">
         <div className="flex flex-col gap-4 items-center">
-          <img
-            src={basePath  + "/ollama.png"}
-            alt="AI"
-            width={60}
-            height={60}
-            className="h-20 w-14 object-contain dark:invert"
-          />
+          <picture>
+            <img
+              src={basePath + "/ollama.png"}
+              alt="AI"
+              width={60}
+              height={60}
+              className="h-20 w-14 object-contain dark:invert"
+            />
+          </picture>
           <p className="text-center text-lg text-muted-foreground">
             How can I help you today?
           </p>
@@ -69,11 +71,13 @@ export default function ChatList({
                 {message.role === "assistant" && (
                   <div className="flex items-end gap-2">
                     <div className="flex justify-start items-center mt-0 mb-auto relative h-10 w-10 shrink-0 overflow-hidden">
-                      <img
-                        src={basePath + "/ollama.png"}
-                        alt="AI"
-                        className="object-contain dark:invert aspect-square h-full w-full"
-                      />
+                      <picture>
+                        <img
+                          src={basePath + "/ollama.png"}
+                          alt="AI"
+                          className="object-contain dark:invert aspect-square h-full w-full"
+                        />
+                      </picture>
                     </div>
                     <span className="bg-accent p-3 rounded-md max-w-xs sm:max-w-2xl overflow-x-auto">
                       {/* Check if the message content contains a code block */}
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index 160ca34..f72c32b 100644
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -20,7 +20,6 @@ import {
 import { DialogClose } from "@radix-ui/react-dialog";
 import { ChatOptions } from "./chat/chat-options";
 
-
 interface SidebarProps {
   isCollapsed: boolean;
   messages: Message[];
@@ -154,13 +153,15 @@ export function Sidebar({
         >
           <div className="flex gap-3 items-center">
             {!isCollapsed && !isMobile && (
-              <img
-                src={basePath + "/ollama.png"}
-                alt="AI"
-                width={28}
-                height={28}
-                className="dark:invert hidden 2xl:block"
-              />
+              <picture>
+                <img
+                  src={basePath + "/ollama.png"}
+                  alt="AI"
+                  width={28}
+                  height={28}
+                  className="dark:invert hidden 2xl:block"
+                />
+              </picture>
             )}
             New chat
           </div>
@@ -178,7 +179,10 @@ export function Sidebar({
                 </p>
                 <ol>
                   {localChats[group].map(({ chatId, messages }, chatIndex) => (
-                    <li className="flex w-full gap-0 items-center relative" key={chatIndex}>
+                    <li
+                      className="flex w-full gap-0 items-center relative"
+                      key={chatIndex}
+                    >
                       <div className="flex-col w-full truncate">
                         <Link
                           href={`/chats/${chatId.substring(5)}`}