wrap <img> in <picture> to avoid build warning

yoziru · Mar 28, 2024 · d18d8a4 · d18d8a4
1 parent 7df14d5
commit d18d8a4
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git 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
@@ -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)}`}