orcheo-canvas 0.0.1

package/src/features/support/components/support-help-tabs.tsx

@@ -0,0 +1,172 @@
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Input } from "@/design-system/ui/input";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/design-system/ui/tabs";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/design-system/ui/accordion";
+import { Textarea } from "@/design-system/ui/textarea";
+
+interface FaqItem {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+const faqItems: FaqItem[] = [
+  {
+    id: "item-1",
+    question: "What is Orcheo Canvas and how does it work?",
+    answer:
+      "Orcheo Canvas is a visual workflow automation platform that lets you connect triggers, actions, and logic nodes on a canvas to build powerful automations without writing code.",
+  },
+  {
+    id: "item-2",
+    question: "How do I create my first workflow?",
+    answer:
+      'Create a new workflow from the dashboard, add a trigger node, attach action nodes, connect them together, then save and activate it when you are ready. The "New Workflow" button guides you through the process.',
+  },
+  {
+    id: "item-3",
+    question: "What types of integrations are available?",
+    answer:
+      "We support Google Workspace, Microsoft 365, Slack, Salesforce, HubSpot, HTTP requests, webhooks, databases, and any service with a public API.",
+  },
+  {
+    id: "item-4",
+    question: "How do I debug a workflow that's not working?",
+    answer:
+      "Use execution history, the workflow debugger, and node-level breakpoints to step through your automation and inspect the data flowing between nodes.",
+  },
+  {
+    id: "item-5",
+    question: "How do I manage team access and permissions?",
+    answer:
+      "Invite teammates from Settings → Teams and assign Owner, Admin, Editor, or Viewer roles to control who can view, edit, or manage workflows.",
+  },
+];
+
+function FaqAccordion() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Frequently Asked Questions</CardTitle>
+        <CardDescription>
+          Find answers to common questions about Orcheo Canvas
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Accordion type="single" collapsible className="w-full">
+          {faqItems.map((item) => (
+            <AccordionItem key={item.id} value={item.id}>
+              <AccordionTrigger>{item.question}</AccordionTrigger>
+              <AccordionContent>{item.answer}</AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" className="w-full">
+          View All FAQs
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}
+
+function ContactSupportForm() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Contact Support</CardTitle>
+        <CardDescription>Get help from our support team</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-6">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div className="grid gap-2">
+              <label
+                htmlFor="support-name"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Name
+              </label>
+              <Input id="support-name" placeholder="Enter your name" />
+            </div>
+            <div className="grid gap-2">
+              <label
+                htmlFor="support-email"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Email
+              </label>
+              <Input
+                id="support-email"
+                type="email"
+                placeholder="Enter your email"
+              />
+            </div>
+          </div>
+          <div className="grid gap-2">
+            <label
+              htmlFor="support-subject"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Subject
+            </label>
+            <Input id="support-subject" placeholder="Enter subject" />
+          </div>
+          <div className="grid gap-2">
+            <label
+              htmlFor="support-message"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Message
+            </label>
+            <Textarea
+              id="support-message"
+              placeholder="Enter your message"
+              className="min-h-[120px]"
+            />
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">Cancel</Button>
+        <Button>Submit</Button>
+      </CardFooter>
+    </Card>
+  );
+}
+
+export function SupportHelpTabs() {
+  return (
+    <Tabs defaultValue="faq" className="space-y-4">
+      <TabsList>
+        <TabsTrigger value="faq">Frequently Asked Questions</TabsTrigger>
+        <TabsTrigger value="contact">Contact Support</TabsTrigger>
+      </TabsList>
+      <TabsContent value="faq" className="space-y-4">
+        <FaqAccordion />
+      </TabsContent>
+      <TabsContent value="contact" className="space-y-4">
+        <ContactSupportForm />
+      </TabsContent>
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,157 @@
+import { Link } from "react-router-dom";
+import { Badge } from "@/design-system/ui/badge";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import {
+  BookOpen,
+  Code2,
+  Laptop,
+  Linkedin,
+  MessageCircle,
+  MessageSquare,
+  PlayCircle,
+  Twitter,
+  Users,
+  Video,
+} from "lucide-react";
+
+interface ResourceLink {
+  label: string;
+  to: string;
+  icon: React.ReactNode;
+  badge?: string;
+}
+
+interface ResourceSection {
+  title: string;
+  description: string;
+  cta: string;
+  links: ResourceLink[];
+}
+
+const documentationLinks: ResourceLink[] = [
+  {
+    label: "Getting Started Guide",
+    to: "#",
+    icon: <BookOpen className="h-4 w-4" />,
+  },
+  { label: "API Reference", to: "#", icon: <Code2 className="h-4 w-4" /> },
+  {
+    label: "Workflow Examples",
+    to: "#",
+    icon: <Laptop className="h-4 w-4" />,
+  },
+  { label: "Node Reference", to: "#", icon: <Users className="h-4 w-4" /> },
+];
+
+const tutorialLinks: ResourceLink[] = [
+  {
+    label: "Introduction to Orcheo Canvas",
+    to: "#",
+    icon: <PlayCircle className="h-4 w-4" />,
+    badge: "New",
+  },
+  {
+    label: "Building Your First Workflow",
+    to: "#",
+    icon: <PlayCircle className="h-4 w-4" />,
+  },
+  {
+    label: "Advanced Workflow Techniques",
+    to: "#",
+    icon: <PlayCircle className="h-4 w-4" />,
+  },
+  {
+    label: "Debugging and Troubleshooting",
+    to: "#",
+    icon: <Video className="h-4 w-4" />,
+  },
+];
+
+const communityLinks: ResourceLink[] = [
+  {
+    label: "Community Forum",
+    to: "#",
+    icon: <MessageSquare className="h-4 w-4" />,
+  },
+  {
+    label: "Discord Server",
+    to: "#",
+    icon: <MessageCircle className="h-4 w-4" />,
+  },
+  {
+    label: "LinkedIn Group",
+    to: "#",
+    icon: <Linkedin className="h-4 w-4" />,
+  },
+  {
+    label: "Twitter",
+    to: "#",
+    icon: <Twitter className="h-4 w-4" />,
+  },
+];
+
+const resourceSections: ResourceSection[] = [
+  {
+    title: "Documentation",
+    description: "Explore our guides and examples",
+    cta: "View All Documentation",
+    links: documentationLinks,
+  },
+  {
+    title: "Video Tutorials",
+    description: "Learn through step-by-step videos",
+    cta: "View All Tutorials",
+    links: tutorialLinks,
+  },
+  {
+    title: "Community",
+    description: "Connect with other Orcheo Canvas users",
+    cta: "Join Our Community",
+    links: communityLinks,
+  },
+];
+
+export function SupportResources() {
+  return (
+    <section className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {resourceSections.map((section) => (
+        <Card key={section.title}>
+          <CardHeader>
+            <CardTitle>{section.title}</CardTitle>
+            <CardDescription>{section.description}</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-2">
+            {section.links.map((link) => (
+              <Link
+                key={link.label}
+                to={link.to}
+                className="flex items-center gap-2 rounded-md p-2 hover:bg-muted"
+              >
+                {link.icon}
+                {link.label}
+                {link.badge ? (
+                  <Badge variant="secondary" className="ml-auto">
+                    {link.badge}
+                  </Badge>
+                ) : null}
+              </Link>
+            ))}
+          </CardContent>
+          <CardFooter>
+            <Button variant="outline" className="w-full">
+              {section.cta}
+            </Button>
+          </CardFooter>
+        </Card>
+      ))}
+    </section>
+  );
+}

package/src/features/support/pages/help-support.tsx

@@ -0,0 +1,72 @@
+import { useMemo, useState } from "react";
+import TopNavigation from "@features/shared/components/top-navigation";
+import useCredentialVault from "@/hooks/use-credential-vault";
+import { SupportHeader } from "@features/support/components/support-header";
+import { SupportResources } from "@features/support/components/support-resources";
+import { SupportHelpTabs } from "@features/support/components/support-help-tabs";
+import { SupportChatCallout } from "@features/support/components/support-chat-callout";
+import type { ChatMessageProps } from "@features/shared/components/chat-message";
+
+const user = {
+  id: "user-1",
+  name: "Avery Chen",
+  avatar: "https://avatar.vercel.sh/avery",
+};
+
+const ai = {
+  id: "ai-1",
+  name: "Orcheo Canvas Support",
+  avatar: "https://avatar.vercel.sh/orcheo-canvas",
+  isAI: true,
+};
+
+export default function HelpSupport() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const initialMessages = useMemo<ChatMessageProps[]>(
+    () => [
+      {
+        id: "msg-1",
+        content:
+          "Hello! I'm the Orcheo Canvas support assistant. How can I help you today?",
+        sender: ai,
+        timestamp: new Date(Date.now() - 60000),
+      },
+    ],
+    [],
+  );
+
+  const {
+    credentials,
+    isLoading: isCredentialsLoading,
+    onAddCredential,
+    onDeleteCredential,
+  } = useCredentialVault({ actorName: user.name });
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <TopNavigation
+        credentials={credentials}
+        isCredentialsLoading={isCredentialsLoading}
+        onAddCredential={onAddCredential}
+        onDeleteCredential={onDeleteCredential}
+      />
+
+      <main className="mx-auto w-full max-w-7xl flex-1 space-y-6 p-8 pt-6">
+        <SupportHeader
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+        />
+
+        <SupportResources />
+
+        <SupportHelpTabs />
+
+        <SupportChatCallout
+          ai={ai}
+          user={user}
+          initialMessages={initialMessages}
+        />
+      </main>
+    </div>
+  );
+}

package/src/features/workflow/components/canvas/annotations-layer/annotation-composer.tsx

@@ -0,0 +1,109 @@
+import { Button } from "@/design-system/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/design-system/ui/avatar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/design-system/ui/popover";
+import { Textarea } from "@/design-system/ui/textarea";
+import { Plus, X } from "lucide-react";
+
+interface AnnotationComposerProps {
+  isAdding: boolean;
+  position: { x: number; y: number };
+  content: string;
+  onToggle: () => void;
+  onContentChange: (value: string) => void;
+  onSubmit: () => void;
+  onCancel: () => void;
+}
+
+export function AnnotationComposer({
+  isAdding,
+  position,
+  content,
+  onToggle,
+  onContentChange,
+  onSubmit,
+  onCancel,
+}: AnnotationComposerProps) {
+  return (
+    <>
+      <div className="absolute top-4 right-4 pointer-events-auto z-10">
+        <Button
+          variant={isAdding ? "default" : "outline"}
+          size="sm"
+          onClick={onToggle}
+          className="gap-2"
+        >
+          {isAdding ? (
+            <>
+              <X className="h-4 w-4" />
+              Cancel
+            </>
+          ) : (
+            <>
+              <Plus className="h-4 w-4" />
+              Add Comment
+            </>
+          )}
+        </Button>
+      </div>
+
+      {isAdding && (
+        <div className="absolute top-16 right-4 bg-background border border-border rounded-md p-2 shadow-md pointer-events-auto">
+          <p className="text-xs text-muted-foreground">
+            Click anywhere on the canvas to add a comment
+          </p>
+        </div>
+      )}
+
+      {isAdding && (
+        <Popover open>
+          <PopoverTrigger asChild>
+            <div
+              className="absolute w-6 h-6 bg-primary rounded-full flex items-center justify-center cursor-pointer pointer-events-auto"
+              style={{
+                left: `${position.x}px`,
+                top: `${position.y}px`,
+                transform: "translate(-50%, -50%)",
+              }}
+            >
+              <Plus className="h-4 w-4 text-primary-foreground" />
+            </div>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-80 pointer-events-auto"
+            side="right"
+            align="start"
+          >
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Avatar className="h-6 w-6">
+                  <AvatarImage src="https://avatar.vercel.sh/avery" />
+                  <AvatarFallback>CU</AvatarFallback>
+                </Avatar>
+                <span className="text-sm font-medium">Current User</span>
+              </div>
+              <Textarea
+                placeholder="Add your comment..."
+                className="min-h-[100px]"
+                value={content}
+                onChange={(event) => onContentChange(event.target.value)}
+                autoFocus
+              />
+              <div className="flex justify-end gap-2">
+                <Button variant="ghost" size="sm" onClick={onCancel}>
+                  Cancel
+                </Button>
+                <Button size="sm" onClick={onSubmit}>
+                  Add Comment
+                </Button>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      )}
+    </>
+  );
+}

package/src/features/workflow/components/canvas/annotations-layer/annotation-item.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/design-system/ui/avatar";
+import { Button } from "@/design-system/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/design-system/ui/dropdown-menu";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/design-system/ui/popover";
+import { Textarea } from "@/design-system/ui/textarea";
+import { Edit, MessageSquare, MoreHorizontal, Trash } from "lucide-react";
+
+import type { Annotation } from "./types";
+
+interface AnnotationItemProps {
+  annotation: Annotation;
+  readOnly: boolean;
+  onUpdate?: (id: string, content: string) => void;
+  onDelete?: (id: string) => void;
+}
+
+export function AnnotationItem({
+  annotation,
+  readOnly,
+  onUpdate,
+  onDelete,
+}: AnnotationItemProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [content, setContent] = useState(annotation.content);
+
+  useEffect(() => {
+    setContent(annotation.content);
+  }, [annotation.content]);
+
+  const handleSave = () => {
+    if (!content.trim() || !onUpdate) {
+      return;
+    }
+
+    onUpdate(annotation.id, content);
+    setIsEditing(false);
+  };
+
+  const handleDelete = () => {
+    onDelete?.(annotation.id);
+  };
+
+  return (
+    <div
+      className="absolute pointer-events-auto"
+      style={{
+        left: `${annotation.position.x}px`,
+        top: `${annotation.position.y}px`,
+      }}
+    >
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-6 w-6 rounded-full bg-background border-primary"
+          >
+            <MessageSquare className="h-3 w-3 text-primary" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80" side="right" align="start">
+          {isEditing ? (
+            <div className="space-y-2">
+              <Textarea
+                value={content}
+                onChange={(event) => setContent(event.target.value)}
+                className="min-h-[100px]"
+                autoFocus
+              />
+              <div className="flex justify-end gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setIsEditing(false)}
+                >
+                  Cancel
+                </Button>
+                <Button size="sm" onClick={handleSave}>
+                  Save
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Avatar className="h-6 w-6">
+                    <AvatarImage src={annotation.author.avatar} />
+                    <AvatarFallback>
+                      {annotation.author.name.charAt(0)}
+                    </AvatarFallback>
+                  </Avatar>
+                  <span className="text-sm font-medium">
+                    {annotation.author.name}
+                  </span>
+                </div>
+                {!readOnly && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon" className="h-8 w-8">
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={() => setIsEditing(true)}>
+                        <Edit className="mr-2 h-4 w-4" />
+                        Edit
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onClick={handleDelete}
+                        className="text-destructive focus:text-destructive"
+                      >
+                        <Trash className="mr-2 h-4 w-4" />
+                        Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+              </div>
+              <p className="text-sm">{annotation.content}</p>
+              <p className="text-xs text-muted-foreground">
+                {new Date(annotation.createdAt).toLocaleString()}
+              </p>
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/src/features/workflow/components/canvas/annotations-layer/annotation-list.tsx

@@ -0,0 +1,30 @@
+import { AnnotationItem } from "./annotation-item";
+import type { Annotation } from "./types";
+
+interface AnnotationListProps {
+  annotations: Annotation[];
+  readOnly: boolean;
+  onUpdateAnnotation?: (id: string, content: string) => void;
+  onDeleteAnnotation?: (id: string) => void;
+}
+
+export function AnnotationList({
+  annotations,
+  readOnly,
+  onUpdateAnnotation,
+  onDeleteAnnotation,
+}: AnnotationListProps) {
+  return (
+    <>
+      {annotations.map((annotation) => (
+        <AnnotationItem
+          key={annotation.id}
+          annotation={annotation}
+          readOnly={readOnly}
+          onUpdate={onUpdateAnnotation}
+          onDelete={onDeleteAnnotation}
+        />
+      ))}
+    </>
+  );
+}

package/src/features/workflow/components/canvas/annotations-layer/types.ts

@@ -0,0 +1,10 @@
+export interface Annotation {
+  id: string;
+  content: string;
+  position: { x: number; y: number };
+  author: {
+    name: string;
+    avatar: string;
+  };
+  createdAt: string;
+}