Merge branch 'bot_ui_guest_access' into 'master'

Bot UI: Convert thread and redirect to bot page

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

Author: Bogdan Tsechoev

ui/packages/platform/Dockerfile

@@ -47,6 +47,9 @@ ENV REACT_APP_SENTRY_DSN=$ARG_REACT_APP_SENTRY_DSN
 ARG ARG_REACT_APP_WS_URL
 ENV REACT_APP_WS_URL=$ARG_REACT_APP_WS_URL
 
+ARG ARG_REACT_APP_BOT_API_URL
+ENV REACT_APP_BOT_API_URL=$ARG_REACT_APP_BOT_API_URL
+
 RUN apk add --no-cache --update git && \
     npm i -g [email protected]; \
     pnpm config set store-dir /app/.pnpm-store; \

ui/packages/platform/ci_docker_build_push.sh

@@ -38,6 +38,7 @@ DOCKER_BUILDKIT=1 docker build \
       --build-arg ARG_REACT_APP_ROOT_URL="${REACT_APP_ROOT_URL}" \
       --build-arg ARG_REACT_APP_SENTRY_DSN="${REACT_APP_SENTRY_DSN}" \
       --build-arg ARG_REACT_APP_WS_URL="${REACT_APP_WS_URL}" \
+      --build-arg ARG_REACT_APP_BOT_API_URL="${REACT_APP_BOT_API_URL}" \
       $tags_build --file ./ui/packages/platform/Dockerfile .
 set +x
 

ui/packages/platform/deploy/configs/dev.sh

@@ -22,4 +22,5 @@ export REACT_APP_SENTRY_DSN=""
 
 # AI Bot
 # don't forget trailing slash if GET path is used!
-export REACT_APP_WS_URL="wss://v2.postgres.ai/ai-bot-ws/" # we use staging for now, since dev env is not fullfledged yet
+export REACT_APP_WS_URL="wss://v2.postgres.ai/ai-bot-ws/" # we use staging for now, since dev env is not fullfledged yet
+export REACT_APP_BOT_API_URL="https://v2.postgres.ai/ai-bot-api/bot"

ui/packages/platform/deploy/configs/local.sh

@@ -22,3 +22,4 @@ export REACT_APP_SENTRY_DSN=""
 
 # AI Bot
 export REACT_APP_WS_URL="ws://localhost:9100/"  # don't forget trailing slash if GET path is used!
+export REACT_APP_BOT_API_URL="https://v2.postgres.ai/ai-bot-api/bot"

ui/packages/platform/deploy/configs/production.sh

@@ -23,4 +23,5 @@ export REACT_APP_STRIPE_API_KEY="xxx"
 export REACT_APP_SENTRY_DSN="https://[email protected]/2"
 
 # AI Bot
-export REACT_APP_WS_URL="wss://postgres.ai/ai-bot-ws/" # don't forget trailing slash!
+export REACT_APP_WS_URL="wss://postgres.ai/ai-bot-ws/" # don't forget trailing slash!
+export REACT_APP_BOT_API_URL="https://postgres.ai/ai-bot-api/bot"

ui/packages/platform/deploy/configs/staging.sh

@@ -21,4 +21,5 @@ export REACT_APP_STRIPE_API_KEY="xxx"
 export REACT_APP_SENTRY_DSN=""
 
 # AI Bot
-export REACT_APP_WS_URL="wss://v2.postgres.ai/ai-bot-ws/" # don't forget trailing slash!
+export REACT_APP_WS_URL="wss://v2.postgres.ai/ai-bot-ws/" # don't forget trailing slash!
+export REACT_APP_BOT_API_URL="https://v2.postgres.ai/ai-bot-api/bot"

ui/packages/platform/deploy/platform-console.yaml

@@ -49,3 +49,5 @@ spec:
             value: "$REACT_APP_STRIPE_API_KEY"
           - name: REACT_APP_WS_URL
             value: "$REACT_APP_WS_URL"
+          - name: REACT_APP_BOT_API_URL
+            value: "$REACT_APP_BOT_API_URL"

ui/packages/platform/src/api/bot/convertThread.ts

