larkup 0.1.14 → 0.1.21

package/components/data/firecrawl-notice.tsx

@@ -33,17 +33,20 @@ interface DockerState {
 interface LocalResponse {
   state: LocalState;
   docker: DockerState;
+  runtimeEnv?: "web" | "desktop" | "docker";
 }
 
 const fetcher = (url: string) => fetch(url).then((r) => r.json());
 
 /**
- * Local Firecrawl launcher.
+ * Web-crawler launcher notice.
  *
- * Lets the user spin up a self-hosted Firecrawl via Docker straight from the
- * UI — no manual API key needed. We generate a bearer token automatically and
- * wire the local endpoint into the scraper, so web search + crawling work
- * against localhost. If the cloud key is already set, this stays collapsed.
+ * Adapts to the runtime environment:
+ * - **Web / Desktop**: lets the user spin up a self-hosted crawler via Docker.
+ * - **Docker**: detects a sibling crawler service on the Docker network.
+ *
+ * The API key (cloud) option is managed in Settings — this component only
+ * handles the local/Docker launcher.
  */
 export function FirecrawlNotice({
   cloudConfigured = false,
@@ -66,6 +69,7 @@ export function FirecrawlNotice({
 
   const state = data?.state;
   const docker = data?.docker;
+  const runtimeEnv = data?.runtimeEnv ?? "web";
   const running = state?.running ?? false;
   const dockerReady = docker?.compose ?? false;
   const hasError = !cloudConfigured && (!dockerReady || !!state?.lastError);
@@ -79,10 +83,17 @@ export function FirecrawlNotice({
   async function control(action: "start" | "stop") {
     setBusy(action);
     if (action === "start") {
-      toast.info("Launching local Firecrawl…", {
-        description:
-          "Pulling images and starting containers. This can take a minute on first run.",
-      });
+      toast.info(
+        runtimeEnv === "docker"
+          ? "Connecting to crawler service…"
+          : "Launching web crawler…",
+        {
+          description:
+            runtimeEnv === "docker"
+              ? "Checking if the crawler service is available on the network."
+              : "Pulling images and starting containers. This can take a minute on first run.",
+        },
+      );
     }
     try {
       const res = await fetch("/api/firecrawl/local", {
@@ -95,22 +106,23 @@ export function FirecrawlNotice({
 
       if (action === "start") {
         if (json.state?.running) {
-          toast.success("Local Firecrawl is running", {
-            description: "Web scraping is now wired to your local instance.",
+          toast.success("Web crawler is running", {
+            description: "Web scraping is now active.",
           });
         } else {
-          toast.warning("Containers started", {
+          toast.warning("Crawler started", {
             description:
-              json.state?.lastError ?? "Waiting for the API to become healthy.",
+              json.state?.lastError ??
+              "Waiting for the service to become healthy.",
           });
         }
       } else {
-        toast.success("Local Firecrawl stopped");
+        toast.success("Web crawler stopped");
       }
       await mutate();
       onChange?.();
     } catch (err) {
-      toast.error("Could not control local Firecrawl", {
+      toast.error("Could not control web crawler", {
         description: formatErrorMessage(err),
       });
     } finally {
@@ -118,119 +130,79 @@ export function FirecrawlNotice({
     }
   }
 
-  // Cloud key present and no local instance running → nothing to show.
-  if (cloudConfigured && !running && !state?.startedAt) return null;
+  // Both cloud and local options are kept available.
+
+  // Description text based on environment
+  const idleDescription = (() => {
+    if (runtimeEnv === "docker") {
+      return dockerReady
+        ? "A crawler service was found on the network. Click to connect."
+        : "Start your deployment with the crawler profile to enable web scraping: docker compose --profile crawler up";
+    }
+    if (cloudConfigured) {
+      return "You have a cloud key set. You can also run the crawler locally via Docker.";
+    }
+    return "Launch a self-hosted web crawler via Docker. A key is generated automatically — no signup required. Pasting and uploading work without it.";
+  })();
 
   return (
-    <Alert>
+    <div className="flex items-center gap-2">
       {running ? (
-        <Server className="size-4 text-primary" />
+        <Button
+          variant="outline"
+          className="h-10 gap-1.5 rounded-md bg-red-500 hover:bg-red-600 text-white hover:text-white hover:border-red-200 text-sm px-4 shadow-none"
+          onClick={() => control("stop")}
+          disabled={busy !== null}
+        >
+          {busy === "stop" ? (
+            <Loader2 className="size-3 animate-spin" />
+          ) : (
+            <Square className="size-3" />
+          )}
+          Stop Crawler
+        </Button>
       ) : (
-        <KeyRound className="size-4" />
-      )}
-      <AlertTitle className="flex items-center gap-2">
-        {running ? "Web Crawler is running" : "Launch Web Crawler"}
-        {running && (
-          <Badge
-            variant="secondary"
-            className="gap-1 font-normal text-green-600"
-          >
-            <span className="relative flex size-1.5">
-              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75" />
-              <span className="relative inline-flex size-1.5 rounded-full bg-green-500" />
-            </span>
-            live
-          </Badge>
-        )}
-      </AlertTitle>
-      <AlertDescription className="flex flex-col gap-0">
-        {running ? (
-          <p className="text-sm">
-            Connected to{" "}
-            <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">
-              {state?.endpoint}
-            </code>
-            . A bearer token was generated automatically — web search and
-            crawling use it without any setup.
-          </p>
-        ) : (
-          <p className="text-sm">
-            {cloudConfigured
-              ? "You have a cloud key set. You can also run Firecrawl locally in Docker."
-              : "Launch a self-hosted Firecrawl in Docker. A key is generated for you automatically, no signup required. Pasting and uploading work without it."}
-          </p>
-        )}
-
-        {/* Docker readiness hint */}
-        {!isLoading && !dockerReady && !running && docker?.message && (
-          <div className="flex items-start gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
-            <TriangleAlert className="mt-0.5 size-3.5 shrink-0 text-destructive" />
-            <span>{formatErrorMessage(docker.message)}</span>
-          </div>
-        )}
-
-        {state?.lastError && !running && (
-          <div className="flex items-start mb-3 gap-2 max-h-[200px]! overflow-auto rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive">
-            <TriangleAlert className="mt-0.5 size-3.5 shrink-0" />
-            <span>{formatErrorMessage(state.lastError)}</span>
-          </div>
-        )}
-
-        <div className="flex items-center gap-2 pb-2">
-          {running ? (
-            <Button
-              size="sm"
-              variant="destructive"
-              className={"bg-red-500 hover:bg-red-500/80 text-white "}
-              onClick={() => control("stop")}
-              disabled={busy !== null}
-            >
-              {busy === "stop" ? (
-                <Loader2 className="size-4 animate-spin text-white" />
-              ) : (
-                <Square className="size-4 text-white!" />
-              )}
-              Stop
-            </Button>
+        <Button
+          variant="outline"
+          onClick={() => control("start")}
+          disabled={
+            busy !== null ||
+            isLoading ||
+            (!dockerReady && runtimeEnv !== "docker")
+          }
+          className="h-10 gap-1.5 rounded-md text-sm px-4 shadow-none bg-orange-500 text-white hover:bg-orange-600 hover:text-white"
+        >
+          {busy === "start" ? (
+            <Loader2 className="size-3 animate-spin text-muted-foreground" />
           ) : (
-            <Button
-              size="sm"
-              onClick={() => control("start")}
-              disabled={busy !== null || isLoading || !dockerReady}
-              className="
-    inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium
-    bg-[#F97316] hover:bg-[#EA6C0A]
-    text-white border-none
-    rounded-md transition-all duration-200
-    disabled:opacity-70 disabled:cursor-not-allowed
-  "
-            >
-              {busy === "start" ? (
-                <Loader2 className="size-4 animate-spin text-white" />
-              ) : (
-                <img
-                  src="/icons/firecrawl2.png"
-                  alt="Firecrawl"
-                  className="size-4 object-contain"
-                />
-              )}
-              Launch Web Crawler
-            </Button>
+            <img
+              src="/icons/firecrawl2.png"
+              alt=""
+              className="size-3 object-contain"
+            />
           )}
+          {runtimeEnv === "docker" ? "Connect Crawler" : "Launch Crawler"}
+        </Button>
+      )}
 
-          {/* {dockerReady && !running && (
-            <span className="flex items-center gap-1 text-xs text-cyan-700  bg-white px-3 p-1 rounded-md">
-              <img
-                src={"/docker.png"}
-                alt="docker"
-                width={20}
-                height={20}
-              />
-              Docker ready
-            </span>
-          )} */}
-        </div>
-      </AlertDescription>
-    </Alert>
+      {state?.lastError && !running && (
+        <span
+          className="text-[10px] text-destructive flex items-center gap-1 max-w-[200px] truncate"
+          title={state.lastError}
+        >
+          <TriangleAlert className="size-3 shrink-0" />
+          <span className="truncate">Error starting crawler</span>
+        </span>
+      )}
+      {!isLoading && !dockerReady && !running && docker?.message && (
+        <span
+          className="text-[10px] text-destructive flex items-center gap-1 max-w-[200px] truncate"
+          title={docker.message}
+        >
+          <TriangleAlert className="size-3 shrink-0" />
+          <span className="truncate">Docker issue</span>
+        </span>
+      )}
+    </div>
   );
 }

package/components/data/integrations-panel.tsx

@@ -0,0 +1,408 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import useSWR from 'swr';
+import { NotionPanel } from '@/components/data/notion-panel';
+import { useNotionAuth } from '@/hooks/use-notion-auth';
+import { cn } from '@/lib/utils';
+import { CableIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Loader2, Sparkles } from 'lucide-react';
+import { toast } from 'sonner';
+
+interface Integration {
+  id: string;
+  name: string;
+  category: string;
+  description: string;
+  icon: string;
+  available: boolean;
+}
+
+const INTEGRATIONS: Integration[] = [
+  {
+    id: 'notion',
+    name: 'Notion',
+    category: 'Documentation',
+    description: 'Pages, docs, and knowledge bases.',
+    icon: '/notion.png',
+    available: true,
+  },
+  {
+    id: 'google-drive',
+    name: 'Google Drive',
+    category: 'Documentation',
+    description: 'Files, folders, and shared drives.',
+    icon: '/icons/google-drive.png',
+    available: false,
+  },
+  {
+    id: 'google-calendar',
+    name: 'Google Calendar',
+    category: 'Communication',
+    description: 'Events, schedules, and meetings.',
+    icon: '/icons/google-calender.png',
+    available: false,
+  },
+  {
+    id: 'slack',
+    name: 'Slack',
+    category: 'Communication',
+    description: 'Channels, messages, and DMs.',
+    icon: '/icons/slack.png',
+    available: false,
+  },
+  {
+    id: 'salesforce',
+    name: 'Salesforce',
+    category: 'CRM',
+    description: 'Accounts, contacts, and opportunities.',
+    icon: '/icons/Salesforce.png',
+    available: false,
+  },
+  {
+    id: 'linear',
+    name: 'Linear',
+    category: 'Project Management',
+    description: 'Issues, projects, and roadmaps.',
+    icon: '/icons/linear.png',
+    available: false,
+  },
+  {
+    id: 'jira',
+    name: 'Jira',
+    category: 'Project Management',
+    description: 'Issues, sprints, and projects.',
+    icon: '/icons/jira.png',
+    available: false,
+  },
+  {
+    id: 'confluence',
+    name: 'Confluence',
+    category: 'Documentation',
+    description: 'Pages, spaces, and knowledge bases.',
+    icon: '/icons/Confluence.png',
+    available: false,
+  },
+  {
+    id: 'sharepoint',
+    name: 'SharePoint',
+    category: 'Documentation',
+    description: 'Sites, lists, and document libraries.',
+    icon: '/icons/sharepoint.png',
+    available: false,
+  },
+  {
+    id: 'sap',
+    name: 'SAP',
+    category: 'ERP',
+    description: 'Business processes, data, and analytics.',
+    icon: '/icons/sap.png',
+    available: false,
+  },
+  {
+    id: 'outlook',
+    name: 'Outlook',
+    category: 'Communication',
+    description: 'Emails, contacts, and calendars.',
+    icon: '/icons/outlook.png',
+    available: false,
+  },
+  {
+    id: 'onedrive',
+    name: 'OneDrive',
+    category: 'Documentation',
+    description: 'Files, folders, and shared drives.',
+    icon: '/icons/onedrive.png',
+    available: false,
+  },
+];
+
+export function IntegrationsPanel({ onAdded }: { onAdded: () => void }) {
+  const [activeIntegration, setActiveIntegration] = useState<string | null>(null);
+
+  const {
+    data: notionData,
+    isLoading: isNotionLoading,
+    mutate: mutateNotion,
+  } = useSWR('/api/integrations/notion', (url) => fetch(url).then((res) => res.json()));
+
+  const connectedStatus: Record<string, boolean> = { notion: notionData?.connected ?? false };
+  const isLoadingStatus = isNotionLoading && notionData === undefined;
+
+  const [isRequestModalOpen, setIsRequestModalOpen] = useState(false);
+  const [requestName, setRequestName] = useState('');
+  const [requestCompany, setRequestCompany] = useState('');
+  const [requestEmail, setRequestEmail] = useState('');
+  const [requestMessage, setRequestMessage] = useState('');
+  const [isRequesting, setIsRequesting] = useState(false);
+  const [requestSuccess, setRequestSuccess] = useState(false);
+
+  const handleRequestIntegration = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!requestEmail) return;
+
+    setIsRequesting(true);
+    try {
+      const res = await fetch(
+        process.env.NEXT_PUBLIC_CONNECT_API_URL || 'https://www.larkup.de/api/connect',
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            name: requestName,
+            company: requestCompany,
+            email: requestEmail,
+            message: requestMessage,
+          }),
+        },
+      );
+
+      if (!res.ok) {
+        throw new Error('Failed to send request');
+      }
+
+      setRequestSuccess(true);
+      toast.success('Request sent successfully!');
+
+      setTimeout(() => {
+        setIsRequestModalOpen(false);
+        setRequestSuccess(false);
+        setRequestName('');
+        setRequestCompany('');
+        setRequestEmail('');
+        setRequestMessage('');
+      }, 2000);
+    } catch (error) {
+      toast.error('Failed to send request. Please try again later.');
+    } finally {
+      setIsRequesting(false);
+    }
+  };
+
+  const fetchStatuses = () => {
+    mutateNotion();
+  };
+
+  const { connectToNotion: handleConnectNotion } = useNotionAuth({
+    onSuccess: () => {
+      fetchStatuses();
+      toast.success('Successfully connected to Notion');
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  return (
+    <div className="space-y-6">
+      {/* Available integrations */}
+      <div>
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-sm font-semibold text-foreground">Available Integrations</h3>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 gap-2 bg-white/80 hover:bg-white"
+            onClick={() => setIsRequestModalOpen(true)}
+          >
+            <CableIcon className="size-3.5" />
+            Ask for integration
+          </Button>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+          {INTEGRATIONS.map((integration) => {
+            const isConnected = connectedStatus[integration.id];
+
+            return (
+              <div
+                key={integration.id}
+                className={cn(
+                  'group flex items-center justify-between gap-3.5 rounded-xl border px-4 py-3.5 text-left transition-all',
+                  integration.available
+                    ? 'border-border bg-white/80 hover:border-primary/20 hover:bg-white'
+                    : 'border-border/40 opacity-60',
+                )}
+              >
+                <div className="flex items-center gap-3.5 min-w-0">
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted/30">
+                    <img
+                      src={integration.icon}
+                      alt={integration.name}
+                      className="size-6 object-contain"
+                    />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium text-foreground">
+                        {integration.name}
+                      </span>
+                      <span className="text-[10px] font-medium text-muted-foreground/70">
+                        {integration.category}
+                      </span>
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-0.5 truncate max-w-50">
+                      {integration.description}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="shrink-0">
+                  {integration.available ? (
+                    isLoadingStatus ? (
+                      <Button variant="outline" size="sm" className="h-8 w-21" disabled>
+                        <Loader2 className="size-3.5 animate-spin" />
+                      </Button>
+                    ) : isConnected || false ? (
+                      <Button
+                        variant="default"
+                        size="sm"
+                        className="h-8 w-21"
+                        onClick={() => setActiveIntegration(integration.id)}
+                      >
+                        Configure
+                      </Button>
+                    ) : (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-8 w-21 bg-muted/50 hover:bg-muted/80 "
+                        onClick={() => {
+                          if (integration.id === 'notion') {
+                            handleConnectNotion();
+                          } else {
+                            setActiveIntegration(integration.id);
+                          }
+                        }}
+                      >
+                        Connect
+                      </Button>
+                    )
+                  ) : (
+                    <span className="text-[10px] font-medium text-muted-foreground bg-muted rounded-md px-2 py-0.5 shrink-0">
+                      Soon
+                    </span>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <Dialog
+        open={!!activeIntegration}
+        onOpenChange={(open) => {
+          if (!open) {
+            setActiveIntegration(null);
+            // Re-fetch status when closing modal to update UI
+            if (activeIntegration === 'notion') {
+              mutateNotion();
+            }
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-3xl">
+          <DialogHeader className="sr-only">
+            <DialogTitle>Integration Panel</DialogTitle>
+          </DialogHeader>
+          {activeIntegration === 'notion' && (
+            <NotionPanel onAdded={onAdded} onClose={() => setActiveIntegration(null)} />
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isRequestModalOpen} onOpenChange={setIsRequestModalOpen}>
+        <DialogContent className="sm:max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>Ask for Integration</DialogTitle>
+          </DialogHeader>
+          {requestSuccess ? (
+            <div className="flex flex-col items-center justify-center py-8 text-center space-y-4">
+              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+                <Sparkles className="h-6 w-6" />
+              </div>
+              <p className="text-sm text-muted-foreground">
+                Thank you! We've received your request and will get back to you soon.
+              </p>
+            </div>
+          ) : (
+            <form onSubmit={handleRequestIntegration} className="space-y-4 mt-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Name</Label>
+                  <Input
+                    id="name"
+                    type="text"
+                    placeholder="John Doe"
+                    value={requestName}
+                    onChange={(e) => setRequestName(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="company">Company</Label>
+                  <Input
+                    id="company"
+                    type="text"
+                    placeholder="Acme Inc."
+                    value={requestCompany}
+                    onChange={(e) => setRequestCompany(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="email">
+                  Your Email <span className="text-red-500">*</span>
+                </Label>
+                <Input
+                  id="email"
+                  type="email"
+                  required
+                  placeholder="name@company.com"
+                  value={requestEmail}
+                  onChange={(e) => setRequestEmail(e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="message">Which integration do you need?</Label>
+                <Textarea
+                  id="message"
+                  placeholder="Tell us which tool you want to connect and how you plan to use it..."
+                  className="resize-none min-h-30 max-h-67.5!"
+                  rows={5}
+                  value={requestMessage}
+                  onChange={(e) => setRequestMessage(e.target.value)}
+                />
+              </div>
+              <DialogFooter className="bg-muted/50 border-border/70 mt-6">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setIsRequestModalOpen(false)}
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={isRequesting}>
+                  {isRequesting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                  Submit Request
+                </Button>
+              </DialogFooter>
+            </form>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}