From 6294f5fa3384f82f51631e43685bba0e49abab4f Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Sat, 29 Jun 2024 20:34:48 +0530
Subject: fix typescript errors

---
 apps/web/components/canvas/canvas.tsx             |  96 ++++++++++
 apps/web/components/canvas/draggableComponent.tsx |  67 +++++++
 apps/web/components/canvas/dropComponent.tsx      | 206 ++++++++++++++++++++++
 apps/web/components/canvas/enabledComp copy.tsx   |  22 +++
 apps/web/components/canvas/enabledComp.tsx        |  22 +++
 apps/web/components/canvas/resizableLayout.tsx    | 170 ++++++++++++++++++
 apps/web/components/canvas/savesnap.tsx           |  33 ++++
 apps/web/components/canvas/textCard.tsx           |  45 +++++
 apps/web/components/canvas/twitterCard.tsx        |  84 +++++++++
 9 files changed, 745 insertions(+)
 create mode 100644 apps/web/components/canvas/canvas.tsx
 create mode 100644 apps/web/components/canvas/draggableComponent.tsx
 create mode 100644 apps/web/components/canvas/dropComponent.tsx
 create mode 100644 apps/web/components/canvas/enabledComp copy.tsx
 create mode 100644 apps/web/components/canvas/enabledComp.tsx
 create mode 100644 apps/web/components/canvas/resizableLayout.tsx
 create mode 100644 apps/web/components/canvas/savesnap.tsx
 create mode 100644 apps/web/components/canvas/textCard.tsx
 create mode 100644 apps/web/components/canvas/twitterCard.tsx

(limited to 'apps/web/components')