@@ -0,0 +1,29 @@
+import {request} from "../../helpers/request";
+
+export const convertThread = async (thread_id: string): Promise<{ response: { final_thread_id: string, msg: string } | null; error: Response | null }> => {
+  const apiServer = process.env.REACT_APP_BOT_API_URL || '';
+
+  try {
+    const response = await request(
+      `/convert_thread`,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          thread_id
+        })
+      },
+      apiServer
+    );
+
+    if (!response.ok) {
+      return { response: null, error: response };
+    }
+
+    const responseData = await response.json();
+
+    return { response: responseData, error: null };
+
+  } catch (error) {
+    return { response: null, error: error as Response };
+  }
+}

ui/packages/platform/src/components/Dashboard/Dashboard.tsx

@@ -46,6 +46,7 @@ import { ProductCardWrapper } from 'components/ProductCard/ProductCardWrapper'
 import { DashboardProps } from 'components/Dashboard/DashboardWrapper'
 import { FilteredTableMessage } from 'components/AccessTokens/FilteredTableMessage/FilteredTableMessage'
 import { CreatedDbLabCards } from 'components/CreateDbLabCards/CreateDbLabCards'
+import { convertThread } from "../../api/bot/convertThread";
 
 interface DashboardWithStylesProps extends DashboardProps {
   classes: ClassesType
@@ -163,6 +164,8 @@ class Dashboard extends Component<DashboardWithStylesProps, DashboardState> {
     })
 
     Actions.refresh()
+
+    this.convertThreadAndRedirectToBot()
   }
 
   componentWillUnmount() {
@@ -212,6 +215,24 @@ class Dashboard extends Component<DashboardWithStylesProps, DashboardState> {
     this.setState({ filterValue: event.target.value })
   }
 
+  convertThreadAndRedirectToBot = async () => {
+    const cookieName = "pgai_tmp_thread_id=";
+    const cookies = document.cookie.split(';').map(cookie => cookie.trim());
+    const pgaiTmpThreadId = cookies.find(cookie => cookie.startsWith(cookieName))?.substring(cookieName.length) || null;
+
+    if (pgaiTmpThreadId) {
+      try {
+        const data = await convertThread(pgaiTmpThreadId);
+        if (data?.response?.final_thread_id) {
+          document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.${window.location.hostname.split('.').slice(-2).join('.')}`;
+          this.props.history.push(`demo/bot/${data.response.final_thread_id}`);
+        }
+      } catch (error) {
+        console.error('Error converting thread:', error);
+      }
+    }
+  }
+
   render() {
     const renderProjects = this.props.onlyProjects
 

ui/packages/platform/src/components/IndexPage/IndexPage.tsx

@@ -6,7 +6,7 @@
  */
 
 import { Component } from 'react'
-import { Switch, Route, NavLink, Redirect } from 'react-router-dom'
+import { Switch, Route, NavLink, Redirect, useRouteMatch } from 'react-router-dom'
 import {
   AppBar,
   Toolbar,
@@ -291,6 +291,7 @@ function ProjectWrapper(parentProps: Omit<ProjectWrapperProps, 'classes'>) {
 }
 
 function OrganizationMenu(parentProps: OrganizationMenuProps) {
+  const isDemoOrg = useRouteMatch(`/${settings.demoOrgAlias}`)
   if (
     parentProps.env &&
     parentProps.env.data &&
@@ -352,7 +353,7 @@ function OrganizationMenu(parentProps: OrganizationMenuProps) {
             </NavLink>
           </ListItem>
 
-          {/*<ListItem
+          {Boolean(isDemoOrg) && <ListItem
             button
             className={parentProps.classes.menuSectionHeader}
             disabled={isBlocked}
@@ -368,7 +369,7 @@ function OrganizationMenu(parentProps: OrganizationMenuProps) {
               </span>
               AI Bot<span className={cn(parentProps.classes.menuItemLabel, parentProps.classes.headerLinkMenuItemLabel)}>NEW</span>
             </NavLink>
-          </ListItem>*/}
+          </ListItem>}
           <ListItem
             button
             className={parentProps.classes.menuSectionHeader}