feat(logs/folders): moved file structure and added relevant layouts

2026-09-24 15:45:35 +08:00 · 2025-03-05 12:58:32 -08:00
parent 630033b858
commit f56d2d1f71
26 changed files with 152 additions and 151 deletions
@@ -17,7 +17,7 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { client } from '@/lib/auth-client'
 import { useNotificationStore } from '@/stores/notifications/store'
-import { NotificationList } from '@/app/w/components/notifications/notifications'
+import { NotificationList } from '@/app/w/[id]/components/notifications/notifications'

 export default function LoginPage() {
  const router = useRouter()
@@ -17,7 +17,7 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { client } from '@/lib/auth-client'
 import { useNotificationStore } from '@/stores/notifications/store'
-import { NotificationList } from '@/app/w/components/notifications/notifications'
+import { NotificationList } from '@/app/w/[id]/components/notifications/notifications'

 export default function SignupPage() {
  const router = useRouter()
@@ -0,0 +1,114 @@
+'use client'
+
+import { Component, ReactNode, useEffect } from 'react'
+import { BotIcon } from 'lucide-react'
+import { Card } from '@/components/ui/card'
+
+// ======== Shared Error UI Component ========
+interface ErrorUIProps {
+  title?: string
+  message?: string
+  onReset?: () => void
+  fullScreen?: boolean
+}
+
+export function ErrorUI({
+  title = 'Workflow Error',
+  message = 'This workflow encountered an error and is currently unavailable. Please try again later or create a new workflow.',
+  onReset,
+  fullScreen = false,
+}: ErrorUIProps) {
+  const containerClass = fullScreen
+    ? 'flex items-center justify-center w-full h-screen bg-muted/40'
+    : 'flex items-center justify-center w-full h-full bg-muted/40'
+
+  return (
+    <div className={containerClass}>
+      <Card className="p-6 max-w-md text-center space-y-4">
+        <div className="flex justify-center">
+          <BotIcon className="w-16 h-16 text-muted-foreground" />
+        </div>
+        <h3 className="text-lg font-semibold">{title}</h3>
+        <p className="text-muted-foreground">{message}</p>
+        {onReset && (
+          <button
+            onClick={onReset}
+            className="px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600"
+          >
+            Try again
+          </button>
+        )}
+      </Card>
+    </div>
+  )
+}
+
+// ======== React Error Boundary Component ========
+interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error?: Error
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  public state: ErrorBoundaryState = {
+    hasError: false,
+  }
+
+  public static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return this.props.fallback || <ErrorUI />
+    }
+
+    return this.props.children
+  }
+}
+
+// ======== Next.js Error Page Component ========
+interface NextErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export function NextError({ error, reset }: NextErrorProps) {
+  useEffect(() => {
+    // Optionally log the error to an error reporting service
+    console.error('Workflow error:', error)
+  }, [error])
+
+  return <ErrorUI onReset={reset} />
+}
+
+// ======== Next.js Global Error Page Component ========
+export function NextGlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error('Global workspace error:', error)
+  }, [error])
+
+  return (
+    <html>
+      <body>
+        <ErrorUI
+          title="Application Error"
+          message="Something went wrong with the application. Please try again later."
+          onReset={reset}
+          fullScreen={true}
+        />
+      </body>
+    </html>
+  )
+}
@@ -1,4 +1,4 @@
-import type { BlockConfig } from '../../../../../../blocks/types'
+import type { BlockConfig } from '@/blocks/types'

 export type ToolbarBlockProps = {
  config: BlockConfig
@@ -5,8 +5,8 @@ import { PanelRight, PanelRightClose, Search } from 'lucide-react'
 import { Input } from '@/components/ui/input'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { getAllBlocks, getBlocksByCategory } from '../../../../blocks'
-import { BlockCategory, BlockConfig } from '../../../../blocks/types'
+import { getAllBlocks, getBlocksByCategory } from '@/blocks'
+import { BlockCategory, BlockConfig } from '@/blocks/types'
 import { ToolbarBlock } from './components/toolbar-block/toolbar-block'
 import { ToolbarTabs } from './components/toolbar-tabs/toolbar-tabs'

@@ -1,5 +1,5 @@
 import { Card } from '@/components/ui/card'
-import { ConnectedBlock, useBlockConnections } from '@/app/w/hooks/use-block-connections'
+import { ConnectedBlock, useBlockConnections } from '@/app/w/[id]/hooks/use-block-connections'

 interface ConnectionBlocksProps {
  blockId: string
@@ -1,7 +1,7 @@
 import { X } from 'lucide-react'
 import { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath } from 'reactflow'

-export const CustomEdge = ({
+export const WorkflowEdge = ({
  id,
  sourceX,
  sourceY,
@@ -0,0 +1,19 @@
+import { Chat } from './components/chat/chat'
+import { Console } from './components/console/console'
+import { ControlBar } from './components/control-bar/control-bar'
+import { ErrorBoundary } from './components/error'
+import { Toolbar } from './components/toolbar/toolbar'
+
+export default function WorkflowLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <ControlBar />
+      <Toolbar />
+      <Chat />
+      <Console />
+      <main className="grid items-start gap-2 bg-muted/40 h-[calc(100vh-4rem)]">
+        <ErrorBoundary>{children}</ErrorBoundary>
+      </main>
+    </>
+  )
+}
@@ -17,11 +17,11 @@ import { useGeneralStore } from '@/stores/settings/general/store'
 import { getSyncManagers, initializeSyncManagers, isSyncInitialized } from '@/stores/sync-registry'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
-import { NotificationList } from '@/app/w/components/notifications/notifications'
+import { NotificationList } from '@/app/w/[id]/components/notifications/notifications'
 import { getBlock } from '../../../blocks'
-import { ErrorBoundary } from '../components/error-boundary/error-boundary'
-import { CustomEdge } from './components/custom-edge/custom-edge'
+import { ErrorBoundary } from './components/error/index'
 import { WorkflowBlock } from './components/workflow-block/workflow-block'
+import { WorkflowEdge } from './components/workflow-edge/workflow-edge'
 import { LoopInput } from './components/workflow-loop/components/loop-input/loop-input'
 import { LoopLabel } from './components/workflow-loop/components/loop-label/loop-label'
 import { createLoopNode, getRelativeLoopPosition } from './components/workflow-loop/workflow-loop'
@@ -32,7 +32,7 @@ const nodeTypes: NodeTypes = {
  loopLabel: LoopLabel,
  loopInput: LoopInput,
 }
-const edgeTypes: EdgeTypes = { custom: CustomEdge }
+const edgeTypes: EdgeTypes = { workflowEdge: WorkflowEdge }

 function WorkflowContent() {
  // State
@@ -194,7 +194,7 @@ function WorkflowContent() {
        addEdge({
          ...connection,
          id: crypto.randomUUID(),
-          type: 'custom',
+          type: 'workflowEdge',
        })
      }
    },
@@ -284,7 +284,7 @@ function WorkflowContent() {
  // Transform edges to include selection state
  const edgesWithSelection = edges.map((edge) => ({
    ...edge,
-    type: edge.type || 'custom',
+    type: edge.type || 'workflowEdge',
    data: {
      selectedEdgeId,
      onDelete: (edgeId: string) => {
@@ -1,48 +0,0 @@
-'use client'
-
-import { Component, ReactNode } from 'react'
-import { BotIcon } from 'lucide-react'
-import { Card } from '@/components/ui/card'
-
-interface Props {
-  children: ReactNode
-  fallback?: ReactNode
-}
-
-interface State {
-  hasError: boolean
-  error?: Error
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  public state: State = {
-    hasError: false,
-  }
-
-  public static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error }
-  }
-
-  public render() {
-    if (this.state.hasError) {
-      return (
-        this.props.fallback || (
-          <div className="flex items-center justify-center w-full h-full bg-muted/40">
-            <Card className="p-6 max-w-md text-center space-y-4">
-              <div className="flex justify-center">
-                <BotIcon className="w-16 h-16 text-muted-foreground" />
-              </div>
-              <h3 className="text-lg font-semibold">Workflow Error</h3>
-              <p className="text-muted-foreground">
-                This workflow encountered an error and is currently unavailable. Please try again
-                later or create a new workflow.
-              </p>
-            </Card>
-          </div>
-        )
-      )
-    }
-
-    return this.props.children
-  }
-}
@@ -1,38 +1,5 @@
 'use client'

-import { useEffect } from 'react'
-import { BotIcon } from 'lucide-react'
-import { Card } from '@/components/ui/card'
+import { NextError } from './[id]/components/error'

-interface ErrorProps {
-  error: Error & { digest?: string }
-  reset: () => void
-}
-
-export default function Error({ error, reset }: ErrorProps) {
-  useEffect(() => {
-    // Optionally log the error to an error reporting service
-    console.error('Workflow error:', error)
-  }, [error])
-
-  return (
-    <div className="flex items-center justify-center w-full h-full bg-muted/40">
-      <Card className="p-6 max-w-md text-center space-y-4">
-        <div className="flex justify-center">
-          <BotIcon className="w-16 h-16 text-muted-foreground" />
-        </div>
-        <h3 className="text-lg font-semibold">Workflow Error</h3>
-        <p className="text-muted-foreground">
-          This workflow encountered an error and is currently unavailable. Please try again later or
-          create a new workflow.
-        </p>
-        <button
-          onClick={reset}
-          className="px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600"
-        >
-          Try again
-        </button>
-      </Card>
-    </div>
-  )
-}
+export default NextError
@@ -1,41 +1,5 @@
 'use client'

-import { useEffect } from 'react'
-import { BotIcon } from 'lucide-react'
-import { Card } from '@/components/ui/card'
+import { NextGlobalError } from './[id]/components/error'

-export default function GlobalError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string }
-  reset: () => void
-}) {
-  useEffect(() => {
-    console.error('Global workspace error:', error)
-  }, [error])
-
-  return (
-    <html>
-      <body>
-        <div className="flex items-center justify-center w-full h-screen bg-muted/40">
-          <Card className="p-6 max-w-md text-center space-y-4">
-            <div className="flex justify-center">
-              <BotIcon className="w-16 h-16 text-muted-foreground" />
-            </div>
-            <h3 className="text-lg font-semibold">Application Error</h3>
-            <p className="text-muted-foreground">
-              Something went wrong with the application. Please try again later.
-            </p>
-            <button
-              onClick={reset}
-              className="px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600"
-            >
-              Try again
-            </button>
-          </Card>
-        </div>
-      </body>
-    </html>
-  )
-}
+export default NextGlobalError
@@ -1,10 +1,5 @@
-import { Chat } from './components/chat/chat'
-import { Console } from './components/console/console'
-import { ControlBar } from './components/control-bar/control-bar'
-import { ErrorBoundary } from './components/error-boundary/error-boundary'
+import Providers from './components/providers/providers'
 import { Sidebar } from './components/sidebar/sidebar'
-import { Toolbar } from './components/toolbar/toolbar'
-import Providers from './providers/providers'

 export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
  return (
@@ -13,17 +8,7 @@ export default function WorkspaceLayout({ children }: { children: React.ReactNod
        <div className="z-20">
          <Sidebar />
        </div>
-        <div className="flex-1 flex flex-col pl-14">
-          <ControlBar />
-          <div className="h-16">
-            <Toolbar />
-            <Chat />
-            <Console />
-            <main className="grid items-start gap-2 bg-muted/40 h-[calc(100vh-4rem)]">
-              <ErrorBoundary>{children}</ErrorBoundary>
-            </main>
-          </div>
-        </div>
+        <div className="flex-1 flex flex-col pl-14">{children}</div>
      </div>
    </Providers>
  )