feat: Enhanced loading states with thinking icons and flying bird animation (#3478)

2025-07-22 12:47:39 -04:00
parent 9f356e7009
commit 914c537965
20 changed files with 532 additions and 8 deletions
@@ -146,6 +146,8 @@ function BaseChatContent({
    setAncestorMessages,
    append,
    isLoading,
+    isWaiting,
+    isStreaming,
    error,
    setMessages,
    input: _input,
@@ -488,7 +490,11 @@ function BaseChatContent({
          {/* Fixed loading indicator at bottom left of chat container */}
          {isLoading && (
            <div className="absolute bottom-1 left-4 z-20 pointer-events-none">
-              <LoadingGoose message={isLoadingSummary ? 'summarizing conversation…' : undefined} />
+              <LoadingGoose 
+                message={isLoadingSummary ? 'summarizing conversation…' : undefined}
+                isWaiting={isWaiting}
+                isStreaming={isStreaming}
+              />
            </div>
          )}
        </div>
@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+import { Bird1, Bird2, Bird3, Bird4, Bird5, Bird6 } from './icons';
+
+interface FlyingBirdProps {
+  className?: string;
+  cycleInterval?: number; // milliseconds between bird frame changes
+}
+
+const birdFrames = [
+  Bird1,
+  Bird2,
+  Bird3,
+  Bird4,
+  Bird5,
+  Bird6,
+];
+
+export default function FlyingBird({ 
+  className = '', 
+  cycleInterval = 150 
+}: FlyingBirdProps) {
+  const [currentFrameIndex, setCurrentFrameIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentFrameIndex((prevIndex) => 
+        (prevIndex + 1) % birdFrames.length
+      );
+    }, cycleInterval);
+
+    return () => clearInterval(interval);
+  }, [cycleInterval]);
+
+  const CurrentFrame = birdFrames[currentFrameIndex];
+
+  return (
+    <div className={`transition-opacity duration-75 ${className}`}>
+      <CurrentFrame className="w-4 h-4" />
+    </div>
+  );
+}
@@ -1,18 +1,43 @@
 import GooseLogo from './GooseLogo';
+import ThinkingIcons from './ThinkingIcons';
+import FlyingBird from './FlyingBird';

 interface LoadingGooseProps {
  message?: string;
+  isWaiting?: boolean;
+  isStreaming?: boolean;
 }

-const LoadingGoose = ({ message = 'goose is working on it…' }: LoadingGooseProps) => {
+const LoadingGoose = ({ 
+  message, 
+  isWaiting = false, 
+  isStreaming = false 
+}: LoadingGooseProps) => {
+  // Determine the appropriate message based on state
+  const getLoadingMessage = () => {
+    if (message) return message; // Custom message takes priority
+    
+    if (isWaiting) return 'goose is thinking…';
+    if (isStreaming) return 'goose is working on it…';
+    
+    // Default fallback
+    return 'goose is working on it…';
+  };
+
  return (
    <div className="w-full animate-fade-slide-up">
      <div
        data-testid="loading-indicator"
        className="flex items-center gap-2 text-xs text-textStandard py-2"
      >
-        <GooseLogo size="small" hover={false} />
-        {message}
+        {isWaiting ? (
+          <ThinkingIcons className="flex-shrink-0" cycleInterval={600} />
+        ) : isStreaming ? (
+          <FlyingBird className="flex-shrink-0" cycleInterval={150} />
+        ) : (
+          <GooseLogo size="small" hover={false} />
+        )}
+        {getLoadingMessage()}
      </div>
    </div>
  );
@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+import { CodeXml, Cog, Fuel, GalleryHorizontalEnd, Gavel, GlassWater, Grape } from './icons';
+
+interface ThinkingIconsProps {
+  className?: string;
+  cycleInterval?: number; // milliseconds between icon changes
+}
+
+const thinkingIcons = [
+  CodeXml,
+  Cog,
+  Fuel,
+  GalleryHorizontalEnd,
+  Gavel,
+  GlassWater,
+  Grape,
+];
+
+export default function ThinkingIcons({ 
+  className = '', 
+  cycleInterval = 500 
+}: ThinkingIconsProps) {
+  const [currentIconIndex, setCurrentIconIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIconIndex((prevIndex) => 
+        (prevIndex + 1) % thinkingIcons.length
+      );
+    }, cycleInterval);
+
+    return () => clearInterval(interval);
+  }, [cycleInterval]);
+
+  const CurrentIcon = thinkingIcons[currentIconIndex];
+
+  return (
+    <div className={`transition-opacity duration-200 ${className}`}>
+      <CurrentIcon className="w-4 h-4" />
+    </div>
+  );
+}
@@ -0,0 +1,31 @@
+export function Bird1({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="18"
+      height="16"
+      viewBox="0 0 18 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.0071 7.16447C10.5745 6.92558 11.2015 6.80613 11.7988 6.95544C12.1003 7.03082 12.5236 7.31174 12.9266 7.57912C13.3217 7.8413 13.6972 8.09046 13.9189 8.12003C14.116 8.14631 14.3825 8.13212 14.6446 8.11816C14.9781 8.10039 15.3045 8.08301 15.4717 8.14989C15.6038 8.20273 15.7301 8.39585 15.8686 8.6077C16.0432 8.87472 16.2372 9.17151 16.487 9.25476C16.5922 9.28984 16.7041 9.31998 16.8105 9.34866C17.157 9.44203 17.4461 9.51992 17.2634 9.70268C17.0245 9.94157 15.5613 10.0909 15.412 10.0312C15.3359 10.0007 15.3451 9.92367 15.3567 9.82777C15.3678 9.73558 15.3809 9.62596 15.3224 9.52351C15.2664 9.4255 15.1579 9.26841 15.0553 9.11996C14.9391 8.95179 14.8306 8.7947 14.8148 8.74712C14.6953 8.65753 14.1877 8.56795 14.1877 8.68739C14.1877 8.80684 14.337 9.67282 14.4564 9.79226C14.4745 9.8103 14.4925 9.82765 14.5095 9.84402C14.6051 9.93604 14.6683 9.99678 14.5161 9.97143C14.337 9.94157 13.3217 9.52351 12.9932 9.19504C12.6647 8.86656 12.187 8.41864 11.7689 8.41864C11.537 8.41864 10.9651 9.13537 10.4151 9.82462C9.97367 10.3779 9.54632 10.9135 9.32028 11.0464C8.81264 11.345 7.14041 12.0319 6.18485 12.0916C5.22928 12.1513 4.06469 12.1513 4.03483 11.8527C4.00497 11.5541 4.12442 11.2853 4.57234 11.345C5.02025 11.4048 8.6932 10.718 9.70848 9.67282C9.94369 9.43068 10.1356 9.23824 10.2902 9.08322C10.803 8.56912 10.9051 8.46672 10.8133 8.32906C10.7819 8.28192 10.6885 8.19137 10.5738 8.08026C10.2527 7.76904 9.76504 7.2965 10.0071 7.16447ZM15.2312 8.76968C15.2319 8.78023 15.2327 8.79236 15.2327 8.80683C15.2327 8.89641 15.2625 8.95613 15.3521 8.986C15.4417 9.01586 15.5014 8.89641 15.4716 8.80683C15.4417 8.71724 15.4118 8.62766 15.3521 8.62766C15.2269 8.70278 15.2277 8.71491 15.2312 8.76968Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.64867 4.38727C10.0966 4.80533 9.64867 6.68659 9.61881 6.80604C9.48385 7.34586 8.53703 6.96702 8.2454 6.49312C8.08882 6.23868 7.95806 5.94006 7.94658 5.64145C7.91672 4.86505 7.4688 4.11852 7.34935 3.76019C7.22991 3.40185 5.73684 2.83449 5.05003 2.65532C4.36322 2.47615 4.24378 1.19212 4.33336 1.01295C4.42295 0.83378 6.96116 2.56573 7.94658 3.01365C8.932 3.46157 9.20075 3.96922 9.64867 4.38727Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.91529 10.9269C3.70626 10.9269 3.58682 11.0464 3.34793 11.4346C3.08913 11.783 2.54167 12.5036 2.42223 12.5992C2.27292 12.7186 2.15348 12.4797 1.73542 12.4499C1.31736 12.42 0.929164 13.1367 0.749996 13.3457C0.570828 13.5547 1.55625 13.6145 2.54167 13.1367C3.5271 12.6589 4.0646 11.3749 4.15418 11.1658C4.24377 10.9568 4.12432 10.9269 3.91529 10.9269Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.18467 3.70048C6.96106 4.02896 7.17009 4.50674 7.19995 5.25327C7.26902 6.97998 7.44621 8.63468 5.86457 9.33089C4.73222 9.82934 3.61483 10.2557 3.40757 10.3297C2.98951 10.479 2.72076 10.6283 2.54159 10.8672C2.36242 11.1061 2.63117 11.1658 2.78048 11.4047C2.92979 11.6436 2.36242 11.9422 1.82492 11.9123C1.28741 11.8825 0.570744 11.4346 0.540882 11.0464C0.511021 10.6582 1.97422 10.27 2.54159 10.1207C3.10895 9.97135 3.91521 9.1651 4.42285 8.95607C4.93049 8.74704 4.36313 8.86649 4.21382 8.71718C4.06452 8.56787 3.94507 7.88106 3.91521 7.55259C3.88535 7.22411 3.52701 6.68661 3.40757 6.5373C3.28812 6.388 4.90063 6.47758 4.96035 6.35814C5.02008 6.23869 3.91521 6.26855 3.19854 6.14911C2.48187 6.02966 2.18325 5.55188 2.09367 5.40258C2.00409 5.25327 4.63188 5.70119 4.78119 5.55188C4.93049 5.40258 3.67632 5.40258 3.07909 5.28313C2.48187 5.16369 1.88464 5.04424 1.58603 4.83521C1.28741 4.62618 1.01866 4.11854 1.25755 4.23799C1.49644 4.35743 4.42285 4.89493 4.63188 4.77549C4.84091 4.65604 1.64575 3.93937 1.16797 3.7602C0.690189 3.58104 0.272131 2.74492 0.212408 2.56575C0.152686 2.38659 0.899218 2.92409 1.25755 3.04353C1.61589 3.16298 4.12424 3.99909 4.42285 3.93937C4.72146 3.87965 1.9145 2.89423 1.10825 2.56575C0.30199 2.23728 0.0631005 1.31158 0.00337795 1.07269C-0.0563446 0.833798 0.690188 1.34144 1.10825 1.61019C1.5263 1.87894 5.40827 3.37201 6.18467 3.70048Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,29 @@
+export function Bird2({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="19"
+      height="16"
+      viewBox="0 0 19 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.93716 13.1604C3.81771 12.9514 3.54896 13.1903 3.39965 13.3695C3.15081 13.7676 2.61729 14.5878 2.47395 14.6834C2.29479 14.8028 1.93645 14.5639 1.6677 14.5639C1.39895 14.5639 1.13019 14.8924 0.951027 15.0118C0.771859 15.1313 0.473246 15.6091 0.652414 15.6389C0.831582 15.6688 2.32465 15.4299 2.65312 15.2806C2.9816 15.1313 3.6684 14.1459 3.72813 13.9667C3.78785 13.7875 4.0566 13.3695 3.93716 13.1604Z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.1061 10.682C16.8074 10.7118 16.3595 10.7417 15.8817 10.891C15.8519 10.8611 15.7922 10.7835 15.7922 10.7118C15.7922 10.6223 15.7623 10.4729 15.5831 10.4132C15.404 10.3535 15.2248 9.69655 15.0755 9.63683C14.9262 9.57711 14.4783 9.69655 14.4783 9.99516C14.4783 10.2938 15.0158 10.7716 15.0755 10.9507C15.1352 11.1299 14.2394 10.8611 13.8512 10.8014C13.463 10.7417 12.2685 10.5924 11.731 10.891C11.1935 11.1896 9.19282 13.2799 8.68518 13.5188C8.17754 13.7577 6.26641 14.3251 5.69905 14.3251C5.13169 14.3251 3.96709 14.2355 3.84765 14.0862C3.7282 13.9369 4.08654 13.6084 4.44487 13.6382C4.80321 13.6681 5.90808 13.4292 7.49073 12.9813C9.07337 12.5334 10.8053 10.9209 10.9248 10.8014C11.0442 10.682 10.0887 9.87572 10.0588 9.69655C10.0289 9.51738 10.1484 9.48752 10.3275 9.45766C10.5067 9.4278 13.7317 9.4278 14.0602 9.39794C14.3887 9.36808 15.3442 9.06946 15.7623 9.09932C16.1804 9.12919 16.5686 9.816 16.8074 9.99516C17.0463 10.1743 17.4644 10.1743 17.6734 10.4132C17.8825 10.6521 17.4047 10.6521 17.1061 10.682Z"
+        fill="currentColor"
+      />
+      <path
+        d="M5.8782 7.21803C6.08723 7.57637 8.14766 9.90555 8.53586 10.025C8.53586 10.0847 8.3567 10.1146 7.99839 10.1743L7.99836 10.1743C7.64002 10.234 5.8782 11.1 5.31084 11.309C4.74348 11.5181 2.32471 13.041 2.08582 13.2202C1.84693 13.3993 2.59347 13.459 2.65318 13.6979C2.7129 13.9368 2.14554 14.116 1.84693 14.116C1.54832 14.116 1.04067 14.116 0.682339 13.907C0.324004 13.6979 0.264286 13.25 0.503176 12.9813C0.742066 12.7125 2.1754 12.3243 2.47402 12.175C2.77263 12.0257 4.47472 10.9806 4.50458 10.9208C4.53445 10.8611 3.99694 10.6819 3.90736 10.5924C3.81778 10.5028 4.83306 10.4431 4.8032 10.3535C4.77334 10.2639 3.69833 10.2937 3.45944 10.2937C3.22055 10.2937 2.92194 9.84583 2.92194 9.7861C2.92194 9.72638 4.47472 9.6368 4.47472 9.51735C4.47472 9.39791 2.77263 9.39791 2.59347 9.36805C2.4143 9.33819 1.99624 8.8604 1.96637 8.7111C1.93651 8.56179 4.08653 8.83054 4.08653 8.74096C4.08653 8.65138 1.78721 8.3229 1.6379 8.26318C1.48859 8.20346 1.24971 7.66595 1.18998 7.51665C1.13025 7.36734 1.30943 7.51665 1.45873 7.51665C1.60804 7.51665 3.63861 8.05415 3.75805 7.96457C3.8775 7.87498 3.16083 7.69581 2.92194 7.66595C2.68305 7.63609 1.04067 7.009 0.891368 6.91942C0.742062 6.82984 0.413587 6.0833 0.383726 5.96386C0.353865 5.84441 0.801784 6.0833 0.891368 6.14303C0.980952 6.20275 3.33999 7.15831 3.45944 7.12845C3.57889 7.09859 0.503176 5.48608 0.264286 5.27705C0.0253954 5.06802 0.144837 4.44093 0.174698 4.2319C0.20456 4.02287 1.24971 5.03816 1.36915 5.1576C1.48859 5.27705 3.31013 6.35206 3.45944 6.32219C3.60875 6.29233 2.83235 5.78469 2.32471 5.48608C1.81707 5.18747 0.35387 3.66454 0.264286 3.48537C0.174702 3.3062 0.383731 2.61939 0.503176 2.49995C0.622621 2.3805 0.980957 3.12704 1.24971 3.48537C1.51846 3.84371 3.19069 5.27705 3.36986 5.36663C3.54903 5.45622 2.89208 4.79927 2.59347 4.44093C2.29485 4.0826 0.831645 2.17147 0.742061 1.90272C0.652477 1.63397 1.2497 1.09647 1.30943 1.00688C1.36915 0.917301 1.87679 1.72356 2.08582 2.17147C2.29485 2.61939 3.75805 4.53052 3.99694 4.79927C4.23583 5.06802 5.66918 6.8597 5.8782 7.21803Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.34212 5.81456C9.2824 6.79998 9.8199 8.77082 9.93935 9.18888C9.80995 9.17893 9.51532 9.16499 9.37198 9.18888C9.19282 9.21874 8.7449 9.33819 8.65531 9.36805C8.56573 9.39791 7.72961 8.44235 7.55045 8.26318C7.37128 8.08401 6.14697 6.38192 6.08724 6.26248C6.02752 6.14303 6.32613 5.3965 6.32613 5.33677C6.32613 5.27705 7.37128 6.79998 7.55045 6.82984C7.72961 6.8597 6.53516 5.03816 6.44558 4.85899C6.35599 4.67983 6.59488 4.05274 6.68447 3.99302C6.77405 3.93329 6.77405 4.0826 6.83377 4.20205C6.8935 4.32149 7.69975 5.87428 7.84906 5.90414C7.99836 5.934 7.01294 3.75413 6.98308 3.5451C6.95322 3.33607 7.25183 3.03745 7.31155 2.97773C7.37128 2.91801 7.99836 4.85899 8.02823 4.94858C8.05809 5.03816 8.17753 5.12775 8.26712 5.09788C8.3567 5.06802 8.05809 4.70969 7.9685 4.53052C7.87892 4.35135 7.64003 2.67912 7.58031 2.44023C7.52058 2.20134 8.20739 1.81314 8.29698 1.75342C8.38656 1.6937 8.44628 4.02288 8.47615 4.20205C8.50601 4.38121 8.47615 4.41107 8.59559 4.41107C8.71504 4.41107 8.65531 1.87286 8.7449 1.60411C8.83448 1.33536 9.25254 1.15619 9.43171 1.03675C9.61087 0.917302 9.61087 1.09647 9.49143 1.54439C9.37198 1.99231 9.40185 4.82913 9.34212 5.81456Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,31 @@
+export function Bird3({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="19"
+      height="16"
+      viewBox="0 0 19 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.9385 7.16441C11.5059 6.92552 12.1329 6.80607 12.7302 6.95538C13.0317 7.03076 13.455 7.31168 13.858 7.57905C14.2531 7.84124 14.6286 8.0904 14.8503 8.11997C15.0474 8.14625 15.3139 8.13205 15.576 8.11809C15.9095 8.10033 16.2359 8.08294 16.4031 8.14983C16.5352 8.20267 16.6615 8.39578 16.8 8.60764C16.9746 8.87465 17.1686 9.17144 17.4184 9.2547C17.5236 9.28978 17.6355 9.31992 17.7419 9.3486C18.0884 9.44197 18.3775 9.51986 18.1948 9.70262C17.9559 9.94151 16.4927 10.0908 16.3434 10.0311C16.2673 10.0006 16.2765 9.92361 16.2881 9.8277C16.2992 9.73552 16.3123 9.6259 16.2538 9.52345C16.1978 9.42544 16.0893 9.26835 15.9867 9.1199C15.8705 8.95173 15.762 8.79464 15.7462 8.74706C15.6267 8.65747 15.1191 8.56789 15.1191 8.68733C15.1191 8.80678 15.2684 9.67276 15.3878 9.7922C15.4059 9.81024 15.4239 9.82759 15.4409 9.84396C15.5365 9.93598 15.5997 9.99672 15.4475 9.97137C15.2684 9.94151 14.2531 9.52345 13.9246 9.19497C13.5961 8.8665 13.1184 8.41858 12.7003 8.41858C12.4684 8.41858 11.8965 9.1353 11.3465 9.82456C10.9051 10.3778 10.4777 10.9134 10.2517 11.0464C9.74404 11.345 8.0718 12.0318 7.11624 12.0915C6.16068 12.1512 4.99609 12.1512 4.96623 11.8526C4.93637 11.554 5.05581 11.2853 5.50373 11.345C5.95165 11.4047 9.62459 10.7179 10.6399 9.67276C10.8751 9.43062 11.067 9.23818 11.2216 9.08316C11.7344 8.56906 11.8365 8.46666 11.7447 8.329C11.7133 8.28186 11.6199 8.19131 11.5052 8.08019C11.1841 7.76898 10.6964 7.29644 10.9385 7.16441ZM16.1628 8.76968C16.1635 8.78022 16.1643 8.79235 16.1643 8.80682C16.1643 8.89641 16.1941 8.95613 16.2837 8.98599C16.3733 9.01585 16.433 8.89641 16.4031 8.80682C16.3733 8.71724 16.3434 8.62765 16.2837 8.62765C16.1585 8.70277 16.1593 8.7149 16.1628 8.76968Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.5806 4.38727C11.0285 4.80533 10.5806 6.68659 10.5507 6.80604C10.4157 7.34586 9.46892 6.96702 9.17729 6.49312C9.0207 6.23868 8.88995 5.94006 8.87846 5.64145C8.8486 4.86505 8.40068 4.11852 8.28124 3.76019C8.16179 3.40185 6.66873 2.83449 5.98192 2.65532C5.29511 2.47615 5.17566 1.19212 5.26525 1.01295C5.35483 0.83378 7.89304 2.56573 8.87846 3.01365C9.86389 3.46157 10.1326 3.96922 10.5806 4.38727Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.84718 10.9269C4.63815 10.9269 4.5187 11.0464 4.27981 11.4346C4.02102 11.783 3.47356 12.5036 3.35411 12.5992C3.20481 12.7186 3.08536 12.4797 2.6673 12.4499C2.24925 12.42 1.86105 13.1367 1.68188 13.3457C1.50271 13.5547 2.48814 13.6145 3.47356 13.1367C4.45898 12.6589 4.99648 11.3749 5.08607 11.1658C5.17565 10.9568 5.05621 10.9269 4.84718 10.9269Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.11655 3.70048C7.89294 4.02896 8.10197 4.50674 8.13183 5.25327C8.2009 6.97998 8.3781 8.63468 6.79646 9.33089C5.6641 9.82934 4.54671 10.2557 4.33945 10.3297C3.92139 10.479 3.65264 10.6283 3.47347 10.8672C3.29431 11.1061 3.56306 11.1658 3.71236 11.4047C3.86167 11.6436 3.29431 11.9422 2.7568 11.9123C2.2193 11.8825 1.50263 11.4346 1.47277 11.0464C1.44291 10.6582 2.90611 10.27 3.47347 10.1207C4.04084 9.97135 4.84709 9.1651 5.35474 8.95607C5.86238 8.74704 5.29501 8.86649 5.14571 8.71718C4.9964 8.56787 4.87695 7.88106 4.84709 7.55259C4.81723 7.22411 4.4589 6.68661 4.33945 6.5373C4.22001 6.388 5.83252 6.47758 5.89224 6.35814C5.95196 6.23869 4.84709 6.26855 4.13042 6.14911C3.41375 6.02966 3.11514 5.55188 3.02555 5.40258C2.93597 5.25327 5.56376 5.70119 5.71307 5.55188C5.86238 5.40258 4.6082 5.40258 4.01098 5.28313C3.41375 5.16369 2.81653 5.04424 2.51791 4.83521C2.2193 4.62618 1.95055 4.11854 2.18944 4.23799C2.42833 4.35743 5.35474 4.89493 5.56376 4.77549C5.77279 4.65604 2.57764 3.93937 2.09985 3.7602C1.62207 3.58104 1.20402 2.74492 1.14429 2.56575C1.08457 2.38659 1.8311 2.92409 2.18944 3.04353C2.54777 3.16298 5.05612 3.99909 5.35474 3.93937C5.65335 3.87965 2.84639 2.89423 2.04013 2.56575C1.23387 2.23728 0.994985 1.31158 0.935263 1.07269C0.87554 0.833798 1.62207 1.34144 2.04013 1.61019C2.45819 1.87894 6.34016 3.37201 7.11655 3.70048Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,31 @@
+export function Bird4({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="19"
+      height="16"
+      viewBox="0 0 19 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.5046 4.68308C11.072 4.44419 11.6991 4.32475 12.2963 4.47405C12.5979 4.54944 13.0212 4.83036 13.4241 5.09773C13.8192 5.35992 14.1947 5.60908 14.4165 5.63865C14.6136 5.66493 14.8801 5.65073 15.1421 5.63677C15.4757 5.61901 15.8021 5.60162 15.9693 5.66851C16.1014 5.72135 16.2276 5.91446 16.3662 6.12632C16.5407 6.39333 16.7348 6.69012 16.9845 6.77337C17.0898 6.80846 17.2017 6.8386 17.3081 6.86728C17.6546 6.96064 17.9437 7.03854 17.7609 7.22129C17.5221 7.46018 16.0588 7.60949 15.9095 7.54977C15.8334 7.51932 15.8427 7.44228 15.8542 7.34638C15.8653 7.2542 15.8785 7.14457 15.82 7.04213C15.764 6.94412 15.6554 6.78703 15.5529 6.63857C15.4367 6.4704 15.3282 6.31331 15.3123 6.26573C15.1929 6.17615 14.6852 6.08656 14.6852 6.20601C14.6852 6.32545 14.8345 7.19143 14.954 7.31088C14.972 7.32891 14.9901 7.34627 15.0071 7.36263C15.1027 7.45465 15.1658 7.5154 15.0137 7.49005C14.8345 7.46018 13.8193 7.04213 13.4908 6.71365C13.1623 6.38518 12.6845 5.93726 12.2665 5.93726C12.0346 5.93726 11.4627 6.65398 10.9127 7.34324C10.4712 7.89651 10.0439 8.43209 9.81784 8.56505C9.3102 8.86366 7.63797 9.55047 6.6824 9.6102C5.72684 9.66992 4.56225 9.66992 4.53239 9.37131C4.50253 9.07269 4.62197 8.80394 5.06989 8.86366C5.51781 8.92339 9.19075 8.23658 10.206 7.19143C10.4413 6.9493 10.6332 6.75685 10.7878 6.60184C11.3005 6.08774 11.4027 5.98533 11.3109 5.84767C11.2795 5.80053 11.186 5.70999 11.0714 5.59887C10.7502 5.28766 10.2626 4.81511 10.5046 4.68308ZM15.7288 6.28827C15.7295 6.29882 15.7302 6.31095 15.7302 6.32542C15.7302 6.415 15.7601 6.47472 15.8497 6.50458C15.9393 6.53444 15.999 6.415 15.9691 6.32542C15.9393 6.23583 15.9094 6.14625 15.8497 6.14625C15.7245 6.22137 15.7253 6.2335 15.7288 6.28827Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.0557 2.8976C10.503 3.16932 10.0557 4.39206 10.0259 4.46969C9.83054 4.97831 8.92172 4.59616 8.57458 4.17622C8.45571 4.03242 8.36549 3.87259 8.35605 3.71276C8.32623 3.20814 8.11396 3.14648 7.99469 2.91358C7.87542 2.68067 6.09783 2.19234 5.412 2.07589C4.72618 1.95944 4.6069 1.12487 4.69636 1.00842C4.78581 0.89197 7.3204 2.01766 8.30441 2.30879C9.28843 2.59992 9.60843 2.62588 10.0557 2.8976Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.41285 8.44556C4.20382 8.44556 4.08438 8.565 3.84549 8.9532C3.58669 9.30158 3.03923 10.0222 2.91979 10.1178C2.77048 10.2372 2.65104 9.99834 2.23298 9.96848C1.81492 9.93862 1.42672 10.6553 1.24755 10.8643C1.06839 11.0734 2.05381 11.1331 3.03923 10.6553C4.02466 10.1775 4.56216 8.89348 4.65174 8.68445C4.74133 8.47542 4.62188 8.44556 4.41285 8.44556Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.1522 3.29942C7.93098 3.5802 8.14066 3.98861 8.17061 4.62675C8.22066 5.69301 8.33281 6.72037 7.34497 7.12482C5.97621 7.68524 4.24434 8.24981 3.98068 8.33005C3.56134 8.45768 3.29176 8.58531 3.11204 8.78951C2.93232 8.99372 3.2019 9.04477 3.35167 9.24897C3.50143 9.45318 2.93232 9.70843 2.39316 9.6829C1.854 9.65738 1.13513 9.2745 1.10517 8.94267C1.07522 8.61083 2.54293 8.279 3.11204 8.15138C3.68115 8.02375 4.48989 7.33456 4.99909 7.15588C5.5083 6.9772 4.93919 7.0793 4.78942 6.95167C4.63966 6.82405 4.51984 6.23696 4.48989 5.95617C4.47293 5.79717 4.35031 5.58088 4.22537 5.39998C4.20255 5.39823 4.17971 5.39576 4.15687 5.39252C3.43799 5.29041 3.13846 4.882 3.0486 4.75438C2.95874 4.62675 5.59463 5.00963 5.7444 4.882C5.89416 4.75438 4.63612 4.75438 4.03706 4.65227C3.43799 4.55017 2.83893 4.44807 2.5394 4.26939C2.23986 4.09071 1.97029 3.65678 2.20991 3.75888C2.44954 3.86098 5.38496 4.32044 5.59463 4.21834C5.8043 4.11624 2.5993 3.50362 2.12005 3.35047C1.6408 3.19732 1.22145 2.4826 1.16155 2.32945C1.10164 2.17629 1.85047 2.63575 2.20991 2.73786L2.20991 2.73786C2.56936 2.83996 5.08542 3.55467 5.38496 3.50362C5.68449 3.45257 2.86888 2.61023 2.06014 2.32945C1.2514 2.04867 1.01178 1.25737 0.951873 1.05317C0.891967 0.848963 1.6408 1.2829 2.06014 1.51263C2.47949 1.74236 6.37341 3.01864 7.1522 3.29942Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,25 @@
+export function Bird5({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="19"
+      height="16"
+      viewBox="0 0 19 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.2491 4.29397C16.7714 4.29397 16.4429 4.3537 16.1144 4.44328C16.0547 4.30393 15.8934 4.00133 15.7262 3.90578C15.5172 3.78633 15.3679 3.18911 15.2783 3.12938C15.1887 3.06966 14.5318 3.0398 14.5019 3.12938C14.472 3.21897 14.9797 4.29397 15.0394 4.38356C15.0991 4.47314 14.9498 4.44328 14.7408 4.44328C14.5318 4.44328 13.0686 3.84605 12.6804 3.69675C12.2922 3.54744 11.3665 3.54744 10.9783 3.5773C10.5901 3.60716 8.7984 4.80162 8.55951 4.8912C8.32062 4.98078 7.93243 4.08494 7.42478 3.54744C6.91714 3.00994 7.12617 2.17382 7.06645 1.96479C7.00673 1.75576 6.73797 1.69604 6.29005 1.69604C5.84213 1.69604 5.03588 2.02452 4.64768 2.17382C4.25949 2.32313 2.46781 3.90578 2.37822 4.08494C2.28864 4.26411 2.01989 4.44328 1.75114 4.44328C1.48239 4.44328 0.944881 4.74189 0.735852 4.65231C0.526823 4.56273 1.03447 4.08494 1.45252 3.75647C1.87058 3.428 3.2442 2.32313 4.91643 1.54674C6.58867 0.770342 8.44006 1.03909 8.7984 1.06895C9.15674 1.09882 8.82826 1.27798 8.6491 1.27798C8.46993 1.27798 7.81297 1.48701 7.60394 2.02452C7.39491 2.56202 8.23103 3.78633 8.44006 3.84605C8.64909 3.90578 10.381 3.24883 10.5005 3.12938C10.6199 3.00994 9.7241 2.08424 9.69423 1.78563C9.66437 1.48701 9.7241 1.42729 10.0526 1.48701C10.381 1.54673 12.4415 2.20368 12.8297 2.32313C13.2179 2.44257 14.3526 2.59188 14.5915 2.59188C14.8304 2.59188 15.7561 2.41271 16.204 2.59188C16.6519 2.77105 16.8012 3.18911 16.9207 3.33841C17.0401 3.48772 17.8464 3.54744 18.0853 3.84605C18.3241 4.14467 17.7269 4.29397 17.2491 4.29397Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.7109 8.74323C12.4116 7.25017 11.0678 4.41334 10.8289 4.14459C10.1819 4.49297 8.87601 5.21363 8.82823 5.30918C8.76851 5.42863 10.2018 7.13072 10.5005 7.57864C10.7991 8.02656 14.5019 11.162 14.6512 11.4009C14.8005 11.6398 16.1144 11.7294 16.3234 11.5801C16.5324 11.4307 14.263 10.2064 13.8748 9.93768C13.4866 9.66893 12.5609 8.71337 12.7401 8.80295C12.9192 8.89254 15.4873 10.7738 15.8456 10.8335C16.204 10.8932 17.9359 10.8634 18.1748 10.5648C18.4137 10.2662 17.0102 10.2363 14.7109 8.74323Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.37946 2.20368C6.40932 3.09952 6.8871 4.1148 7.87253 5.21967C8.85795 6.32454 10.2614 8.05649 10.5899 8.50441C10.9184 8.95233 13.0087 10.9232 13.367 11.0426C13.7253 11.1621 14.1434 11.3114 14.0538 11.4607C13.9642 11.61 13.0087 11.7294 12.4413 11.5503C11.8739 11.3711 9.69407 9.10164 9.33573 8.77317C9.26287 8.70638 9.19747 8.63046 9.13962 8.55158C9.55869 9.35053 10.1653 10.409 10.5899 10.8336C11.2767 11.5204 12.6205 12.0579 12.5309 12.1475C12.4413 12.2371 10.56 12.1176 10.0225 11.7892C9.48504 11.4607 7.93225 8.53428 7.8128 8.32525C7.69336 8.11622 7.57391 7.87733 7.60377 8.05649C7.63364 8.23566 8.35031 10.326 8.5892 10.744C8.82809 11.1621 9.06698 11.6398 8.82809 11.5503C8.5892 11.4607 7.36488 10.744 7.18572 10.4155C7.00655 10.0871 6.55863 7.72802 6.49891 7.93705C6.43918 8.14608 6.7378 9.84817 6.55863 9.78845C6.37946 9.72873 5.39404 9.1315 5.30445 8.65372C5.21487 8.17594 5.15515 7.36968 5.09543 7.57871C5.0357 7.78774 4.97598 8.2058 4.79681 8.2058C4.61765 8.2058 3.66208 7.42941 3.60236 7.2801C3.54264 7.13079 3.33361 7.16066 3.1843 7.04121C3.035 6.92177 2.07944 5.84676 2.13916 5.48842C2.19888 5.13009 3.33361 3.69675 4.02042 3.21896C4.70723 2.74118 5.72251 2.20368 5.99126 2.20368C6.26002 2.20368 6.36457 1.99465 6.37946 2.20368Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,31 @@
+export function Bird6({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="19"
+      height="16"
+      viewBox="0 0 19 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.0567 4.68302C10.624 4.44413 11.2511 4.32469 11.8483 4.47399C12.1499 4.54938 12.5732 4.8303 12.9761 5.09767C13.3712 5.35985 13.7467 5.60902 13.9685 5.63858C14.1656 5.66486 14.4321 5.65067 14.6941 5.63671C15.0277 5.61895 15.3541 5.60156 15.5213 5.66845C15.6534 5.72129 15.7796 5.9144 15.9182 6.12625C16.0927 6.39327 16.2868 6.69006 16.5366 6.77331C16.6418 6.8084 16.7537 6.83854 16.8601 6.86722C17.2066 6.96058 17.4957 7.03848 17.3129 7.22123C17.0741 7.46012 15.6109 7.60943 15.4615 7.54971C15.3854 7.51926 15.3947 7.44222 15.4062 7.34632C15.4173 7.25414 15.4305 7.14451 15.372 7.04206C15.316 6.94406 15.2074 6.78697 15.1049 6.63851C14.9887 6.47034 14.8802 6.31325 14.8643 6.26567C14.7449 6.17609 14.2372 6.0865 14.2372 6.20595C14.2372 6.32539 14.3865 7.19137 14.506 7.31082C14.524 7.32885 14.5421 7.34621 14.5591 7.36257C14.6547 7.45459 14.7178 7.51534 14.5657 7.48998C14.3865 7.46012 13.3713 7.04206 13.0428 6.71359C12.7143 6.38512 12.2365 5.9372 11.8185 5.9372C11.5866 5.9372 11.0147 6.65392 10.4647 7.34318C10.0232 7.89645 9.59588 8.43202 9.36984 8.56499C8.8622 8.8636 7.18997 9.55041 6.23441 9.61014C5.27884 9.66986 4.11425 9.66986 4.08439 9.37125C4.05453 9.07263 4.17398 8.80388 4.6219 8.8636C5.06982 8.92333 8.74276 8.23652 9.75804 7.19137C9.99325 6.94924 10.1852 6.75679 10.3398 6.60177C10.8525 6.08768 10.9547 5.98527 10.8629 5.84761C10.8315 5.80047 10.738 5.70993 10.6234 5.59881C10.3022 5.2876 9.8146 4.81505 10.0567 4.68302ZM15.2809 6.28828C15.2815 6.29883 15.2823 6.31096 15.2823 6.32542C15.2823 6.41501 15.3122 6.47473 15.4018 6.50459C15.4913 6.53445 15.5511 6.41501 15.5212 6.32542C15.4913 6.23584 15.4615 6.14625 15.4018 6.14625C15.2766 6.22137 15.2773 6.2335 15.2809 6.28828Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.60796 2.8976C10.0552 3.16932 9.60796 4.39206 9.57814 4.46969C9.38279 4.97831 8.47396 4.59616 8.12682 4.17622C8.00795 4.03242 7.91774 3.87259 7.90829 3.71276C7.87848 3.20814 7.66621 3.14648 7.54694 2.91358C7.42766 2.68067 5.65008 2.19234 4.96425 2.07589C4.27842 1.95944 4.15915 1.12487 4.2486 1.00842C4.33806 0.89197 6.87264 2.01766 7.85666 2.30879C8.84068 2.59992 9.16068 2.62588 9.60796 2.8976Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.9651 8.44556C3.75607 8.44556 3.63662 8.565 3.39773 8.9532C3.13894 9.30158 2.59148 10.0222 2.47203 10.1178C2.32273 10.2372 2.20328 9.99834 1.78522 9.96848C1.36717 9.93862 0.978969 10.6553 0.799801 10.8643C0.620633 11.0734 1.60606 11.1331 2.59148 10.6553C3.5769 10.1775 4.1144 8.89348 4.20399 8.68445C4.29357 8.47542 4.17413 8.44556 3.9651 8.44556Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.7042 3.29942C7.48298 3.5802 7.69266 3.98861 7.72261 4.62675C7.77266 5.69301 7.88481 6.72037 6.89697 7.12482C5.52821 7.68524 3.79634 8.24981 3.53269 8.33005C3.11334 8.45768 2.84376 8.58531 2.66404 8.78951C2.48432 8.99372 2.7539 9.04477 2.90367 9.24897C3.05343 9.45318 2.48432 9.70843 1.94516 9.6829C1.40601 9.65738 0.687127 9.2745 0.657174 8.94267C0.627221 8.61083 2.09493 8.279 2.66404 8.15138C3.23315 8.02375 4.04189 7.33456 4.5511 7.15588C5.0603 6.9772 4.49119 7.0793 4.34142 6.95167C4.19166 6.82405 4.07184 6.23696 4.04189 5.95617C4.02493 5.79717 3.90231 5.58088 3.77738 5.39998C3.75455 5.39823 3.73171 5.39576 3.70887 5.39252C2.99 5.29041 2.69046 4.882 2.6006 4.75438C2.51074 4.62675 5.14663 5.00963 5.2964 4.882C5.44616 4.75438 4.18813 4.75438 3.58906 4.65227C2.99 4.55017 2.39093 4.44807 2.0914 4.26939C1.79187 4.09071 1.52229 3.65678 1.76191 3.75888C2.00154 3.86098 4.93696 4.32044 5.14663 4.21834C5.3563 4.11624 2.15131 3.50362 1.67205 3.35047C1.1928 3.19732 0.773456 2.4826 0.713549 2.32945C0.653643 2.17629 1.40247 2.63575 1.76191 2.73786L1.76192 2.73786C2.12137 2.83996 4.63743 3.55467 4.93696 3.50362C5.23649 3.45257 2.42088 2.61023 1.61215 2.32945C0.803407 2.04867 0.563782 1.25737 0.503875 1.05317C0.443969 0.848963 1.1928 1.2829 1.61215 1.51263C2.03149 1.74236 5.92542 3.01864 6.7042 3.29942Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,26 @@
+export function CodeXml({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_395_859)">
+        <path
+          d="M11.9999 10.6666L14.6666 7.99996L11.9999 5.33329M3.99992 5.33329L1.33325 7.99996L3.99992 10.6666M9.66659 2.66663L6.33325 13.3333"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_395_859">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,26 @@
+export function Cog({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_395_860)">
+        <path
+          d="M7.99992 13.3334C9.41441 13.3334 10.771 12.7715 11.7712 11.7713C12.7713 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7713 5.229 11.7712 4.2288C10.771 3.22861 9.41441 2.66671 7.99992 2.66671M7.99992 13.3334C6.58543 13.3334 5.22888 12.7715 4.22868 11.7713C3.22849 10.7711 2.66659 9.41453 2.66659 8.00004M7.99992 13.3334L7.99992 14.6667M7.99992 2.66671C6.58543 2.66671 5.22888 3.22861 4.22868 4.2288C3.22849 5.229 2.66659 6.58555 2.66659 8.00004M7.99992 2.66671L7.99992 1.33337M2.66659 8.00004L1.33325 8.00004M9.33325 8.00004C9.33325 8.35366 9.19278 8.6928 8.94273 8.94285C8.69268 9.1929 8.35354 9.33337 7.99992 9.33337C7.6463 9.33337 7.30716 9.1929 7.05711 8.94285C6.80706 8.6928 6.66659 8.35366 6.66659 8.00004C6.66659 7.64642 6.80706 7.30728 7.05711 7.05723C7.30716 6.80718 7.6463 6.66671 7.99992 6.66671C8.35354 6.66671 8.69268 6.80718 8.94273 7.05723C9.19278 7.30728 9.33325 7.64642 9.33325 8.00004ZM9.33325 8.00004L14.6666 8.00004M11.3333 13.7733L10.6666 12.62M7.33325 6.84677L4.66659 2.22677M13.7734 11.3334L12.62 10.6667M2.22648 4.66671L3.37981 5.33337M13.7734 4.66671L12.62 5.33337M2.22648 11.3334L3.37981 10.6667M11.3333 2.22677L10.6666 3.3801M7.33325 9.15336L4.66659 13.7734"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_395_860">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,26 @@
+export function Fuel({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="17"
+      height="17"
+      viewBox="0 0 17 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_395_854)">
+        <path
+          d="M2.93506 14.8505L10.9351 14.8505M3.60173 6.18388L10.2684 6.18388M10.2684 14.8505L10.2684 2.85055C10.2684 2.49692 10.1279 2.15778 9.87787 1.90774C9.62782 1.65769 9.28868 1.51721 8.93506 1.51721L4.93506 1.51721C4.58144 1.51721 4.2423 1.65769 3.99225 1.90774C3.7422 2.15778 3.60173 2.49692 3.60173 2.85055L3.60173 14.8505M10.2684 8.85055L11.6017 8.85055C11.9553 8.85055 12.2945 8.99102 12.5445 9.24107C12.7946 9.49112 12.9351 9.83026 12.9351 10.1839L12.9351 11.5172C12.9351 11.8708 13.0755 12.21 13.3256 12.46C13.5756 12.7101 13.9148 12.8505 14.2684 12.8505C14.622 12.8505 14.9612 12.7101 15.2112 12.46C15.4612 12.21 15.6017 11.8708 15.6017 11.5172L15.6017 6.73721C15.6019 6.56127 15.5672 6.38704 15.4997 6.22457C15.4322 6.06209 15.3332 5.91458 15.2084 5.79055L12.9351 3.51721"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_395_854">
+          <rect width="16" height="16" fill="white" transform="translate(0.935059 0.183899)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,26 @@
+export function GalleryHorizontalEnd({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_395_855)">
+        <path
+          d="M1.33325 4.66667L1.33325 11.3333M3.99992 3.33333L3.99992 12.6667M7.99992 2L13.3333 2C14.0696 2 14.6666 2.59695 14.6666 3.33333L14.6666 12.6667C14.6666 13.403 14.0696 14 13.3333 14L7.99992 14C7.26354 14 6.66659 13.403 6.66659 12.6667L6.66659 3.33333C6.66659 2.59695 7.26354 2 7.99992 2Z"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_395_855">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,26 @@
+export function Gavel({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_395_856)">
+        <path
+          d="M10.6018 8.33331L5.26846 13.6666C5.00325 13.9319 4.64353 14.0809 4.26846 14.0809C3.89339 14.0809 3.53368 13.9319 3.26846 13.6666C3.00325 13.4014 2.85425 13.0417 2.85425 12.6666C2.85425 12.2916 3.00325 11.9319 3.26846 11.6666L8.6018 6.33331M11.6016 10.6666L15.6016 6.66665M6.26831 5.33331L10.2683 1.33331M6.93498 4.66665L12.2683 9.99998M14.935 7.33331L9.60164 1.99998"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_395_856">
+          <rect width="16" height="16" fill="white" transform="translate(0.935059)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,19 @@
+export function GlassWater({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="16"
+      height="17"
+      viewBox="0 0 16 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.99992 8.8161C4.57691 8.38336 5.27868 8.14943 5.99992 8.14943C6.72115 8.14943 7.42293 8.38336 7.99992 8.8161C8.57691 9.24884 9.27868 9.48277 9.99992 9.48277C10.7212 9.48277 11.4229 9.24884 11.9999 8.8161M10.1333 15.4828L5.86659 15.4828C5.53593 15.4846 5.2164 15.3635 4.97001 15.143C4.72363 14.9225 4.56797 14.6183 4.53325 14.2894L3.33325 2.8161L12.6666 2.8161L11.4599 14.2894C11.4253 14.6171 11.2706 14.9204 11.0256 15.1407C10.7807 15.3611 10.4628 15.4829 10.1333 15.4828Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,26 @@
+export function Grape({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_395_858)">
+        <path
+          d="M14.6665 3.33337L14.6665 1.33337L10.7398 5.26004M13.0667 10.5933C13.0667 11.6979 12.1712 12.5933 11.0667 12.5933C9.96208 12.5933 9.06665 11.6979 9.06665 10.5933C9.06665 9.48873 9.96208 8.5933 11.0667 8.5933C12.1712 8.5933 13.0667 9.48873 13.0667 10.5933ZM7.40649 4.93331C7.40649 6.03788 6.51106 6.93331 5.40649 6.93331C4.30192 6.93331 3.40649 6.03788 3.40649 4.93331C3.40649 3.82874 4.30192 2.93331 5.40649 2.93331C6.51106 2.93331 7.40649 3.82874 7.40649 4.93331ZM10.2333 7.76664C10.2333 8.87121 9.33789 9.76664 8.23332 9.76664C7.12875 9.76664 6.23332 8.87121 6.23332 7.76664C6.23332 6.66207 7.12875 5.76664 8.23332 5.76664C9.33789 5.76664 10.2333 6.66207 10.2333 7.76664ZM11.2734 3.90011C11.2734 5.00468 10.3779 5.90011 9.27336 5.90011C8.16879 5.90011 7.27336 5.00468 7.27336 3.90011C7.27336 2.79554 8.16879 1.90011 9.27336 1.90011C10.3779 1.90011 11.2734 2.79554 11.2734 3.90011ZM14.0999 6.72677C14.0999 7.83134 13.2044 8.72677 12.0999 8.72677C10.9953 8.72677 10.0999 7.83134 10.0999 6.72677C10.0999 5.6222 10.9953 4.72677 12.0999 4.72677C13.2044 4.72677 14.0999 5.6222 14.0999 6.72677ZM6.37329 8.80001C6.37329 9.90458 5.47786 10.8 4.37329 10.8C3.26872 10.8 2.37329 9.90458 2.37329 8.80001C2.37329 7.69544 3.26872 6.80001 4.37329 6.80001C5.47786 6.80001 6.37329 7.69544 6.37329 8.80001ZM9.19979 11.6267C9.19979 12.7312 8.30436 13.6267 7.19979 13.6267C6.09522 13.6267 5.19979 12.7312 5.19979 11.6267C5.19979 10.5221 6.09522 9.62667 7.19979 9.62667C8.30436 9.62667 9.19979 10.5221 9.19979 11.6267ZM5.33325 12.6667C5.33325 13.7713 4.43782 14.6667 3.33325 14.6667C2.22868 14.6667 1.33325 13.7713 1.33325 12.6667C1.33325 11.5621 2.22868 10.6667 3.33325 10.6667C4.43782 10.6667 5.33325 11.5621 5.33325 12.6667Z"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_395_858">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
@@ -2,17 +2,30 @@ import ArrowDown from './ArrowDown';
 import ArrowUp from './ArrowUp';
 import Attach from './Attach';
 import Back from './Back';
+import { Bird1 } from './Bird1';
+import { Bird2 } from './Bird2';
+import { Bird3 } from './Bird3';
+import { Bird4 } from './Bird4';
+import { Bird5 } from './Bird5';
+import { Bird6 } from './Bird6';
 import ChatSmart from './ChatSmart';
 import Check from './Check';
 import ChevronDown from './ChevronDown';
 import ChevronUp from './ChevronUp';
 import { ChevronRight } from './ChevronRight';
 import Close from './Close';
+import { CodeXml } from './CodeXml';
+import { Cog } from './Cog';
 import CoinIcon from './CoinIcon';
 import Copy from './Copy';
 import Discord from './Discord';
 import Document from './Document';
 import Edit from './Edit';
+import { Fuel } from './Fuel';
+import { GalleryHorizontalEnd } from './GalleryHorizontalEnd';
+import { Gavel } from './Gavel';
+import { GlassWater } from './GlassWater';
+import { Grape } from './Grape';
 import Idea from './Idea';
 import LinkedIn from './LinkedIn';
 import More from './More';
@@ -31,21 +44,34 @@ export {
  ArrowUp,
  Attach,
  Back,
+  Bird1,
+  Bird2,
+  Bird3,
+  Bird4,
+  Bird5,
+  Bird6,
  ChatSmart,
  Check,
  ChevronDown,
  ChevronRight,
  ChevronUp,
  Close,
+  CodeXml,
+  Cog,
  CoinIcon,
  Copy,
  Discord,
  Document,
  Edit,
-  Idea,
+  Fuel,
+  GalleryHorizontalEnd,
+  Gavel,
  Gear,
-  Microphone,
+  GlassWater,
+  Grape,
+  Idea,
  LinkedIn,
+  Microphone,
  More,
  Refresh,
  SensitiveHidden,
@@ -68,6 +68,8 @@ export const useChatEngine = ({
    append: originalAppend,
    stop,
    isLoading,
+    isWaiting,
+    isStreaming,
    error,
    setMessages,
    input: _input,
@@ -369,6 +371,8 @@ export const useChatEngine = ({
    append,
    stop,
    isLoading,
+    isWaiting,
+    isStreaming,
    error,
    setMessages,

@@ -148,6 +148,12 @@ export interface UseMessageStreamHelpers {
  /** Whether the API request is in progress */
  isLoading: boolean;

+  /** Whether we're waiting for the first response from LLM */
+  isWaiting: boolean;
+
+  /** Whether we're actively streaming response content */
+  isStreaming: boolean;
+
  /** Add a tool result to a tool call */
  addToolResult: ({ toolCallId, result }: { toolCallId: string; result: unknown }) => void;

@@ -214,6 +220,17 @@ export function useMessageStream({
    null
  );

+  // Track waiting vs streaming states
+  const { data: isWaiting = false, mutate: mutateWaiting } = useSWR<boolean>(
+    [chatKey, 'waiting'],
+    null
+  );
+
+  const { data: isStreaming = false, mutate: mutateStreaming } = useSWR<boolean>(
+    [chatKey, 'streaming'],
+    null
+  );
+
  const { data: error = undefined, mutate: setError } = useSWR<undefined | Error>(
    [chatKey, 'error'],
    null
@@ -273,6 +290,10 @@ export function useMessageStream({

                switch (parsedEvent.type) {
                  case 'Message': {
+                    // Transition from waiting to streaming on first message
+                    mutateWaiting(false);
+                    mutateStreaming(true);
+
                    // Create a new message object with the properties preserved or defaulted
                    const newMessage = {
                      ...parsedEvent.message,
@@ -432,7 +453,7 @@ export function useMessageStream({

      return currentMessages;
    },
-    [mutate, onFinish, onError, forceUpdate, setError]
+    [mutate, mutateWaiting, mutateStreaming, onFinish, onError, forceUpdate, setError]
  );

  // Send a request to the server
@@ -440,6 +461,8 @@ export function useMessageStream({
    async (requestMessages: Message[]) => {
      try {
        mutateLoading(true);
+        mutateWaiting(true);  // Start in waiting state
+        mutateStreaming(false);
        setError(undefined);

        // Create abort controller
@@ -511,10 +534,12 @@ export function useMessageStream({
        setError(err as Error);
      } finally {
        mutateLoading(false);
+        mutateWaiting(false);
+        mutateStreaming(false);
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [api, processMessageStream, mutateLoading, setError, onResponse, onError, maxSteps]
+    [api, processMessageStream, mutateLoading, mutateWaiting, mutateStreaming, setError, onResponse, onError, maxSteps]
  );

  // Append a new message and send request
@@ -658,6 +683,8 @@ export function useMessageStream({
    handleInputChange,
    handleSubmit,
    isLoading: isLoading || false,
+    isWaiting: isWaiting || false,
+    isStreaming: isStreaming || false,
    addToolResult,
    updateMessageStreamBody,
    notifications,