Merge branch 'private_chats_in_chats_list' into 'master'

Bot UI: Display private chats within the organization

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

Author: Bogdan Tsechoev

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

@@ -11,7 +11,7 @@ export const getChats = async (req: Req): Promise<{ response: BotMessage[] | nul
   const apiServer = process.env.REACT_APP_API_URL_PREFIX || '';
 
   try {
-    const response = await request(`${apiServer}/chats${query ? query : ''}`, {
+    const response = await request(`${apiServer}/chats_auth${query ? query : ''}`, {
       method: 'GET',
     });
 

ui/packages/platform/src/pages/Bot/ChatsList/ChatsList.tsx

@@ -9,17 +9,17 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { useParams } from "react-router";
 import cn from "classnames";
-import { makeStyles, Theme, useMediaQuery } from "@material-ui/core";
+import { ListItem, ListItemIcon, makeStyles, Theme, useMediaQuery } from "@material-ui/core";
 import Drawer from '@material-ui/core/Drawer';
 import List from "@material-ui/core/List";
 import Divider from "@material-ui/core/Divider";
 import ListSubheader from '@material-ui/core/ListSubheader';
 import Box from "@mui/material/Box";
 import { Spinner } from "@postgres.ai/shared/components/Spinner";
 import { HeaderButtons, HeaderButtonsProps } from "../HeaderButtons/HeaderButtons";
-import { BotMessage } from "../../../types/api/entities/bot";
 import { theme } from "@postgres.ai/shared/styles/theme";
 import { useAiBot } from "../hooks";
+import VisibilityOffIcon from '@material-ui/icons/VisibilityOff';
 
 
 const useStyles = makeStyles<Theme, ChatsListProps>((theme) => ({
@@ -73,13 +73,23 @@ const useStyles = makeStyles<Theme, ChatsListProps>((theme) => ({
       whiteSpace: 'nowrap',
       textDecoration: "none",
       flex: '0 0 2.5rem',
+      display: 'block',
       '&:hover': {
         background: 'rgba(0, 0, 0, 0.04)'
+      },
+      '&:focus': {
+        outline: 'none',
+        background: 'rgba(0, 0, 0, 0.04)'
       }
     },
     listItemLinkActive: {
       background: 'rgba(0, 0, 0, 0.04)'
     },
+    listItemIcon: {
+      transform: 'translateY(2px)',
+      marginRight: 2,
+      minWidth: 'auto',
+    },
     loader: {
       width: '100%',
       height: '100%',
@@ -165,15 +175,22 @@ export const ChatsList = (props: ChatsListProps) => {
         const isActive = item.id === params.threadId
         const link = linkBuilder(item.id)
         return (
-          <Link
+          <ListItem
+            component={Link}
             to={link}
             key={item.id}
             className={cn(classes.listItemLink, {[classes.listItemLinkActive]: isActive})}
             id={item.id}
             onClick={() => handleClick(item.id)}
+            autoFocus={isActive}
           >
+            <ListItemIcon
+              className={classes.listItemIcon}
+              title={item.is_public ? 'This thread is public' : 'This thread is private'}>
+              {!item.is_public && <VisibilityOffIcon />}
+            </ListItemIcon>
             {item.content}
-          </Link>
+          </ListItem>
         )
       })
       }