Merge branch 'chats_email_notifications' into 'master'

Send email notifications from AI

See merge request postgres-ai/database-lab!945

Author: Bogdan Tsechoev

Diff for: ui/packages/platform/src/actions/actions.js

@@ -38,6 +38,7 @@ const Actions = Reflux.createActions([{
   ASYNC_ACTION: ASYNC_ACTION,
   doAuth: ASYNC_ACTION,
   getUserProfile: ASYNC_ACTION,
+  updateUserProfile: ASYNC_ACTION,
   getAccessTokens: ASYNC_ACTION,
   getAccessToken: ASYNC_ACTION,
   hideGeneratedAccessToken: {},
@@ -267,6 +268,42 @@ Actions.getUserProfile.listen(function (token) {
   );
 });
 
+Actions.updateUserProfile.listen(function (token, data) {
+  let action = this;
+
+  if (!api) {
+    settings.init(function () {
+      api = new Api(settings);
+    });
+  }
+
+  this.progressed();
+
+  timeoutPromise(REQUEST_TIMEOUT, api.updateUserProfile(token, data))
+    .then(result => {
+      result.json()
+        .then(json => {
+          if (json) {
+            action.completed({ data: json?.result });
+          } else {
+            action.failed(new Error('wrong_reply'));
+          }
+        })
+        .catch(err => {
+          console.error(err);
+          action.failed(new Error('wrong_reply'));
+        });
+    })
+    .catch(err => {
+      console.error(err);
+      if (err && err.message && err.message === 'timeout') {
+        action.failed(new Error('failed_fetch'));
+      } else {
+        action.failed(new Error('wrong_reply'));
+      }
+    });
+});
+
 Actions.getAccessTokens.listen(function (token, orgId) {
   let action = this;
 

Diff for: ui/packages/platform/src/api/api.js

@@ -112,6 +112,31 @@ class Api {
     });
   }
 
+  updateUserProfile(token, data) {
+    let headers = {
+      Authorization: 'Bearer ' + token,
+      Accept: 'application/vnd.pgrst.object+json'
+    };
+
+    let body = {};
+
+    if (data.is_chats_email_notifications_enabled !== 'undefined') {
+      body.chats_email_notifications_enabled = data.is_chats_email_notifications_enabled;
+    }
+
+    if (data.first_name !== 'undefined') {
+      body.first_name = data.first_name;
+    }
+
+    if (data.last_name !== 'undefined') {
+      body.last_name = data.last_name;
+    }
+
+    return this.post(`${this.apiServer}/rpc/update_user_profile`, body, {
+      headers: headers
+    });
+  }
+
   getAccessTokens(token, orgId) {
     let params = {};
     let headers = {

Diff for: ui/packages/platform/src/components/BotSettingsForm/BotSettingsForm.tsx

@@ -161,7 +161,7 @@ const BotSettingsForm: React.FC<BotSettingsFormProps> = (props) => {
     enableReinitialize: true,
     initialValues: {
       threadVisibility:
-        data?.orgProfile?.data?.is_chat_public_by_default ? 'public' : 'private',
+        data?.orgProfile?.data?.is_chat_public_by_default ? 'public' : 'private'
     },
     onSubmit: () => {
       const currentOrgId = orgId || null;

Diff for: ui/packages/platform/src/pages/Bot/BotWrapper.tsx

@@ -7,6 +7,7 @@ export interface BotWrapperProps {
   orgId?: number;
   envData: {
     info?: {
+      id?: number | null
       user_name?: string
     }
   };
@@ -38,7 +39,8 @@ export const BotWrapper = (props: BotWrapperProps) => {
         args={{
           threadId: props.match.params.threadId,
           orgId: props.orgData.id,
-          isPublicByDefault: props.orgData.is_chat_public_by_default
+          isPublicByDefault: props.orgData.is_chat_public_by_default,
+          userId: props.envData.info?.id,
       }}>
         <BotPage {...props} />
       </AiBotProvider>

Diff for: ui/packages/platform/src/pages/Bot/Messages/Message/Message.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import cn from "classnames";
 import ReactMarkdown, { Components } from "react-markdown";
 import rehypeRaw from "rehype-raw";
@@ -9,8 +9,9 @@ import { icons } from "@postgres.ai/shared/styles/icons";
 import { DebugDialog } from "../../DebugDialog/DebugDialog";
 import { CodeBlock } from "./CodeBlock";
 import { disallowedHtmlTagsForMarkdown, permalinkLinkBuilder } from "../../utils";
-import { StateMessage } from "../../../../types/api/entities/bot";
+import { MessageStatus, StateMessage } from "../../../../types/api/entities/bot";
 import { MermaidDiagram } from "./MermaidDiagram";
+import { useAiBot } from "../../hooks";
 
 
 type BaseMessageProps = {
@@ -20,17 +21,19 @@ type BaseMessageProps = {
   name?: string;
   isLoading?: boolean;
   formattedTime?: string;
-  aiModel?: string
-  stateMessage?: StateMessage | null
-  isCurrentStreamMessage?: boolean
+  aiModel?: string;
+  stateMessage?: StateMessage | null;
+  isCurrentStreamMessage?: boolean;
   isPublic?: boolean;
+  threadId?: string;
+  status?: MessageStatus
 }
 
 type AiMessageProps = BaseMessageProps & {
   isAi: true;
   content: string;
-  aiModel: string
-  isCurrentStreamMessage?: boolean
+  aiModel: string;
+  isCurrentStreamMessage?: boolean;
 }
 
 type HumanMessageProps = BaseMessageProps & {
@@ -42,8 +45,8 @@ type HumanMessageProps = BaseMessageProps & {
 type LoadingMessageProps = BaseMessageProps & {
   isLoading: true;
   isAi: true;
-  content?: undefined
-  stateMessage: StateMessage | null
+  content?: undefined;
+  stateMessage: StateMessage | null;
 }
 
 type MessageProps = AiMessageProps | HumanMessageProps | LoadingMessageProps;
@@ -261,14 +264,44 @@ export const Message = React.memo((props: MessageProps) => {
     aiModel,
     stateMessage,
     isCurrentStreamMessage,
-    isPublic
+    isPublic,
+    threadId,
+    status
   } = props;
 
+  const { updateMessageStatus } = useAiBot()
+
+  const elementRef = useRef<HTMLDivElement | null>(null);
+
+
   const [isDebugVisible, setDebugVisible] = useState(false);
 
 
   const classes = useStyles();
 
+  useEffect(() => {
+    if (!isAi || isCurrentStreamMessage || status === 'read') return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry.isIntersecting && threadId && id) {
+          updateMessageStatus(threadId, id, 'read');
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (elementRef.current) {
+      observer.observe(elementRef.current);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [id, updateMessageStatus, isCurrentStreamMessage, isAi, threadId, status]);
+
   const contentToRender: string = content?.replace(/\n/g, '  \n') || ''
 
   const toggleDebugDialog = () => {
@@ -301,7 +334,7 @@ export const Message = React.memo((props: MessageProps) => {
         onClose={toggleDebugDialog}
         messageId={id}
       />}
-      <div className={classes.message}>
+      <div ref={elementRef} className={classes.message}>
         <div className={classes.messageAvatar}>
           {isAi
             ? <img

Diff for: ui/packages/platform/src/pages/Bot/Messages/Messages.tsx

@@ -125,7 +125,7 @@ type FormattedTime = {
   [id: string]: Time
 }
 
-export const Messages = React.memo(({orgId}: {orgId: number}) => {
+export const Messages = React.memo(({orgId, threadId}: {orgId: number, threadId?: string}) => {
   const {
     messages,
     loading: isLoading,
@@ -254,7 +254,8 @@ export const Messages = React.memo(({orgId}: {orgId: number}) => {
                 created_at,
                 content,
                 ai_model,
-                is_public
+                is_public,
+                status
               } = message;
               let name = 'You';
 
@@ -283,6 +284,8 @@ export const Messages = React.memo(({orgId}: {orgId: number}) => {
                   formattedTime={formattedTime}
                   aiModel={ai_model}
                   isPublic={is_public}
+                  threadId={threadId}
+                  status={status}
                 />
               )
             })}

Diff for: ui/packages/platform/src/pages/Bot/hooks.tsx

@@ -14,7 +14,7 @@ import {
   AiModel,
   StateMessage,
   StreamMessage,
-  ErrorMessage
+  ErrorMessage, MessageStatus
 } from "../../types/api/entities/bot";
 import {getChatsWithWholeThreads} from "../../api/bot/getChatsWithWholeThreads";
 import {getChats} from "api/bot/getChats";
@@ -73,16 +73,18 @@ type UseAiBotReturnType = {
   isStreamingInProcess: boolean;
   currentStreamMessage: StreamMessage | null;
   errorMessage: ErrorMessage | null;
+  updateMessageStatus: (threadId: string, messageId: string, status: MessageStatus) => void
 }
 
 type UseAiBotArgs = {
   threadId?: string;
   orgId?: number
   isPublicByDefault?: boolean
+  userId?: number | null
 }
 
 export const useAiBotProviderValue = (args: UseAiBotArgs): UseAiBotReturnType => {
-  const { threadId, orgId, isPublicByDefault } = args;
+  const { threadId, orgId, isPublicByDefault, userId } = args;
   const { showMessage, closeSnackbar } = useAlertSnackbar();
   const {
     aiModels,
@@ -413,6 +415,27 @@ export const useAiBotProviderValue = (args: UseAiBotArgs): UseAiBotReturnType =>
     }))
   }
 
+  const updateMessageStatus = (threadId: string, messageId: string, status: MessageStatus) => {
+    wsSendMessage(JSON.stringify({
+        action: 'message_status_update',
+        payload: {
+          thread_id: threadId,
+          message_id: messageId,
+          read_by: userId,
+          status
+        }
+      }))
+    if (messages && messages.length > 0) {
+      const updatedMessages = messages.map((item) => {
+        if (item.id === messageId) {
+          item["status"] = status
+        }
+        return item
+      });
+      setMessages(updatedMessages)
+    }
+  }
+
   const getDebugMessagesForWholeThread = async () => {
     setDebugMessagesLoading(true)
     if (threadId) {
@@ -478,7 +501,8 @@ export const useAiBotProviderValue = (args: UseAiBotArgs): UseAiBotReturnType =>
     stateMessage,
     isStreamingInProcess,
     currentStreamMessage,
-    errorMessage
+    errorMessage,
+    updateMessageStatus
   }
 }
 

Diff for: ui/packages/platform/src/pages/Bot/index.tsx

@@ -268,7 +268,7 @@ export const BotPage = (props: BotPageProps) => {
         </Box>
       </Box>
       <Box className={cn(classes.contentContainer, {[classes.isChatsListVisible]: isChatsListVisible})}>
-        <Messages orgId={orgData.id} />
+        <Messages orgId={orgData.id} threadId={match.params.threadId} />
         <Command
           threadId={match.params.threadId}
           orgId={orgData.id}

Diff for: ui/packages/platform/src/pages/Profile/ProfileWrapper.tsx

@@ -17,6 +17,28 @@ export const ProfileWrapper = () => {
         marginLeft: theme.spacing(1),
         marginRight: theme.spacing(1),
       },
+      formControlLabel: {
+        marginLeft: theme.spacing(0),
+        marginRight: theme.spacing(1),
+      },
+      formControlLabelCheckbox: {
+        '& svg': {
+          fontSize: 18
+        }
+      },
+      updateButtonContainer: {
+        marginTop: theme.spacing(3),
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+      },
+      label: {
+        marginTop: theme.spacing(2),
+        marginBottom: theme.spacing(1),
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        color: '#000!important',
+        fontWeight: 'bold',
+      },
       dense: {
         marginTop: 16,
       },