Feat: Notification section (#2033)

* Feature/Notification-section

* fix notification ui and add local storage variable to save the state

* add notification component to app.tsx

frontend/.env.development

@@ -1,4 +1,6 @@
 # Please put appropriate value
 VITE_BASE_URL=http://localhost:5173
 VITE_API_HOST=http://127.0.0.1:7091
-VITE_API_STREAMING=true
+VITE_API_STREAMING=true
+VITE_NOTIFICATION_TEXT="What's new in 0.14.0 — Changelog"
+VITE_NOTIFICATION_LINK="#"

frontend/src/App.tsx

@@ -15,6 +15,7 @@ import useTokenAuth from './hooks/useTokenAuth';
 import Navigation from './Navigation';
 import PageNotFound from './PageNotFound';
 import Setting from './settings';
+import Notification from './components/Notification';
 
 function AuthWrapper({ children }: { children: React.ReactNode }) {
   const { isAuthLoading } = useTokenAuth();
@@ -52,11 +53,27 @@ function MainLayout() {
 }
 export default function App() {
   const [, , componentMounted] = useDarkTheme();
+  const [showNotification, setShowNotification] = useState<boolean>(() => {
+    const saved = localStorage.getItem('showNotification');
+    return saved ? JSON.parse(saved) : true;
+  });
+  const notificationText = import.meta.env.VITE_NOTIFICATION_TEXT;
+  const notificationLink = import.meta.env.VITE_NOTIFICATION_LINK;
   if (!componentMounted) {
     return <div />;
   }
   return (
     <div className="relative h-full overflow-hidden">
+      {notificationLink && notificationText && showNotification && (
+        <Notification
+          notificationText={notificationText}
+          notificationLink={notificationLink}
+          handleCloseNotification={() => {
+            setShowNotification(false);
+            localStorage.setItem('showNotification', 'false');
+          }}
+        />
+      )}
       <Routes>
         <Route
           element={

frontend/src/assets/arrow-full-right.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0303 7.03033C13.3232 6.73744 13.3232 6.26256 13.0303 5.96967L8.25736 1.1967C7.96447 0.903806 7.48959 0.903806 7.1967 1.1967C6.90381 1.48959 6.90381 1.96447 7.1967 2.25736L11.4393 6.5L7.1967 10.7426C6.90381 11.0355 6.90381 11.5104 7.1967 11.8033C7.48959 12.0962 7.96447 12.0962 8.25736 11.8033L13.0303 7.03033ZM0.5 6.5V7.25H12.5V6.5V5.75H0.5V6.5Z" fill="white"/>
+</svg>

frontend/src/components/Notification.tsx

@@ -0,0 +1,45 @@
+import close from '../assets/cross.svg';
+import rightArrow from '../assets/arrow-full-right.svg';
+import bg from '../assets/notification-bg.jpg';
+
+interface NotificationProps {
+  notificationText: string;
+  notificationLink: string;
+  handleCloseNotification: () => void;
+}
+
+export default function Notification({
+  notificationText,
+  notificationLink,
+  handleCloseNotification,
+}: NotificationProps) {
+  return (
+    <a
+      className="absolute right-2 bottom-6 z-20 flex w-3/4 items-center justify-center gap-2 rounded-lg bg-cover bg-center bg-no-repeat px-2 py-4 sm:right-4 md:w-2/5 lg:w-1/3 xl:w-1/4 2xl:w-1/5"
+      style={{ backgroundImage: `url(${bg})` }}
+      href={notificationLink}
+      target="_blank"
+      aria-label="Notification"
+      rel="noreferrer"
+    >
+      <p className="text-white-3000 text-xs leading-6 font-semibold xl:text-sm xl:leading-7">
+        {notificationText}
+      </p>
+      <span>
+        <img className="w-full" src={rightArrow} alt="" />
+      </span>
+
+      <button
+        className="absolute top-2 right-2 z-30 h-4 w-4 hover:opacity-70"
+        aria-label="Close notification"
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          handleCloseNotification();
+        }}
+      >
+        <img className="w-full" src={close} alt="Close notification" />
+      </button>
+    </a>
+  );
+}

frontend/src/conversation/Conversation.tsx

@@ -202,6 +202,7 @@ export default function Conversation() {
       queries[queries.length - 1].response && setLastQueryReturnedErr(false);
     }
   }, [queries[queries.length - 1]]);
+
   return (
     <div className="flex h-full flex-col justify-end gap-1">
       <ConversationMessages