feat: add announcement banner (#256)(#266)

.env.development

@@ -90,3 +90,6 @@ REQUEST_API_KEY_CODE=""
 
 ## Warning regarding code generation
 CODE_GENERATION_WARNING="Full responsibility for code correctness, security and licensing lies solely with the user, not with DIAL platform or LLM vendor."
+
+## Text for announcement banner
+ANNOUNCEMENT="Welcome to AI Dial Chat application!"

src/components/Chat/Chat.tsx

@@ -95,9 +95,9 @@
   const [autoScrollEnabled, setAutoScrollEnabled] = useState<boolean>(true);
   const [showScrollDownButton, setShowScrollDownButton] =
     useState<boolean>(false);
   const [mergedMessages, setMergedMessages] = useState<any>([]);
   const [isShowChatSettings, setIsShowChatSettings] = useState(false);
   const selectedConversationsTemporarySettings = useRef<Record<string, any>>(
     {},
   );
 
@@ -492,7 +492,10 @@
   }, [isPlayback]);
 
   return (
-    <div className="relative flex-1" data-qa="chat">
+    <div
+      className="relative min-w-0 shrink grow basis-0 overflow-y-auto"
+      data-qa="chat"
+    >
       {modelError ? (
         <ErrorMessageDiv error={modelError} />
       ) : (

src/components/Common/AnnouncementBanner.tsx

@@ -0,0 +1,38 @@
+import { IconSpeakerphone, IconX } from '@tabler/icons-react';
+
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
+import { UIActions, UISelectors } from '@/src/store/ui/ui.reducers';
+
+export const AnnouncementsBanner = () => {
+  const dispatch = useAppDispatch();
+  const textOfClosedAnnouncement = useAppSelector(
+    UISelectors.selectTextOfClosedAnnouncement,
+  );
+  const announcement = useAppSelector(SettingsSelectors.selectAnnouncement);
+
+  if (
+    !announcement ||
+    textOfClosedAnnouncement === undefined ||
+    textOfClosedAnnouncement === announcement
+  ) {
+    return null;
+  }
+
+  return (
+    <div className="relative flex items-center justify-center bg-gradient-to-r from-green to-violet text-gray-100">
+      <div className="flex grow items-center justify-center gap-2 py-2 pl-2 pr-8 text-center md:gap-3 md:px-14">
+        <IconSpeakerphone size={24} strokeWidth={1.5} className="shrink-0" />
+        <span dangerouslySetInnerHTML={{ __html: announcement }}></span>
+      </div>
+      <button
+        className="absolute right-2 top-[calc(50%_-_12px)] shrink-0"
+        onClick={() => {
+          dispatch(UIActions.closeAnnouncement({ announcement }));
+        }}
+      >
+        <IconX size={24} strokeWidth={1.5} />
+      </button>
+    </div>
+  );
+};

src/pages/api/home/home.tsx

@@ -28,6 +28,7 @@ import { PromptsActions } from '@/src/store/prompts/prompts.reducers';
 import { SettingsActions } from '@/src/store/settings/settings.reducers';
 import { UIActions, UISelectors } from '@/src/store/ui/ui.reducers';
 
+import { AnnouncementsBanner } from '../../../components/Common/AnnouncementBanner';
 import { Chat } from '@/src/components/Chat/Chat';
 import { Chatbar } from '@/src/components/Chatbar/Chatbar';
 import Header from '@/src/components/Header/Header';
@@ -47,6 +48,7 @@ interface Props {
   defaultRecentModelsIds: string[];
   defaultRecentAddonsIds: string[];
   codeWarning: string;
+  announcement: string;
 }
 
 const Home = ({
@@ -59,6 +61,7 @@ const Home = ({
   defaultRecentModelsIds,
   defaultRecentAddonsIds,
   codeWarning,
+  announcement,
 }: Props) => {
   const session = useSession();
 
@@ -132,6 +135,15 @@ const Home = ({
         }),
       );
     }
+
+    const textOfClosedAnnouncement = localStorage.getItem(
+      'textOfClosedAnnouncement',
+    );
+    dispatch(
+      UIActions.closeAnnouncement({
+        announcement: JSON.parse(textOfClosedAnnouncement || '""'),
+      }),
+    );
     dispatch(ConversationsActions.initConversations());
     dispatch(ModelsActions.getModels());
     dispatch(AddonsActions.getAddons());
@@ -169,6 +181,8 @@ const Home = ({
           ),
         }),
       );
+
+    announcement && dispatch(SettingsActions.setAnnouncement(announcement));
   }, [
     dispatch,
     defaultModelId,
@@ -178,6 +192,7 @@ const Home = ({
     defaultRecentModelsIds,
     defaultRecentAddonsIds,
     codeWarning,
+    announcement,
   ]);
 
   const handleIframeAuth = async () => {
@@ -242,7 +257,8 @@ const Home = ({
             <div className="flex w-full grow overflow-auto">
               {enabledFeaturesSet.has('conversations-section') && <Chatbar />}
 
-              <div className="flex flex-1">
+              <div className="flex min-w-0 grow flex-col">
+                <AnnouncementsBanner />
                 <Chat appName={appName} />
               </div>
 
@@ -301,6 +317,7 @@ export const getServerSideProps: GetServerSideProps = async ({
           process.env.RECENT_ADDONS_IDS.split(',')) ||
         [],
       codeWarning: process.env.CODE_GENERATION_WARNING ?? '',
+      announcement: process.env.ANNOUNCEMENT || '',
       ...(await serverSideTranslations(locale ?? 'en', [
         'common',
         'chat',

src/store/settings/settings.reducers.ts

@@ -9,13 +9,15 @@ export interface SettingsState {
   footerHtmlMessage: string;
   enabledFeatures: Feature[];
   codeWarning: string;
+  announcement: string;
 }
 
 const initialState: SettingsState = {
   isIframe: false,
   footerHtmlMessage: '',
   enabledFeatures: [],
   codeWarning: '',
+  announcement: '',
 };
 
 export const settingsSlice = createSlice({
@@ -46,6 +48,12 @@ export const settingsSlice = createSlice({
     ) => {
       state.codeWarning = payload;
     },
+    setAnnouncement: (
+      state,
+      { payload }: PayloadAction<SettingsState['announcement']>,
+    ) => {
+      state.announcement = payload;
+    },
   },
 });
 
@@ -66,11 +74,15 @@ const selectEnabledFeatures = createSelector([rootSelector], (state) => {
 const selectCodeWarning = createSelector([rootSelector], (state) => {
   return state.codeWarning;
 });
+const selectAnnouncement = createSelector([rootSelector], (state) => {
+  return state.announcement;
+});
 
 export const SettingsActions = settingsSlice.actions;
 export const SettingsSelectors = {
   selectIsIframe,
   selectFooterHtmlMessage,
   selectEnabledFeatures,
   selectCodeWarning,
+  selectAnnouncement,
 };

src/store/ui/ui.epics.ts

@@ -80,11 +80,24 @@ const showToastErrorEpic: AppEpic = (action$) =>
     ignoreElements(),
   );
 
+const closeAnnouncementEpic: AppEpic = (action$) =>
+  action$.pipe(
+    filter(UIActions.closeAnnouncement.match),
+    tap(({ payload }) => {
+      localStorage.setItem(
+        'textOfClosedAnnouncement',
+        JSON.stringify(payload.announcement),
+      );
+    }),
+    ignoreElements(),
+  );
+
 const UIEpics = combineEpics(
   saveThemeEpic,
   saveShowChatbarEpic,
   saveShowPromptbarEpic,
   showToastErrorEpic,
+  closeAnnouncementEpic,
 );
 
 export default UIEpics;

src/store/ui/ui.reducers.ts

@@ -11,6 +11,7 @@ export interface UIState {
   isUserSettingsOpen: boolean;
   isProfileOpen: boolean;
   isCompareMode: boolean;
+  textOfClosedAnnouncement?: string | undefined;
 }
 
 const initialState: UIState = {
@@ -20,6 +21,7 @@ const initialState: UIState = {
   isUserSettingsOpen: false,
   isProfileOpen: false,
   isCompareMode: false,
+  textOfClosedAnnouncement: undefined,
 };
 
 export const uiSlice = createSlice({
@@ -67,6 +69,12 @@ export const uiSlice = createSlice({
         response?: Response;
       }>,
     ) => state,
+    closeAnnouncement: (
+      state,
+      { payload }: PayloadAction<{ announcement: string | undefined }>,
+    ) => {
+      state.textOfClosedAnnouncement = payload.announcement;
+    },
   },
 });
 
@@ -96,6 +104,13 @@ const selectIsCompareMode = createSelector([rootSelector], (state) => {
   return state.isCompareMode;
 });
 
+const selectTextOfClosedAnnouncement = createSelector(
+  [rootSelector],
+  (state) => {
+    return state.textOfClosedAnnouncement;
+  },
+);
+
 export const UIActions = uiSlice.actions;
 
 export const UISelectors = {
@@ -105,4 +120,5 @@ export const UISelectors = {
   selectIsUserSettingsOpen,
   selectIsProfileOpen,
   selectIsCompareMode,
+  selectTextOfClosedAnnouncement,
 };