Fix/default model

apps/console/Dockerfile

@@ -1,14 +1,24 @@
+FROM node:20-alpine as builder
+WORKDIR /app
+COPY . .
+RUN npm install
+RUN npx nx run console:build
+
+
 FROM nginx:1.20-alpine
 LABEL org.opencontainers.image.source https://github.com/pezzolabs/pezzo
 
-RUN apk add --update nodejs
+RUN apk add --update nodejs npm
 
 WORKDIR /app
 
-COPY dist/apps/console/nginx.conf /etc/nginx/conf.d/default.conf
-COPY dist/apps/console .
+# update file path based on real path
+COPY --from=builder app/dist/apps/console/nginx.conf /etc/nginx/conf.d/default.conf
+#COPY apps/dist/apps/console/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder app/dist/apps/console .
+#COPY apps/dist/apps/console .
 
 RUN chmod +x scripts/entrypoint.sh
 
 ENTRYPOINT ["./scripts/entrypoint.sh"]
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

apps/console/nginx.conf

@@ -1,7 +1,8 @@
 server {
-  listen 8080;
+  listen [::]:4200;
+  listen 4200;
   root /app;
   location / {
-    try_files $uri /index.html;  
+    try_files $uri /index.html;
   }
-} 
+}

apps/console/scripts/entrypoint.sh

@@ -1,4 +1,4 @@
 #!/bin/sh
 set -e;
 node /app/scripts/inject-variables.js /app/index.html;
-exec "$@";
+exec "$@";

apps/console/src/app.tsx

@@ -6,9 +6,9 @@ import { Toaster } from "@pezzo/ui";
 
 // Auth
 import { QueryClientProvider } from "@tanstack/react-query";
-import { SuperTokensWrapper } from "supertokens-auth-react";
-import { SessionAuth } from "supertokens-auth-react/recipe/session";
-import { initSuperTokens } from "./lib/auth/supertokens";
+// import { SuperTokensWrapper } from "supertokens-auth-react";
+// import { SessionAuth } from "supertokens-auth-react/recipe/session";
+// import { initSuperTokens } from "./lib/auth/supertokens";
 
 // Pages
 import { EnvironmentsPage } from "./pages/environments/EnvironmentsPage";
@@ -40,7 +40,8 @@ import { OrgPage } from "./pages/projects/OrgPage";
 import { useCurrentOrganization } from "./lib/hooks/useCurrentOrganization";
 import { WaitlistWrapper } from "~/pages/WaitlistWrapper";
 
