Merge branch 'main' into AGE-1343/-implement-home-view-onboarding

agenta-backend/agenta_backend/routers/projects_router.py

@@ -14,13 +14,17 @@
 
 
 class ProjectsResponse(BaseModel):
+    organization_id: Optional[UUID] = None
+    organization_name: Optional[str] = None
+    # is_default_organization: Optional[bool] = None
     workspace_id: Optional[UUID] = None
     workspace_name: Optional[str] = None
     # is_default_workspace: Optional[bool] = None
     project_id: UUID
     project_name: str
     # is_default_project: bool
     user_role: Optional[str] = None
+    is_demo: Optional[bool] = None
 
 
 router = APIRouter()
@@ -64,11 +68,14 @@ async def get_projects(
 
             projects = [
                 ProjectsResponse(
+                    organization_id=project_membership.project.organization.id,
+                    organization_name=project_membership.project.organization.name,
                     workspace_id=project_membership.project.workspace.id,
                     workspace_name=project_membership.project.workspace.name,
                     project_id=project_membership.project.id,
                     project_name=project_membership.project.project_name,
                     user_role=project_membership.role,
+                    is_demo=project_membership.is_demo,
                 )
                 for project_membership in _project_memberships
             ]

agenta-web/src/components/GenericDrawer/index.tsx

@@ -7,10 +7,12 @@ type GenericDrawerProps = {
     headerExtra?: ReactNode
     mainContent: ReactNode
     sideContent?: ReactNode
+    initialWidth?: number
 } & React.ComponentProps<typeof Drawer>
 
 const GenericDrawer = ({...props}: GenericDrawerProps) => {
-    const [drawerWidth, setDrawerWidth] = useState(1200)
+    const initialWidth = props.initialWidth || 1200
+    const [drawerWidth, setDrawerWidth] = useState(initialWidth)
 
     return (
         <Drawer
@@ -28,15 +30,15 @@ const GenericDrawer = ({...props}: GenericDrawerProps) => {
                     {props.expandable && (
                         <Button
                             onClick={() => {
-                                if (drawerWidth === 1200) {
+                                if (drawerWidth === initialWidth) {
                                     setDrawerWidth(1920)
                                 } else {
-                                    setDrawerWidth(1200)
+                                    setDrawerWidth(initialWidth)
                                 }
                             }}
                             type="text"
                             icon={
-                                drawerWidth === 1200 ? (
+                                drawerWidth === initialWidth ? (
                                     <FullscreenOutlined />
                                 ) : (
                                     <FullscreenExitOutlined />

agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx

@@ -0,0 +1,72 @@
+import {type PropsWithChildren, useState, useCallback} from "react"
+import {Typography, Button, theme} from "antd"
+import clsx from "clsx"
+import useResizeObserver from "@/hooks/useResizeObserver"
+import {createUseStyles} from "react-jss"
+import {JSSTheme} from "@/lib/Types"
+import {Transition} from "@headlessui/react"
+import {useRouter} from "next/router"
+import {MOBILE_UNOPTIMIZED_APP_ROUTES} from "./assets/constants"
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    overlay: {
+        background: `${theme.colorBgContainer}`,
+    },
+}))
+
+const {useToken} = theme
+
+const NoMobilePageWrapper: React.FC<PropsWithChildren> = ({children}) => {
+    const [dismissed, setDismissed] = useState(false)
+    const [shouldDisplay, setShouldDisplay] = useState(false)
+    const {overlay} = useStyles()
+    const {pathname} = useRouter()
+    const {token} = useToken()
+
+    const observerCallback = useCallback(
+        (bounds: DOMRectReadOnly) => {
+            setShouldDisplay(() => {
+                if (dismissed) return false // keep hidden if already dismissed by the user
+                if (!MOBILE_UNOPTIMIZED_APP_ROUTES.some((route) => pathname.startsWith(route)))
+                    return false
+
+                return bounds.width < token.screenMD
+            })
+        },
+        [dismissed, pathname, token.screenMD],
+    )
+
+    useResizeObserver(observerCallback, typeof window !== "undefined" ? document.body : undefined)
+
+    const handleDismiss = () => {
+        setDismissed(true)
+    }
+
+    return (
+        <Transition
+            show={!dismissed && shouldDisplay}
+            enter="transition-opacity duration-75"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition-opacity duration-150"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+            className={clsx([
+                "fixed top-0 left-0 right-0 bottom-0", // overlay the entire screen
+                "flex flex-col items-center justify-center gap-4", // flex config
+                "z-[9999]",
+                overlay, // TODO: better theme connected tailwind color classes
+            ])}
+            unmount
+        >
+            <Typography.Text className="w-8/12 text-center leading-1 text-lg">
+                Agenta works better in larger laptop or desktop screens.
+            </Typography.Text>
+            <Button type="primary" size="large" onClick={handleDismiss}>
+                View anyway
+            </Button>
+        </Transition>
+    )
+}
+
+export default NoMobilePageWrapper

agenta-web/src/components/NoMobilePageWrapper/assets/constants.ts

@@ -0,0 +1,9 @@
+// List of routes where the component should be displayed
+export const MOBILE_UNOPTIMIZED_APP_ROUTES = [
+    "/apps",
+    "/observability",
+    "/settings",
+    "/testsets",
+    "/evaluations",
+    "/workspaces",
+]

agenta-web/src/components/Sidebar/Sidebar.tsx

@@ -381,21 +381,18 @@ const Sidebar: React.FC = () => {
                                         {
                                             key: "logout",
                                             label: (
-                                                <div
-                                                    className="flex items-center gap-2"
-                                                    onClick={() => {
-                                                        AlertPopup({
-                                                            title: "Logout",
-                                                            message:
-                                                                "Are you sure you want to logout?",
-                                                            onOk: logout,
-                                                        })
-                                                    }}
-                                                >
+                                                <div className="flex items-center gap-2">
                                                     <SignOut size={16} />
                                                     <Text>Logout</Text>
                                                 </div>
                                             ),
+                                            onClick: () => {
+                                                AlertPopup({
+                                                    title: "Logout",
+                                                    message: "Are you sure you want to logout?",
+                                                    onOk: logout,
+                                                })
+                                            },
                                         },
                                     ],
                                     selectedKeys: [selectedOrg.id],

agenta-web/src/components/pages/observability/ObservabilityDashboard.tsx

@@ -14,7 +14,7 @@ import {useAppId} from "@/hooks/useAppId"
 import {useQueryParam} from "@/hooks/useQuery"
 import {formatCurrency, formatLatency, formatTokenUsage} from "@/lib/helpers/formatters"
 import {getNodeById} from "@/lib/helpers/observability_helpers"
-import {Filter, FilterConditions, JSSTheme} from "@/lib/Types"
+import {Filter, FilterConditions, JSSTheme, KeyValuePair} from "@/lib/Types"
 import {_AgentaRootsResponse} from "@/services/observability/types"
 import {ReloadOutlined, SwapOutlined} from "@ant-design/icons"
 import {
@@ -35,12 +35,13 @@ import dayjs from "dayjs"
 import {useRouter} from "next/router"
 import React, {useCallback, useEffect, useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
-import {Export} from "@phosphor-icons/react"
+import {Database, Export} from "@phosphor-icons/react"
 import {getAppValues} from "@/contexts/app.context"
 import {convertToCsv, downloadCsv} from "@/lib/helpers/fileManipulations"
 import {useUpdateEffect} from "usehooks-ts"
 import {getStringOrJson} from "@/lib/helpers/utils"
 import ObservabilityContextProvider, {useObservabilityData} from "@/contexts/observability.context"
+import TestsetDrawer, {TestsetTraceData} from "./drawer/TestsetDrawer"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     title: {
@@ -79,6 +80,8 @@ const ObservabilityDashboard = () => {
     const [selectedTraceId, setSelectedTraceId] = useQueryParam("trace", "")
     const [editColumns, setEditColumns] = useState<string[]>(["span_type", "key", "usage"])
     const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false)
+    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
+    const [testsetDrawerData, setTestsetDrawerData] = useState<TestsetTraceData[]>([])
     const [columns, setColumns] = useState<ColumnsType<_AgentaRootsResponse>>([
         {
             title: "ID",
@@ -263,6 +266,12 @@ const ObservabilityDashboard = () => {
         return () => clearInterval(interval)
     }, [])
 
+    const rowSelection = {
+        onChange: (selectedRowKeys: React.Key[]) => {
+            setSelectedRowKeys(selectedRowKeys)
+        },
+    }
+
     const selectedItem = useMemo(
         () => (traces?.length ? getNodeById(traces, selected) : null),
         [selected, traces],
@@ -487,6 +496,19 @@ const ObservabilityDashboard = () => {
         setSort({type, sorted, customRange})
     }, [])
 
+    const getTestsetTraceData = () => {
+        if (!traces?.length) return []
+
+        const extractData = selectedRowKeys.map((key, idx) => {
+            const node = getNodeById(traces, key as string)
+            return {data: node?.data as KeyValuePair, key: node?.key, id: idx + 1}
+        })
+
+        if (extractData.length > 0) {
+            setTestsetDrawerData(extractData as TestsetTraceData[])
+        }
+    }
+
     return (
         <div className="flex flex-col gap-6">
             <Typography.Text className={classes.title}>Observability</Typography.Text>
@@ -536,6 +558,13 @@ const ObservabilityDashboard = () => {
                         >
                             Export as CSV
                         </Button>
+                        <Button
+                            onClick={() => getTestsetTraceData()}
+                            icon={<Database size={14} />}
+                            disabled={traces.length === 0 || selectedRowKeys.length === 0}
+                        >
+                            Add test set
+                        </Button>
                         <EditColumns
                             isOpen={isFilterColsDropdownOpen}
                             handleOpenChange={setIsFilterColsDropdownOpen}
@@ -549,6 +578,12 @@ const ObservabilityDashboard = () => {
 
             <div className="flex flex-col gap-2">
                 <Table
+                    rowSelection={{
+                        type: "checkbox",
+                        columnWidth: 48,
+                        selectedRowKeys,
+                        ...rowSelection,
+                    }}
                     loading={isLoading}
                     columns={mergedColumns as TableColumnType<_AgentaRootsResponse>[]}
                     dataSource={traces}
@@ -615,6 +650,17 @@ const ObservabilityDashboard = () => {
                 />
             </div>
 
+            {testsetDrawerData.length > 0 && (
+                <TestsetDrawer
+                    open={testsetDrawerData.length > 0}
+                    data={testsetDrawerData}
+                    onClose={() => {
+                        setTestsetDrawerData([])
+                        setSelectedRowKeys([])
+                    }}
+                />
+            )}
+
             {activeTrace && !!traces?.length && (
                 <GenericDrawer
                     open={!!selectedTraceId}