orcheo-canvas 0.0.1

package/src/features/shared/components/chat-message.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/design-system/ui/avatar";
+import { cn } from "@/lib/utils";
+import { CheckIcon } from "lucide-react";
+
+import ChatAttachmentList, { ChatAttachment } from "./chat-message-attachments";
+import { parseChatMarkdown } from "./chat-message-markdown";
+
+export interface ChatMessageProps {
+  id: string;
+  content: string;
+  sender: {
+    id: string;
+    name: string;
+    avatar?: string;
+    isAI?: boolean;
+  };
+  timestamp: Date | string;
+  attachments?: ChatAttachment[];
+  status?: "sending" | "sent" | "delivered" | "read" | "error";
+  isUserMessage?: boolean;
+}
+
+export default function ChatMessage({
+  content,
+  sender,
+  timestamp,
+  attachments = [],
+  status = "sent",
+  isUserMessage = false,
+}: ChatMessageProps) {
+  const formattedTime =
+    typeof timestamp === "string"
+      ? new Date(timestamp).toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+        })
+      : timestamp.toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+        });
+
+  return (
+    <div
+      className={cn(
+        "flex w-full gap-3 p-2",
+        isUserMessage ? "justify-end" : "justify-start",
+      )}
+    >
+      {!isUserMessage && (
+        <Avatar className="h-8 w-8">
+          {sender.avatar ? (
+            <AvatarImage src={sender.avatar} alt={sender.name} />
+          ) : (
+            <AvatarFallback
+              className={
+                sender.isAI ? "bg-primary text-primary-foreground" : ""
+              }
+            >
+              {sender.name.substring(0, 2).toUpperCase()}
+            </AvatarFallback>
+          )}
+        </Avatar>
+      )}
+
+      <div
+        className={cn(
+          "flex flex-col gap-1",
+          isUserMessage ? "items-end" : "items-start",
+        )}
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">
+            {isUserMessage ? "You" : sender.name}
+          </span>
+          <span className="text-xs text-muted-foreground">{formattedTime}</span>
+        </div>
+
+        <div
+          className={cn(
+            "rounded-lg px-4 py-2 max-w-[80%]",
+            isUserMessage
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted text-foreground dark:text-foreground/90",
+          )}
+        >
+          <div
+            className="prose prose-sm dark:prose-invert max-w-none"
+            dangerouslySetInnerHTML={{ __html: parseChatMarkdown(content) }}
+          ></div>
+        </div>
+
+        <ChatAttachmentList
+          attachments={attachments}
+          isUserMessage={isUserMessage}
+        />
+
+        {isUserMessage && status && (
+          <div className="flex items-center text-xs text-muted-foreground mt-1">
+            {status === "sending" && "Sending..."}
+            {status === "sent" && "Sent"}
+            {status === "delivered" && "Delivered"}
+            {status === "read" && (
+              <>
+                <CheckIcon className="h-3 w-3 mr-1" /> Read
+              </>
+            )}
+            {status === "error" && (
+              <span className="text-destructive">Failed to send</span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {isUserMessage && (
+        <Avatar className="h-8 w-8">
+          {sender.avatar ? (
+            <AvatarImage src={sender.avatar} alt={sender.name} />
+          ) : (
+            <AvatarFallback>
+              {sender.name.substring(0, 2).toUpperCase()}
+            </AvatarFallback>
+          )}
+        </Avatar>
+      )}
+    </div>
+  );
+}

package/src/features/shared/components/top-navigation/account-menu.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/design-system/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/design-system/ui/dropdown-menu";
+import { Dialog, DialogContent } from "@/design-system/ui/dialog";
+import { HelpCircle, Key, LogOut, Settings, User } from "lucide-react";
+import CredentialsVault from "@features/workflow/components/dialogs/credentials-vault";
+import type {
+  Credential,
+  CredentialInput,
+} from "@features/workflow/types/credential-vault";
+
+interface AccountMenuProps {
+  credentials: Credential[];
+  isCredentialsLoading: boolean;
+  onAddCredential?: (credential: CredentialInput) => Promise<void> | void;
+  onDeleteCredential?: (id: string) => Promise<void> | void;
+}
+
+export default function AccountMenu({
+  credentials,
+  isCredentialsLoading,
+  onAddCredential,
+  onDeleteCredential,
+}: AccountMenuProps) {
+  const [isVaultOpen, setIsVaultOpen] = useState(false);
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="rounded-full border-2 border-border"
+          >
+            <User className="h-5 w-5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <Link to="/profile" className="flex w-full items-center">
+              <User className="mr-2 h-4 w-4" />
+              <span>Profile</span>
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Link to="/settings" className="flex w-full items-center">
+              <Settings className="mr-2 h-4 w-4" />
+              <span>Settings</span>
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={(event) => {
+              event.preventDefault();
+              setIsVaultOpen(true);
+            }}
+            className="cursor-pointer"
+          >
+            <div className="flex w-full items-center">
+              <Key className="mr-2 h-4 w-4" />
+              <span>Credential Vault</span>
+            </div>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Link to="/help-support" className="flex w-full items-center">
+              <HelpCircle className="mr-2 h-4 w-4" />
+              <span>Help & Support</span>
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <Link to="/login" className="flex w-full items-center">
+              <LogOut className="mr-2 h-4 w-4" />
+              <span>Log out</span>
+            </Link>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Dialog open={isVaultOpen} onOpenChange={setIsVaultOpen}>
+        <DialogContent className="max-w-4xl">
+          <CredentialsVault
+            credentials={credentials}
+            isLoading={isCredentialsLoading}
+            onAddCredential={onAddCredential}
+            onDeleteCredential={onDeleteCredential}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/features/shared/components/top-navigation/command-palette-button.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/design-system/ui/dialog";
+import { Input } from "@/design-system/ui/input";
+import { Badge } from "@/design-system/ui/badge";
+import { Command, Folder, Search } from "lucide-react";
+
+export default function CommandPaletteButton() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          className="hidden items-center gap-1 sm:flex"
+          onClick={() => setIsOpen(true)}
+        >
+          <Search className="mr-1 h-4 w-4" />
+          <span>Search</span>
+          <kbd className="pointer-events-none ml-auto inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
+            <span className="text-xs">⌘</span>K
+          </kbd>
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[550px]">
+        <DialogHeader>
+          <DialogTitle>Search</DialogTitle>
+          <DialogDescription>
+            Search for workflows, nodes, or actions
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center border-b py-2">
+          <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+          <Input
+            className="flex h-10 w-full rounded-md border-0 bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            placeholder="Type to search..."
+            autoFocus
+          />
+        </div>
+        <div className="mt-2 space-y-1">
+          <p className="text-xs text-muted-foreground">Recent searches</p>
+          <div className="grid gap-1">
+            <Button
+              variant="ghost"
+              className="justify-start text-sm"
+              onClick={() => setIsOpen(false)}
+            >
+              <Folder className="mr-2 h-4 w-4" />
+              <span>Customer Onboarding</span>
+              <Badge variant="outline" className="ml-auto">
+                Workflow
+              </Badge>
+            </Button>
+            <Button
+              variant="ghost"
+              className="justify-start text-sm"
+              onClick={() => setIsOpen(false)}
+            >
+              <Command className="mr-2 h-4 w-4" />
+              <span>HTTP Request</span>
+              <Badge variant="outline" className="ml-auto">
+                Node
+              </Badge>
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/shared/components/top-navigation/project-switcher.tsx

@@ -0,0 +1,64 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/design-system/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/design-system/ui/dropdown-menu";
+import { ChevronDown, Folder, Plus } from "lucide-react";
+
+export default function ProjectSwitcher() {
+  return (
+    <div className="flex items-center gap-4 lg:gap-6">
+      <Link
+        to="/"
+        className="flex items-center gap-2 whitespace-nowrap font-semibold"
+      >
+        <img src="/favicon.png" alt="Orcheo Logo" className="h-6 w-6" />
+        <span>Orcheo Canvas</span>
+      </Link>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" className="flex items-center gap-1">
+            <Folder className="mr-1 h-4 w-4" />
+            <span className="hidden sm:inline">My Projects</span>
+            <span className="sm:hidden">Projects</span>
+            <ChevronDown className="ml-1 h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-56">
+          <DropdownMenuLabel>Projects</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {[
+            { label: "Marketing Automations", query: "marketing" },
+            { label: "Customer Onboarding", query: "onboarding" },
+            { label: "Data Processing", query: "data" },
+          ].map((project) => (
+            <DropdownMenuItem key={project.query}>
+              <Link
+                to={`/workflow-canvas?project=${project.query}`}
+                className="flex w-full items-center"
+              >
+                {project.label}
+              </Link>
+            </DropdownMenuItem>
+          ))}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <Link
+              to="/workflow-canvas?new=true"
+              className="flex w-full items-center"
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              Create New Project
+            </Link>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/features/shared/components/top-navigation/top-navigation-types.ts

@@ -0,0 +1,16 @@
+import type {
+  Credential,
+  CredentialInput,
+} from "@features/workflow/types/credential-vault";
+
+export interface TopNavigationProps {
+  currentWorkflow?: {
+    name: string;
+    path?: string[];
+  };
+  className?: string;
+  credentials?: Credential[];
+  isCredentialsLoading?: boolean;
+  onAddCredential?: (credential: CredentialInput) => Promise<void> | void;
+  onDeleteCredential?: (id: string) => Promise<void> | void;
+}

package/src/features/shared/components/top-navigation/use-window-width.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+export default function useWindowWidth() {
+  const [windowWidth, setWindowWidth] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 0,
+  );
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return windowWidth;
+}

package/src/features/shared/components/top-navigation/workflow-breadcrumbs.tsx

@@ -0,0 +1,107 @@
+import React, { useMemo } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/design-system/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/design-system/ui/dropdown-menu";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+interface WorkflowBreadcrumbsProps {
+  currentWorkflow: {
+    name: string;
+    path?: string[];
+  };
+  windowWidth: number;
+}
+
+export default function WorkflowBreadcrumbs({
+  currentWorkflow,
+  windowWidth,
+}: WorkflowBreadcrumbsProps) {
+  const visibleItems = useMemo(
+    () => getVisiblePathItems(currentWorkflow.path ?? [], windowWidth),
+    [currentWorkflow.path, windowWidth],
+  );
+
+  if (!currentWorkflow.path) {
+    return (
+      <span className="truncate font-medium text-foreground">
+        {currentWorkflow.name}
+      </span>
+    );
+  }
+
+  return (
+    <div className="ml-4 flex items-center overflow-hidden text-sm text-muted-foreground">
+      <div className="flex items-center overflow-hidden">
+        {visibleItems.map((pathItem, idx) => (
+          <React.Fragment key={`${pathItem.item}-${idx}`}>
+            {pathItem.index === -1 ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="sm" className="h-6 px-1">
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="w-48">
+                  {currentWorkflow.path.slice(1, -1).map((item) => (
+                    <DropdownMenuItem key={item}>
+                      <Link to="/" className="flex w-full items-center">
+                        {item}
+                      </Link>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : (
+              <>
+                <Link
+                  to="/"
+                  className="max-w-[100px] truncate hover:text-foreground sm:max-w-[150px]"
+                >
+                  {pathItem.item}
+                </Link>
+                {idx < visibleItems.length - 1 && (
+                  <ChevronRight className="mx-1 h-4 w-4 flex-shrink-0" />
+                )}
+              </>
+            )}
+          </React.Fragment>
+        ))}
+        <ChevronRight className="mx-1 h-4 w-4 flex-shrink-0" />
+        <span className="max-w-[120px] truncate text-foreground sm:max-w-[200px]">
+          {currentWorkflow.name}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function getVisiblePathItems(path: string[], windowWidth: number) {
+  const totalItems = path.length;
+
+  if (totalItems === 0) {
+    return [];
+  }
+
+  if (windowWidth < 640 && totalItems > 2) {
+    return [
+      { index: 0, item: path[0] },
+      { index: -1, item: "..." },
+      { index: totalItems - 1, item: path[totalItems - 1] },
+    ];
+  }
+
+  if (windowWidth < 768 && totalItems > 3) {
+    return [
+      { index: 0, item: path[0] },
+      { index: -1, item: "..." },
+      { index: totalItems - 1, item: path[totalItems - 1] },
+    ];
+  }
+
+  return path.map((item, index) => ({ index, item }));
+}

package/src/features/shared/components/top-navigation.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Bell } from "lucide-react";
+import { Button } from "@/design-system/ui/button";
+import { cn } from "@/lib/utils";
+import ProjectSwitcher from "@/features/shared/components/top-navigation/project-switcher";
+import WorkflowBreadcrumbs from "@/features/shared/components/top-navigation/workflow-breadcrumbs";
+import CommandPaletteButton from "@/features/shared/components/top-navigation/command-palette-button";
+import AccountMenu from "@/features/shared/components/top-navigation/account-menu";
+import useWindowWidth from "@/features/shared/components/top-navigation/use-window-width";
+import type { TopNavigationProps } from "@/features/shared/components/top-navigation/top-navigation-types";
+
+export default function TopNavigation({
+  currentWorkflow,
+  className,
+  credentials = [],
+  isCredentialsLoading = false,
+  onAddCredential,
+  onDeleteCredential,
+}: TopNavigationProps) {
+  const windowWidth = useWindowWidth();
+
+  return (
+    <header
+      className={cn(
+        "flex h-14 items-center border-b border-border bg-background px-4 lg:px-6",
+        className,
+      )}
+    >
+      <ProjectSwitcher />
+
+      {currentWorkflow && (
+        <WorkflowBreadcrumbs
+          currentWorkflow={currentWorkflow}
+          windowWidth={windowWidth}
+        />
+      )}
+
+      <div className="ml-auto flex items-center gap-2">
+        <CommandPaletteButton />
+        <Button variant="ghost" size="icon">
+          <Bell className="h-5 w-5" />
+        </Button>
+        <AccountMenu
+          credentials={credentials}
+          isCredentialsLoading={isCredentialsLoading}
+          onAddCredential={onAddCredential}
+          onDeleteCredential={onDeleteCredential}
+        />
+      </div>
+    </header>
+  );
+}

package/src/features/support/components/support-chat-callout.tsx

@@ -0,0 +1,40 @@
+import { Button } from "@/design-system/ui/button";
+import ChatInterface from "@features/shared/components/chat-interface";
+import type { ChatInterfaceProps } from "@features/shared/components/chat-interface.types";
+import { MessageSquare } from "lucide-react";
+
+type SupportChatCalloutProps = Pick<
+  ChatInterfaceProps,
+  "ai" | "user" | "initialMessages"
+>;
+
+export function SupportChatCallout({
+  ai,
+  user,
+  initialMessages,
+}: SupportChatCalloutProps) {
+  return (
+    <section className="rounded-lg border bg-card text-card-foreground shadow-sm">
+      <div className="flex flex-col items-center gap-4 p-6 md:flex-row">
+        <div className="flex-1">
+          <h3 className="text-2xl font-bold">Need immediate help?</h3>
+          <p className="text-muted-foreground">
+            Chat with our AI assistant for instant answers
+          </p>
+        </div>
+        <ChatInterface
+          title="Orcheo Canvas Support"
+          initialMessages={initialMessages}
+          user={user}
+          ai={ai}
+          triggerButton={
+            <Button size="lg" className="w-full md:w-auto">
+              <MessageSquare className="mr-2 h-4 w-4" />
+              Chat with Support
+            </Button>
+          }
+        />
+      </div>
+    </section>
+  );
+}

package/src/features/support/components/support-header.tsx

@@ -0,0 +1,53 @@
+import type { ChangeEvent } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Input } from "@/design-system/ui/input";
+import { Search } from "lucide-react";
+
+interface SupportHeaderProps {
+  searchQuery: string;
+  onSearchChange: (value: string) => void;
+}
+
+export function SupportHeader({
+  searchQuery,
+  onSearchChange,
+}: SupportHeaderProps) {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onSearchChange(event.target.value);
+  };
+
+  return (
+    <section className="space-y-4">
+      <div className="flex items-center justify-between space-y-2">
+        <h2 className="text-3xl font-bold tracking-tight">Help & Support</h2>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>How can we help you?</CardTitle>
+          <CardDescription>
+            Search our knowledge base or contact support
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="relative">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="Search for help articles..."
+              className="pl-8"
+              value={searchQuery}
+              onChange={handleChange}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </section>
+  );
+}