-initSuperTokens();
+// use Okta for auth instead of SuperTokens
+// initSuperTokens();
 
 if (HOTJAR_SITE_ID && HOTJAR_VERSION) {
   hotjar.initialize(Number(HOTJAR_SITE_ID), Number(HOTJAR_VERSION));
@@ -62,114 +63,114 @@ export function App() {
   return (
     <div className="relative h-full">
       <Toaster />
-      <SuperTokensWrapper>
-        <QueryClientProvider client={queryClient}>
-          {/* Non-authorized routes */}
-          <Routes>
-            {/* We don't render the LayoutWrapper for non-authorized routes */}
+      <QueryClientProvider client={queryClient}>
+        {/* Non-authorized routes */}
+        <Routes>
+          <Route
+            path="/login/callback/:email"
+            element={<AuthCallbackPage />}
+          />
+          <Route
+            path="/login/callback"
+            element={<AuthCallbackPage />}
+          />
+          <Route path="/admin/login" element={<LoginPage />} />
+          <Route path="/logout" element={<LogoutPage />} />
+        </Routes>
+        {/* Authorized routes */}
+        <Routes>
+          <Route
+            element={
+              <AuthProvider>
+                <OptionalIntercomProvider>
+                  <Outlet />
+                </OptionalIntercomProvider>
+              </AuthProvider>
+            }
+          >
+            <Route index element={<RootHandler />} />
+
             <Route
-              path="/login/callback/:providerId"
-              element={<AuthCallbackPage />}
+              path="/invitations/:token/accept"
+              element={
+                <LayoutWrapper withSideNav={false}>
+                  <AcceptInvitationPage />
+                </LayoutWrapper>
+              }
             />
-            <Route path="/login" element={<LoginPage />} />
-            <Route path="/logout" element={<LogoutPage />} />
-          </Routes>
-          {/* Authorized routes */}
-          <Routes>
+
             <Route
+              path="/onboarding"
               element={
-                <SessionAuth>
-                  <AuthProvider>
-                    <OptionalIntercomProvider>
-                      <Outlet />
-                    </OptionalIntercomProvider>
-                  </AuthProvider>
-                </SessionAuth>
+                <LayoutWrapper withSideNav={false}>
+                  <WaitlistWrapper>
+                    <OnboardingPage />
+                  </WaitlistWrapper>
+                </LayoutWrapper>
               }
-            >
-              <Route index element={<RootHandler />} />
-
-              <Route
-                path="/invitations/:token/accept"
-                element={
-                  <LayoutWrapper withSideNav={false}>
-                    <AcceptInvitationPage />
-                  </LayoutWrapper>
-                }
-              />
+            />
 
-              <Route
-                path="/onboarding"
-                element={
-                  <LayoutWrapper withSideNav={false}>
+            {/* Organizations */}
+            <Route
+              path="/orgs/:orgId"
+              element={
+                <LayoutWrapper withSideNav={false} withOrgSubHeader={true}>
+                  <Suspense fallback={<FullScreenLoader />}>
                     <WaitlistWrapper>
-                      <OnboardingPage />
+                      <Outlet />
                     </WaitlistWrapper>
-                  </LayoutWrapper>
-                }
-              />
+                  </Suspense>
+                </LayoutWrapper>
+              }
+            >
+              <Route index element={<OrgPage />} />
+              <Route path="members" element={<OrgMembersPage />} />
+              <Route path="api-keys" element={<OrgApiKeysPage />} />
+              <Route path="settings" element={<OrgSettingsPage />} />
+            </Route>
 
-              {/* Organizations */}
-              <Route
-                path="/orgs/:orgId"
-                element={
-                  <LayoutWrapper withSideNav={false} withOrgSubHeader={true}>
-                    <Suspense fallback={<FullScreenLoader />}>
+            {/* In-project routes */}
+            <Route
+              path="/projects/:projectId"
+              element={
+                <Suspense fallback={<FullScreenLoader />}>
+                  <CurrentPromptProvider>
+                    <RequiredProviderApiKeyModalProvider>
+                    <LayoutWrapper withSideNav={true}>
                       <WaitlistWrapper>
                         <Outlet />
                       </WaitlistWrapper>
-                    </Suspense>
-                  </LayoutWrapper>
-                }
-              >
-                <Route index element={<OrgPage />} />
-                <Route path="members" element={<OrgMembersPage />} />
-                <Route path="api-keys" element={<OrgApiKeysPage />} />
-                <Route path="settings" element={<OrgSettingsPage />} />
-              </Route>
-
-              {/* In-project routes */}
-              <Route
-                path="/projects/:projectId"
-                element={
-                  <Suspense fallback={<FullScreenLoader />}>
-                    <CurrentPromptProvider>
-                      <RequiredProviderApiKeyModalProvider>
-                        <LayoutWrapper withSideNav={true}>
-                          <WaitlistWrapper>
-                            <Outlet />
-                          </WaitlistWrapper>
-                        </LayoutWrapper>
-                      </RequiredProviderApiKeyModalProvider>
-                    </CurrentPromptProvider>
-                  </Suspense>
-                }
-              >
-                <Route index element={<DashboardPage />} />
-                <Route path="environments" element={<EnvironmentsPage />} />
-                <Route path={"dashboard"} element={<DashboardPage />} />
-                <Route path={"requests"} element={<RequestsPage />} />
-                <Route path="prompts" element={<PromptsPage />} />
-                <Route path="prompts/:promptId" element={<PromptPage />}>
-                  <Route index element={<Navigate to="edit" />} />
-                  <Route
-                    index
-                    path="edit"
-                    element={
-                      <EditorProvider>
-                        <PromptTesterProvider>
-                          <PromptEditView />
-                        </PromptTesterProvider>
-                      </EditorProvider>
-                    }
-                  />
-                  <Route path="versions" element={<PromptVersionsView />} />
-                </Route>
+                    </LayoutWrapper>
+                    </RequiredProviderApiKeyModalProvider>
+                  </CurrentPromptProvider>
+                </Suspense>
+              }
+            >
+              // TODO: decide if need DashboardPage or not, and change the index page to PromptPage
+              <Route index element={<PromptsPage />} />
+              <Route path="environments" element={<EnvironmentsPage />} />
+              <Route path={"dashboard"} element={<DashboardPage />} />
+              <Route path={"requests"} element={<RequestsPage />} />
+              <Route path="prompts" element={<PromptsPage />} />
+              <Route path="prompts/:promptId" element={<PromptPage />}>
+                <Route index element={<Navigate to="edit" />} />
+                <Route
+                  index
+                  path="edit"
+                  element={
+                    <EditorProvider>
+                      <PromptTesterProvider>
+                        <PromptEditView />
+                      </PromptTesterProvider>
+                    </EditorProvider>
+                  }
+                />
+                <Route path="versions" element={<PromptVersionsView />} />
               </Route>
             </Route>
-          </Routes>
-        </QueryClientProvider>
-      </SuperTokensWrapper>
+          </Route>
+        </Routes>
+      </QueryClientProvider>
     </div>
   );
 }

apps/console/src/components/layout/Header.tsx

@@ -9,10 +9,13 @@ import { UserMenu } from "./UserMenu";
 import { useAuthContext } from "~/lib/providers/AuthProvider";
 import { ProjectCopy } from "../projects/ProjectCopy";
 import { OrgSelector } from "./OrgSelector";
+import { usePrompts } from "~/lib/hooks/usePrompts";
+import { PromptCopy } from "~/components/prompts/PromptCopy";
 
 export const Header = () => {
   const { organization } = useCurrentOrganization();
   const { project } = useCurrentProject();
+  const { prompts } = usePrompts();
   const { currentUser } = useAuthContext();
 
   return (
@@ -62,6 +65,12 @@ export const Header = () => {
         )}
       </div>
 
+      {prompts && (
+        <div className="text-sm">
+          <PromptCopy />
+        </div>
+      )}
+
       {project && (
         <div className="text-sm">
           <ProjectCopy />

apps/console/src/components/layout/SideNavigation.tsx

@@ -20,9 +20,9 @@ export const SideNavigation = () => {
 
   const projectNavigation = [
     {
-      name: "Dashboard",
+      name: "Prompts",
       href: `/projects/${projectId}`,
-      icon: BarChart2,
+      icon: BoxIcon,
       isActive: (href: string) => window.location.pathname === href,
     },
     {
@@ -32,17 +32,17 @@ export const SideNavigation = () => {
       isActive: (href: string) => window.location.pathname.startsWith(href),
     },
     {
-      name: "Prompts",
-      href: `/projects/${projectId}/prompts`,
-      icon: BoxIcon,
-      isActive: (href: string) => window.location.pathname.startsWith(href),
-    },
-    {
-      name: "Environments",
-      href: `/projects/${projectId}/environments`,
-      icon: HardDriveIcon,
+      name: "Dashboard",
+      href: `/projects/${projectId}/dashboard`,
+      icon: BarChart2,
       isActive: (href: string) => window.location.pathname.startsWith(href),
     },
+    // {
+    //   name: "Environments",
+    //   href: `/projects/${projectId}/environments`,
+    //   icon: HardDriveIcon,
+    //   isActive: (href: string) => window.location.pathname.startsWith(href),
+    // },
   ];
 
   return (
@@ -111,7 +111,7 @@ export const SideNavigation = () => {
             </Link>
             <Link
               className="mb-2 mt-auto flex cursor-pointer items-center rounded-md p-2 text-sm font-medium text-stone-400 transition-all hover:bg-stone-800 hover:text-white "
-              to="https://docs.pezzo.ai"
+              to="https://www.notion.so/User-Manual-d49c811d16ff4f1db415830b3f5a04b2"
               target="_blank"
             >
               <GraduationCapIcon

apps/console/src/components/layout/UserMenu.tsx

@@ -34,7 +34,7 @@ export const UserMenu = () => {
           </div>
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <Link to="https://docs.pezzo.ai" target="_blank">
+        <Link to="https://www.notion.so/User-Manual-d49c811d16ff4f1db415830b3f5a04b2" target="_blank">
           <DropdownMenuItem>
             <GraduationCap className="mr-2 h-4 w-4" />
             <span>Documentation</span>

apps/console/src/components/organizations/InviteOrgMemberModal.tsx

@@ -66,8 +66,9 @@ export const InviteOrgMemberModal = ({ open, onClose }: Props) => {
           onClose();
           toast({
             title: "Invitation sent",
-            description: `An invitation has been sent to ${inviteeEmail}`,
+            description: `Will add ${inviteeEmail} into ${organization.name} soon...`,
           });
+          window.location.assign(`/orgs/${organization.id}`);
         },
       }
     );
@@ -109,7 +110,7 @@ export const InviteOrgMemberModal = ({ open, onClose }: Props) => {
               </DialogDescription>
             </DialogHeader>
             <DialogFooter className="mt-4">
-              <Button type="submit">Send Invitation</Button>
+              <Button type="submit">Add Member</Button>
             </DialogFooter>
           </form>
         </Form>