diff --git a/apps/web/components/canvas/canvas.tsx b/apps/web/components/canvas/canvas.tsx
new file mode 100644
index 00000000..1fbff4b8
--- /dev/null
+++ b/apps/web/components/canvas/canvas.tsx
@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Editor, Tldraw, setUserPreferences, TLStoreWithStatus } from "tldraw";
+import { createAssetFromUrl } from "../../lib/createAssetUrl";
+import "tldraw/tldraw.css";
+import { components } from "./enabledComp";
+import { twitterCardUtil } from "./twitterCard";
+import { textCardUtil } from "./textCard";
+import createEmbedsFromUrl from "../../lib/createEmbeds";
+import { loadRemoteSnapshot } from "../../lib/loadSnap";
+import { SaveStatus } from "./savesnap";
+import { getAssetUrls } from "@tldraw/assets/selfHosted";
+import { memo } from "react";
+import DragContext from "../../lib/context";
+import DropZone from "./dropComponent";
+import { useRect } from "./resizableLayout";
+// import "./canvas.css";
+
+export const Canvas = memo(() => {
+  const [isDraggingOver, setIsDraggingOver] = useState<boolean>(false);
+  const Dragref = useRef<HTMLDivElement | null>(null);
+
+  const handleDragOver = (event: any) => {
+    event.preventDefault();
+    setIsDraggingOver(true);
+    console.log("entere");
+  };
+
+  useEffect(() => {
+    const divElement = Dragref.current;
+    if (divElement) {
+      divElement.addEventListener("dragover", handleDragOver);
+    }
+    return () => {
+      if (divElement) {
+        divElement.removeEventListener("dragover", handleDragOver);
+      }
+    };
+  }, []);
+
+  return (
+    <DragContext.Provider value={{ isDraggingOver, setIsDraggingOver }}>
+      <div ref={Dragref} className="w-full h-full">
+        <TldrawComponent />
+      </div>
+    </DragContext.Provider>
+  );
+});
+
+const TldrawComponent = memo(() => {
+  const { id } = useRect();
+  const [storeWithStatus, setStoreWithStatus] = useState<TLStoreWithStatus>({
+    status: "loading",
+  });
+  useEffect(() => {
+    const fetchStore = async () => {
+      const store = await loadRemoteSnapshot(id);
+
+      setStoreWithStatus({
+        store: store,
+        status: "not-synced",
+      });
+    };
+
+    fetchStore();
+  }, []);
+
+  const handleMount = useCallback((editor: Editor) => {
+    (window as any).app = editor;
+    (window as any).editor = editor;
+    editor.registerExternalAssetHandler("url", createAssetFromUrl);
+    editor.registerExternalContentHandler("url", ({ url, point, sources }) => {
+      createEmbedsFromUrl({ url, point, sources, editor });
+    });
+  }, []);
+
+  setUserPreferences({ id: "supermemory", colorScheme: "dark" });
+
+  const assetUrls = getAssetUrls();
+  return (
+    <div className="w-full h-full">
+      <Tldraw
+        className="relative"
+        assetUrls={assetUrls}
+        components={components}
+        store={storeWithStatus}
+        shapeUtils={[twitterCardUtil, textCardUtil]}
+        onMount={handleMount}
+      >
+        <div className="absolute left-1/2 top-0 z-[1000000] flex -translate-x-1/2 gap-2 bg-[#2C3439] text-[#B3BCC5]">
+          <SaveStatus id={id} />
+        </div>
+        <DropZone />
+      </Tldraw>
+    </div>
+  );
+});
diff --git a/apps/web/components/canvas/draggableComponent.tsx b/apps/web/components/canvas/draggableComponent.tsx
new file mode 100644
index 00000000..8c39c732
--- /dev/null
+++ b/apps/web/components/canvas/draggableComponent.tsx
@@ -0,0 +1,67 @@
+import Image from "next/image";
+import { useRef, useState } from "react";
+
+interface DraggableComponentsProps {
+  content: string;
+  extraInfo?: string;
+  iconAlt: string;
+}
+
+export default function DraggableComponentsContainer({
+  content,
+}: {
+  content: DraggableComponentsProps[];
+}) {
+  return (
+    <div className="flex flex-col gap-10">
+      {content.map((i) => {
+        return (
+          <DraggableComponents
+            content={i.content}
+            iconAlt={i.iconAlt}
+            extraInfo={i.extraInfo}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+function DraggableComponents({
+  content,
+  extraInfo,
+  iconAlt,
+}: DraggableComponentsProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    setIsDragging(true);
+    if (containerRef.current) {
+      // Serialize the children as a string for dataTransfer
+      const childrenHtml = containerRef.current.innerHTML;
+      event.dataTransfer.setData("text/html", childrenHtml);
+    }
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
+      draggable
+      className={`flex gap-4 px-1 rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
+    >
+      <div className="flex flex-col gap-2">
+        <div>
+          <h1 className="line-clamp-3">{content}</h1>
+        </div>
+        <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/canvas/dropComponent.tsx b/apps/web/components/canvas/dropComponent.tsx
new file mode 100644
index 00000000..5ea383a1
--- /dev/null
+++ b/apps/web/components/canvas/dropComponent.tsx
@@ -0,0 +1,206 @@
+import React, { useRef, useCallback, useEffect, useContext } from "react";
+import { useEditor } from "tldraw";
+import DragContext, {
+  DragContextType,
+  useDragContext,
+} from "../../lib/context";
+import { handleExternalDroppedContent } from "../../lib/createEmbeds";
+
+const stripHtmlTags = (html: string): string => {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  return div.textContent || div.innerText || "";
+};
+
+function formatTextToRatio(text: string) {
+  const totalWidth = text.length;
+  const maxLineWidth = Math.floor(totalWidth / 4);
+
+  const words = text.split(" ");
+  let lines = [];
+  let currentLine = "";
+
+  words.forEach((word) => {
+    // Check if adding the next word exceeds the maximum line width
+    if ((currentLine + word).length <= maxLineWidth) {
+      currentLine += (currentLine ? " " : "") + word;
+    } else {
+      // If the current line is full, push it to new line
+      lines.push(currentLine);
+      currentLine = word;
+    }
+  });
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  return lines.join("\n");
+}
+
+function DropZone() {
+  const dropRef = useRef<HTMLDivElement | null>(null);
+  const { isDraggingOver, setIsDraggingOver } = useDragContext();
+
+  const editor = useEditor();
+
+  const handleDragLeave = () => {
+    setIsDraggingOver(false);
+    console.log("leaver");
+  };
+
+  useEffect(() => {
+    setInterval(() => {
+      editor.selectAll();
+      const shapes = editor.getSelectedShapes();
+      const text = shapes.filter((s) => s.type === "text");
+      console.log("hrhh", text);
+    }, 5000);
+  }, []);
+
+  const handleDrop = useCallback((event: DragEvent) => {
+    event.preventDefault();
+    setIsDraggingOver(false);
+    const dt = event.dataTransfer;
+    if (!dt) {
+      return;
+    }
+    const items = dt.items;
+
+    for (let i = 0; i < items.length; i++) {
+      if (items[i]!.kind === "file" && items[i]!.type.startsWith("image/")) {
+        const file = items[i]!.getAsFile();
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            if (e.target) {
+              // setDroppedImage(e.target.result as string);
+            }
+          };
+          reader.readAsDataURL(file);
+        }
+      } else if (items[i]!.kind === "string") {
+        items[i]!.getAsString((data) => {
+          const cleanText = stripHtmlTags(data);
+          const onethree = formatTextToRatio(cleanText);
+          handleExternalDroppedContent({ editor, text: onethree });
+        });
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    const divElement = dropRef.current;
+    if (divElement) {
+      divElement.addEventListener("drop", handleDrop);
+      divElement.addEventListener("dragleave", handleDragLeave);
+    }
+    return () => {
+      if (divElement) {
+        divElement.removeEventListener("drop", handleDrop);
+        divElement.addEventListener("dragleave", handleDragLeave);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      className={`h-full flex justify-center items-center w-full absolute top-0 left-0 z-[100000] pointer-events-none  ${isDraggingOver && "bg-[#2c3439ad]  pointer-events-auto"}`}
+      ref={dropRef}
+    >
+      {isDraggingOver && (
+        <>
+          <div className="absolute top-4 left-8">
+            <TopRight />
+          </div>
+          <div className="absolute top-4 right-8">
+            <TopLeft />
+          </div>
+          <div className="absolute bottom-4 left-8">
+            <BottomLeft />
+          </div>
+          <div className="absolute bottom-4 right-8">
+            <BottomRight />
+          </div>
+          <h2 className="text-2xl">Drop here to add Content on Canvas</h2>
+        </>
+      )}
+    </div>
+  );
+}
+
+function TopRight() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M44 4H12C7.58172 4 4 7.58172 4 12V44"
+        stroke="white"
+        stroke-width="8"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
+
+function TopLeft() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 4H36C40.4183 4 44 7.58172 44 12V44"
+        stroke="white"
+        stroke-width="8"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
+
+function BottomLeft() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M44 44H12C7.58172 44 4 40.4183 4 36V4"
+        stroke="white"
+        stroke-width="8"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
+
+function BottomRight() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 44H36C40.4183 44 44 40.4183 44 36V4"
+        stroke="white"
+        stroke-width="8"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}
+
+export default DropZone;
diff --git a/apps/web/components/canvas/enabledComp copy.tsx b/apps/web/components/canvas/enabledComp copy.tsx
new file mode 100644
index 00000000..85811b82
--- /dev/null
+++ b/apps/web/components/canvas/enabledComp copy.tsx	
@@ -0,0 +1,22 @@
+import { TLUiComponents } from "tldraw";
+
+export const components: Partial<TLUiComponents> = {
+  ActionsMenu: null,
+  MainMenu: null,
+  QuickActions: null,
+  TopPanel: null,
+  DebugPanel: null,
+  DebugMenu: null,
+  PageMenu: null,
+  // Minimap: null,
+  // ContextMenu: null,
+  // HelpMenu: null,
+  // ZoomMenu: null,
+  // StylePanel: null,
+  // NavigationPanel: null,
+  // Toolbar: null,
+  // KeyboardShortcutsDialog: null,
+  // HelperButtons: null,
+  // SharePanel: null,
+  // MenuPanel: null,
+};
\ No newline at end of file
diff --git a/apps/web/components/canvas/enabledComp.tsx b/apps/web/components/canvas/enabledComp.tsx
new file mode 100644
index 00000000..85811b82
--- /dev/null
+++ b/apps/web/components/canvas/enabledComp.tsx
@@ -0,0 +1,22 @@
+import { TLUiComponents } from "tldraw";
+
+export const components: Partial<TLUiComponents> = {
+  ActionsMenu: null,
+  MainMenu: null,
+  QuickActions: null,
+  TopPanel: null,
+  DebugPanel: null,
+  DebugMenu: null,
+  PageMenu: null,
+  // Minimap: null,
+  // ContextMenu: null,
+  // HelpMenu: null,
+  // ZoomMenu: null,
+  // StylePanel: null,
+  // NavigationPanel: null,
+  // Toolbar: null,
+  // KeyboardShortcutsDialog: null,
+  // HelperButtons: null,
+  // SharePanel: null,
+  // MenuPanel: null,
+};
\ No newline at end of file
diff --git a/apps/web/components/canvas/resizableLayout.tsx b/apps/web/components/canvas/resizableLayout.tsx
new file mode 100644
index 00000000..5ba6780b
--- /dev/null
+++ b/apps/web/components/canvas/resizableLayout.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import { Canvas } from "./canvas";
+import React, { createContext, useContext, useState } from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { SettingsIcon, DragIcon } from "@repo/ui/icons";
+import DraggableComponentsContainer from "./draggableComponent";
+import Image from "next/image";
+import { Label } from "@repo/ui/shadcn/label";
+
+interface RectContextType {
+  fullScreen: boolean;
+  setFullScreen: React.Dispatch<React.SetStateAction<boolean>>;
+  visible: boolean;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  id: string
+}
+
+const RectContext = createContext<RectContextType | undefined>(undefined);
+
+export const RectProvider = ({ id, children }: {id: string, children: React.ReactNode}) => {
+  const [fullScreen, setFullScreen] = useState(false);
+  const [visible, setVisible] = useState(true);
+
+  const value = {
+    id,
+    fullScreen,
+    setFullScreen,
+    visible,
+    setVisible,
+  };
+
+  return <RectContext.Provider value={value}>{children}</RectContext.Provider>;
+};
+
+export const useRect = () => {
+  const context = useContext(RectContext);
+  if (context === undefined) {
+    throw new Error('useRect must be used within a RectProvider');
+  }
+  return context;
+};
+
+
+export function ResizaleLayout() {
+  const { setVisible, fullScreen, setFullScreen } = useRect();
+
+  return (
+    <div
+      className={`h-screen w-full ${!fullScreen ? "px-4 py-6" : "bg-[#1F2428]"} transition-all`}
+    >
+      <PanelGroup
+        onLayout={(l) => {
+          l[0]! < 20 ? setVisible(false) : setVisible(true);
+        }}
+        className={` ${fullScreen ? "w-[calc(100vw-2rem)]" : "w-screen"} transition-all`}
+        direction="horizontal"
+      >
+        <Panel
+          onExpand={() => {
+            setTimeout(() => setFullScreen(false), 50);
+          }}
+          onCollapse={() => {
+            setTimeout(() => setFullScreen(true), 50);
+          }}
+          defaultSize={30}
+          collapsible={true}
+        >
+          <SidePanelContainer />
+        </Panel>
+        <PanelResizeHandle
+          className={`relative flex items-center transition-all justify-center ${!fullScreen && "px-1"}`}
+        >
+          <DragIconContainer />
+        </PanelResizeHandle>
+        <Panel className="relative" defaultSize={70} minSize={60}>
+          <CanvasContainer />
+        </Panel>
+      </PanelGroup>
+    </div>
+  );
+}
+
+function DragIconContainer() {
+  const { fullScreen} = useRect();
+  return (
+    <div
+      className={`rounded-lg bg-[#2F363B] ${!fullScreen && "px-1"} transition-all py-2`}
+    >
+      <Image src={DragIcon} alt="drag-icon" />
+    </div>
+  );
+}
+
+function CanvasContainer() {
+  const { fullScreen} = useRect();
+  return (
+    <div
+      className={`absolute overflow-hidden transition-all inset-0 ${fullScreen ? "h-screen " : "h-[calc(100vh-3rem)] rounded-2xl"} w-full`}
+    >
+      <Canvas />
+    </div>
+  );
+}
+
+function SidePanelContainer() {
+  const { fullScreen, visible} = useRect();
+  return (
+    <div
+      className={`flex transition-all rounded-2xl ${fullScreen ? "h-screen" : "h-[calc(100vh-3rem)]"} w-full flex-col overflow-hidden bg-[#1F2428]`}
+    >
+      <div className="flex items-center justify-between bg-[#2C3439] px-4 py-2 text-lg font-medium text-[#989EA4]">
+        Change Filters
+        <Image src={SettingsIcon} alt="setting-icon" />
+      </div>
+      {visible ? (
+        <SidePanel />
+      ) : (
+        <h1 className="text-center py-10 text-xl">Need more space to show!</h1>
+      )}
+    </div>
+  );
+}
+
+function SidePanel() {
+  const [value, setValue] = useState("");
+  // const [dragAsText, setDragAsText] = useState(false);
+  return (
+    <>
+      <div className="px-3 py-5">
+        <input
+          placeholder="search..."
+          onChange={(e) => {
+            setValue(e.target.value);
+          }}
+          value={value}
+          // rows={1}
+          className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52"
+        />
+      </div>
+      <div className="flex items-center justify-end px-3 py-4">
+        {/* <Switch
+          className="bg-[#151515] data-[state=unchecked]:bg-red-400 data-[state=checked]:bg-blue-400"
+          onCheckedChange={(e) => setDragAsText(e)}
+          id="drag-text-mode"
+        /> */}
+        <Label htmlFor="drag-text-mode">Drag as Text</Label>
+      </div>
+      <DraggableComponentsContainer content={content} />
+    </>
+  );
+}
+
+
+const content = [
+  {
+    content:
+      "Regional growth patterns diverge, with strong performance in the United States and several emerging markets, contrasted by weaker prospects in many advanced economies, particularly in Europe (World Economic Forum) (OECD). The rapid adoption of artificial intelligence (AI) is expected to drive productivity growth, especially in advanced economies, potentially mitigating labor shortages and boosting income levels in emerging markets (World Economic Forum) (OECD). However, ongoing geopolitical tensions and economic fragmentation are likely to maintain a level of uncertainty and volatility in the global economy (World Economic Forum.",
+    iconAlt: "Autocomplete",
+    extraInfo:
+      "Page Url: https://chatgpt.com/c/762cd44e-1752-495b-967a-aa3c23c6024a",
+  },
+  {
+    content:
+      "As of mid-2024, the global economy is experiencing modest growth with significant regional disparities. Global GDP growth is projected to be around 3.1% in 2024, rising slightly to 3.2% in 2025. This performance, although below the pre-pandemic average, reflects resilience despite various economic pressures, including tight monetary conditions and geopolitical tensions (IMF)(OECD) Inflation is moderating faster than expected, with global headline inflation projected to fall to 5.8% in 2024 and 4.4% in 2025, contributing to improving real incomes and positive trade growth (IMF) (OECD)",
+    iconAlt: "Autocomplete",
+    extraInfo:
+      "Page Url: https://www.cnbc.com/2024/05/23/nvidia-keeps-hitting-records-can-investors-still-buy-the-stock.html?&qsearchterm=nvidia",
+  },
+];
diff --git a/apps/web/components/canvas/savesnap.tsx b/apps/web/components/canvas/savesnap.tsx
new file mode 100644
index 00000000..45fc7e9d
--- /dev/null
+++ b/apps/web/components/canvas/savesnap.tsx
@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from "react";
+import { debounce, getSnapshot, useEditor } from "tldraw";
+import { SaveCanvas } from "@/app/actions/doers";
+
+export function SaveStatus({id}: {id:string}) {
+  const [save, setSave] = useState("saved!");
+  const editor = useEditor();
+  
+
+  const debouncedSave = useCallback(
+    debounce(async () => {
+      const snapshot = getSnapshot(editor.store)
+      SaveCanvas({id, data: JSON.stringify(snapshot)})
+      
+      setSave("saved!");
+    }, 3000),
+    [editor], // Dependency array ensures the function is not recreated on every render
+  );
+
+  useEffect(() => {
+    const unsubscribe = editor.store.listen(
+      () => {
+        setSave("saving...");
+        debouncedSave();
+      },
+      { scope: "document", source: "user" },
+    );
+
+    return () => unsubscribe(); // Cleanup on unmount
+  }, [editor, debouncedSave]);
+
+  return <button>{save}</button>;
+}
\ No newline at end of file
diff --git a/apps/web/components/canvas/textCard.tsx b/apps/web/components/canvas/textCard.tsx
new file mode 100644
index 00000000..b24dae52
--- /dev/null
+++ b/apps/web/components/canvas/textCard.tsx
@@ -0,0 +1,45 @@
+import { BaseBoxShapeUtil, HTMLContainer, TLBaseShape } from "tldraw";
+
+type ITextCardShape = TLBaseShape<
+  "Textcard",
+  { w: number; h: number; content: string; extrainfo: string }
+>;
+
+export class textCardUtil extends BaseBoxShapeUtil<ITextCardShape> {
+  static override type = "Textcard" as const;
+
+  getDefaultProps(): ITextCardShape["props"] {
+    return {
+      w: 100,
+      h: 50,
+      content: "",
+      extrainfo: "",
+    };
+  }
+
+  component(s: ITextCardShape) {
+    return (
+      <HTMLContainer className="flex h-full w-full items-center justify-center">
+        <div
+          style={{
+            height: s.props.h,
+            width: s.props.w,
+            pointerEvents: "all",
+            background: "#2C3439",
+            borderRadius: "16px",
+            padding: "8px 14px",
+          }}
+        >
+          <h1 style={{ fontSize: "15px" }}>{s.props.content}</h1>
+          <p style={{ fontSize: "14px", color: "#369DFD" }}>
+            {s.props.extrainfo}
+          </p>
+        </div>
+      </HTMLContainer>
+    );
+  }
+
+  indicator(shape: ITextCardShape) {
+    return <rect width={shape.props.w} height={shape.props.h} />;
+  }
+}
diff --git a/apps/web/components/canvas/twitterCard.tsx b/apps/web/components/canvas/twitterCard.tsx
new file mode 100644
index 00000000..c5582a98
--- /dev/null
+++ b/apps/web/components/canvas/twitterCard.tsx
@@ -0,0 +1,84 @@
+import { BaseBoxShapeUtil, HTMLContainer, TLBaseShape, toDomPrecision } from "tldraw";
+
+type ITwitterCardShape = TLBaseShape<
+  "Twittercard",
+  { w: number; h: number; url: string }
+>;
+
+export class twitterCardUtil extends BaseBoxShapeUtil<ITwitterCardShape> {
+  static override type = "Twittercard" as const;
+
+  getDefaultProps(): ITwitterCardShape["props"] {
+    return {
+      w: 500,
+      h: 550,
+      url: "",
+    };
+  }
+
+  component(s: ITwitterCardShape) {
+    return (
+      <HTMLContainer className="flex h-full w-full items-center justify-center">
+        <TwitterPost
+          url={s.props.url}
+          width={s.props.w}
+          isInteractive={false}
+          height={s.props.h}
+        />
+      </HTMLContainer>
+    );
+  }
+
+  indicator(shape: ITwitterCardShape) {
+    return <rect width={shape.props.w} height={shape.props.h} />;
+  }
+}
+
+function TwitterPost({
+  isInteractive,
+  width,
+  height,
+  url,
+}: {
+  isInteractive: boolean;
+  width: number;
+  height: number;
+  url: string;
+}) {
+  const link = (() => {
+    try {
+      const urlObj = new URL(url);
+      const path = urlObj.pathname;
+      return path;
+    } catch (error) {
+      console.error("Invalid URL", error);
+      return null;
+    }
+  })();
+
+  return (
+    <iframe
+      className="tl-embed"
+      draggable={false}
+      width={toDomPrecision(width)}
+      height={toDomPrecision(height)}
+      seamless
+      referrerPolicy="no-referrer-when-downgrade"
+      style={{
+        pointerEvents: isInteractive ? "all" : "none",
+        zIndex: isInteractive ? "" : "-1",
+      }}
+      srcDoc={`
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Document</title>
+        </head>
+        <body>
+          <blockquote data-theme="dark" class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+        </body>
+        </html>`}
+    />
+  );
+}
-- 
cgit v1.2.3


From 4d381dd00f95e174a6d771dafe71b8ed673f8fab Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Mon, 1 Jul 2024 06:08:17 +0530
Subject: canvas (3/3)

---
 apps/web/components/canvas/draggableComponent.tsx | 28 +++++------
 apps/web/components/canvas/resizableLayout.tsx    | 57 ++++++++++++-----------
 apps/web/components/canvas/savesnap.tsx           |  5 +-
 3 files changed, 46 insertions(+), 44 deletions(-)

(limited to 'apps/web/components')

diff --git a/apps/web/components/canvas/draggableComponent.tsx b/apps/web/components/canvas/draggableComponent.tsx
index 8c39c732..cc31246e 100644
--- a/apps/web/components/canvas/draggableComponent.tsx
+++ b/apps/web/components/canvas/draggableComponent.tsx
@@ -1,25 +1,19 @@
 import Image from "next/image";
 import { useRef, useState } from "react";
-
-interface DraggableComponentsProps {
-  content: string;
-  extraInfo?: string;
-  iconAlt: string;
-}
+import {motion} from "framer-motion"
 
 export default function DraggableComponentsContainer({
   content,
 }: {
-  content: DraggableComponentsProps[];
+  content: {context:string}[] | undefined;
 }) {
+  if (content === undefined) return null;
   return (
     <div className="flex flex-col gap-10">
       {content.map((i) => {
         return (
           <DraggableComponents
-            content={i.content}
-            iconAlt={i.iconAlt}
-            extraInfo={i.extraInfo}
+            content={i.context}
           />
         );
       })}
@@ -29,9 +23,7 @@ export default function DraggableComponentsContainer({
 
 function DraggableComponents({
   content,
-  extraInfo,
-  iconAlt,
-}: DraggableComponentsProps) {
+}: {content: string}) {
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -49,19 +41,21 @@ function DraggableComponents({
   };
 
   return (
-    <div
+    <motion.div
+      initial={{opacity: 0, y: 5}}
+      animate={{opacity: 1, y: 0}}
       ref={containerRef}
       onDragEnd={handleDragEnd}
       onDragStart={handleDragStart}
       draggable
-      className={`flex gap-4 px-1 rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
+      className={`flex gap-4 px-3 overflow-hidden rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
     >
       <div className="flex flex-col gap-2">
         <div>
           <h1 className="line-clamp-3">{content}</h1>
         </div>
-        <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p>
+        {/* <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p> */}
       </div>
-    </div>
+    </motion.div>
   );
 }
diff --git a/apps/web/components/canvas/resizableLayout.tsx b/apps/web/components/canvas/resizableLayout.tsx
index 5ba6780b..5f88de55 100644
--- a/apps/web/components/canvas/resizableLayout.tsx
+++ b/apps/web/components/canvas/resizableLayout.tsx
@@ -13,12 +13,18 @@ interface RectContextType {
   setFullScreen: React.Dispatch<React.SetStateAction<boolean>>;
   visible: boolean;
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  id: string
+  id: string;
 }
 
 const RectContext = createContext<RectContextType | undefined>(undefined);
 
-export const RectProvider = ({ id, children }: {id: string, children: React.ReactNode}) => {
+export const RectProvider = ({
+  id,
+  children,
+}: {
+  id: string;
+  children: React.ReactNode;
+}) => {
   const [fullScreen, setFullScreen] = useState(false);
   const [visible, setVisible] = useState(true);
 
@@ -36,12 +42,11 @@ export const RectProvider = ({ id, children }: {id: string, children: React.Reac
 export const useRect = () => {
   const context = useContext(RectContext);
   if (context === undefined) {
-    throw new Error('useRect must be used within a RectProvider');
+    throw new Error("useRect must be used within a RectProvider");
   }
   return context;
 };
 
-
 export function ResizaleLayout() {
   const { setVisible, fullScreen, setFullScreen } = useRect();
 
@@ -82,7 +87,7 @@ export function ResizaleLayout() {
 }
 
 function DragIconContainer() {
-  const { fullScreen} = useRect();
+  const { fullScreen } = useRect();
   return (
     <div
       className={`rounded-lg bg-[#2F363B] ${!fullScreen && "px-1"} transition-all py-2`}
@@ -93,7 +98,7 @@ function DragIconContainer() {
 }
 
 function CanvasContainer() {
-  const { fullScreen} = useRect();
+  const { fullScreen } = useRect();
   return (
     <div
       className={`absolute overflow-hidden transition-all inset-0 ${fullScreen ? "h-screen " : "h-[calc(100vh-3rem)] rounded-2xl"} w-full`}
@@ -104,7 +109,7 @@ function CanvasContainer() {
 }
 
 function SidePanelContainer() {
-  const { fullScreen, visible} = useRect();
+  const { fullScreen, visible } = useRect();
   return (
     <div
       className={`flex transition-all rounded-2xl ${fullScreen ? "h-screen" : "h-[calc(100vh-3rem)]"} w-full flex-col overflow-hidden bg-[#1F2428]`}
@@ -123,35 +128,35 @@ function SidePanelContainer() {
 }
 
 function SidePanel() {
-  const [value, setValue] = useState("");
-  // const [dragAsText, setDragAsText] = useState(false);
+  const [content, setContent] = useState<{context: string}[]>()
   return (
     <>
       <div className="px-3 py-5">
-        <input
-          placeholder="search..."
-          onChange={(e) => {
-            setValue(e.target.value);
+        <form
+          action={async (FormData) => {
+            const search = FormData.get("search");
+            console.log(search)
+            const res = await fetch("/api/canvasai", {
+              method: "POST",
+              body: JSON.stringify({ query: search }),
+            });
+            const t = await res.json()
+            console.log(t.response.response);
+            setContent(t.response.response)
           }}
-          value={value}
-          // rows={1}
-          className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52"
-        />
-      </div>
-      <div className="flex items-center justify-end px-3 py-4">
-        {/* <Switch
-          className="bg-[#151515] data-[state=unchecked]:bg-red-400 data-[state=checked]:bg-blue-400"
-          onCheckedChange={(e) => setDragAsText(e)}
-          id="drag-text-mode"
-        /> */}
-        <Label htmlFor="drag-text-mode">Drag as Text</Label>
+        >
+          <input
+            placeholder="search..."
+            name="search"
+            className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52"
+          />
+        </form>
       </div>
       <DraggableComponentsContainer content={content} />
     </>
   );
 }
 
-
 const content = [
   {
     content:
diff --git a/apps/web/components/canvas/savesnap.tsx b/apps/web/components/canvas/savesnap.tsx
index 45fc7e9d..52654bd1 100644
--- a/apps/web/components/canvas/savesnap.tsx
+++ b/apps/web/components/canvas/savesnap.tsx
@@ -10,7 +10,10 @@ export function SaveStatus({id}: {id:string}) {
   const debouncedSave = useCallback(
     debounce(async () => {
       const snapshot = getSnapshot(editor.store)
-      SaveCanvas({id, data: JSON.stringify(snapshot)})
+      const bounds = editor.getViewportPageBounds()
+      console.log(bounds)
+
+      SaveCanvas({id, data: JSON.stringify({snapshot, bounds})})
       
       setSave("saved!");
     }, 3000),
-- 
cgit v1.2.3


From 888a1a589f1a3b218007da6fb6f2d0a512af0401 Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Mon, 1 Jul 2024 06:48:00 +0530
Subject: dhravya's improvements

---
 apps/web/components/canvas/textCard.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'apps/web/components')

diff --git a/apps/web/components/canvas/textCard.tsx b/apps/web/components/canvas/textCard.tsx
index b24dae52..79ed4091 100644
--- a/apps/web/components/canvas/textCard.tsx
+++ b/apps/web/components/canvas/textCard.tsx
@@ -25,9 +25,11 @@ export class textCardUtil extends BaseBoxShapeUtil<ITextCardShape> {
             height: s.props.h,
             width: s.props.w,
             pointerEvents: "all",
-            background: "#2C3439",
+            background: "#2d333a", 
             borderRadius: "16px",
+            border: "2px solid #3e4449",
             padding: "8px 14px",
+            overflow: "auto"
           }}
         >
           <h1 style={{ fontSize: "15px" }}>{s.props.content}</h1>
-- 
cgit v1.2.3


From 66a7c24d2204a3affe4811c6a0c9f3a1e2c2eece Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Mon, 1 Jul 2024 07:11:20 +0530
Subject: done!

---
 apps/web/components/canvas/textCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'apps/web/components')

diff --git a/apps/web/components/canvas/textCard.tsx b/apps/web/components/canvas/textCard.tsx
index 79ed4091..9f02d6ff 100644
--- a/apps/web/components/canvas/textCard.tsx
+++ b/apps/web/components/canvas/textCard.tsx
@@ -25,7 +25,7 @@ export class textCardUtil extends BaseBoxShapeUtil<ITextCardShape> {
             height: s.props.h,
             width: s.props.w,
             pointerEvents: "all",
-            background: "#2d333a", 
+            background: "#2E3C4C", 
             borderRadius: "16px",
             border: "2px solid #3e4449",
             padding: "8px 14px",
-- 
cgit v1.2.3