diff options
Diffstat (limited to 'apps/web')
56 files changed, 1567 insertions, 327 deletions
diff --git a/apps/web/.env.example b/apps/web/.env.example index 969d7377..aaf5fab4 100644 --- a/apps/web/.env.example +++ b/apps/web/.env.example @@ -1,2 +1,4 @@ NEXT_PUBLIC_BACKEND_URL=https://api.supermemory.ai -NEXT_PUBLIC_POSTHOG_KEY=
\ No newline at end of file +NEXT_PUBLIC_POSTHOG_KEY= +EXA_API_KEY= +XAI_API_KEY=
\ No newline at end of file diff --git a/apps/web/app/(auth)/login/new/page.tsx b/apps/web/app/(auth)/login/new/page.tsx index ddea896e..4fc7536b 100644 --- a/apps/web/app/(auth)/login/new/page.tsx +++ b/apps/web/app/(auth)/login/new/page.tsx @@ -14,7 +14,7 @@ import { InitialHeader } from "@/components/initial-header" import { useRouter, useSearchParams } from "next/navigation" import { useState, useEffect } from "react" import { motion } from "motion/react" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { cn } from "@lib/utils" import { Logo } from "@ui/assets/Logo" @@ -30,7 +30,11 @@ function AnimatedGradientBackground() { }} transition={{ y: { duration: 0.75, ease: "easeOut" }, - opacity: { duration: 8, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }, + opacity: { + duration: 8, + repeat: Number.POSITIVE_INFINITY, + ease: "easeInOut", + }, }} /> <motion.div @@ -42,7 +46,11 @@ function AnimatedGradientBackground() { }} transition={{ y: { duration: 0.75, ease: "easeOut" }, - opacity: { duration: 8, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }, + opacity: { + duration: 8, + repeat: Number.POSITIVE_INFINITY, + ease: "easeInOut", + }, }} /> <motion.div diff --git a/apps/web/app/api/exa/fetch-content/route.ts b/apps/web/app/api/onboarding/extract-content/route.ts index 6cdb40d5..6cdb40d5 100644 --- a/apps/web/app/api/exa/fetch-content/route.ts +++ b/apps/web/app/api/onboarding/extract-content/route.ts diff --git a/apps/web/app/api/onboarding/research/route.ts b/apps/web/app/api/onboarding/research/route.ts new file mode 100644 index 00000000..d0d6eded --- /dev/null +++ b/apps/web/app/api/onboarding/research/route.ts @@ -0,0 +1,81 @@ +import { xai } from "@ai-sdk/xai" +import { generateText } from "ai" + +interface ResearchRequest { + xUrl: string + name?: string + email?: string +} + +// prompt to get user context from X/Twitter profile +function finalPrompt(xUrl: string, userContext: string) { + return `You are researching a user based on their X/Twitter profile to help personalize their experience. + +X/Twitter Profile URL: ${xUrl}${userContext} + +Please analyze this X/Twitter profile and provide a comprehensive but concise summary of the user. Include: +- Professional background and current role (if available) +- Key interests and topics they engage with +- Notable projects, achievements, or affiliations +- Their expertise areas +- Any other relevant information that helps understand who they are + +Format the response as clear, readable paragraphs. Focus on factual information from their profile. If certain information is not available, skip that section rather than speculating.` +} + +export async function POST(req: Request) { + try { + const { xUrl, name, email }: ResearchRequest = await req.json() + + if (!xUrl?.trim()) { + return Response.json( + { error: "X/Twitter URL is required" }, + { status: 400 }, + ) + } + + const lowerUrl = xUrl.toLowerCase() + if (!lowerUrl.includes("x.com") && !lowerUrl.includes("twitter.com")) { + return Response.json( + { error: "URL must be an X/Twitter profile link" }, + { status: 400 }, + ) + } + + const contextParts: string[] = [] + if (name) contextParts.push(`Name: ${name}`) + if (email) contextParts.push(`Email: ${email}`) + const userContext = + contextParts.length > 0 + ? `\n\nAdditional context about the user:\n${contextParts.join("\n")}` + : "" + + const { text } = await generateText({ + model: xai("grok-4-1-fast-reasoning"), + prompt: finalPrompt(xUrl, userContext), + providerOptions: { + xai: { + searchParameters: { + mode: "on", + sources: [ + { + type: "web", + safeSearch: true, + }, + { + type: "x", + includedXHandles: [lowerUrl.replace("https://x.com/", "").replace("https://twitter.com/", "")], + postFavoriteCount: 10, + }, + ], + }, + }, + }, + }) + + return Response.json({ text }) + } catch (error) { + console.error("Research API error:", error) + return Response.json({ error: "Internal server error" }, { status: 500 }) + } +} diff --git a/apps/web/app/new/onboarding/page.tsx b/apps/web/app/new/onboarding/page.tsx index 57b5b4fb..1b4962e4 100644 --- a/apps/web/app/new/onboarding/page.tsx +++ b/apps/web/app/new/onboarding/page.tsx @@ -6,18 +6,18 @@ import { useState, useEffect } from "react" import { useAuth } from "@lib/auth-context" import { cn } from "@lib/utils" -import { InputStep } from "./welcome/input-step" -import { GreetingStep } from "./welcome/greeting-step" -import { WelcomeStep } from "./welcome/welcome-step" -import { ContinueStep } from "./welcome/continue-step" -import { FeaturesStep } from "./welcome/features-step" -import { MemoriesStep } from "./welcome/memories-step" -import { RelatableQuestion } from "./setup/relatable-question" -import { IntegrationsStep } from "./setup/integrations-step" +import { InputStep } from "../../../components/new/onboarding/welcome/input-step" +import { GreetingStep } from "../../../components/new/onboarding/welcome/greeting-step" +import { WelcomeStep } from "../../../components/new/onboarding/welcome/welcome-step" +import { ContinueStep } from "../../../components/new/onboarding/welcome/continue-step" +import { FeaturesStep } from "../../../components/new/onboarding/welcome/features-step" +import { ProfileStep } from "../../../components/new/onboarding/welcome/profile-step" +import { RelatableQuestion } from "../../../components/new/onboarding/setup/relatable-question" +import { IntegrationsStep } from "../../../components/new/onboarding/setup/integrations-step" import { InitialHeader } from "@/components/initial-header" -import { SetupHeader } from "./setup/header" -import { ChatSidebar } from "./setup/chat-sidebar" +import { SetupHeader } from "../../../components/new/onboarding/setup/header" +import { ChatSidebar } from "../../../components/new/onboarding/setup/chat-sidebar" import { Logo } from "@ui/assets/Logo" import NovaOrb from "@/components/nova/nova-orb" import { AnimatedGradientBackground } from "@/components/new/animated-gradient-background" @@ -152,7 +152,7 @@ export default function OnboardingPage() { case "features": return <FeaturesStep key="features" /> case "memories": - return <MemoriesStep key="memories" onSubmit={setMemoryFormData} /> + return <ProfileStep key="profile" onSubmit={setMemoryFormData} /> default: return null } diff --git a/apps/web/app/new/settings/page.tsx b/apps/web/app/new/settings/page.tsx index fbb0bc08..2b5df3ca 100644 --- a/apps/web/app/new/settings/page.tsx +++ b/apps/web/app/new/settings/page.tsx @@ -6,7 +6,7 @@ import { motion } from "motion/react" import NovaOrb from "@/components/nova/nova-orb" import { useState, useEffect, useRef } from "react" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import Account from "@/components/new/settings/account" import Integrations from "@/components/new/settings/integrations" import ConnectionsMCP from "@/components/new/settings/connections-mcp" @@ -175,7 +175,11 @@ export default function SettingsPage() { return ( <div className="h-screen flex flex-col overflow-hidden"> <header className="flex justify-between items-center px-6 py-3 shrink-0"> - <button type="button" onClick={() => router.push("/new")} className="cursor-pointer"> + <button + type="button" + onClick={() => router.push("/new")} + className="cursor-pointer" + > <Logo className="h-7" /> </button> <div className="flex items-center gap-2"> diff --git a/apps/web/components/new/add-document/connections.tsx b/apps/web/components/new/add-document/connections.tsx index 5a89cf70..b146fb4c 100644 --- a/apps/web/components/new/add-document/connections.tsx +++ b/apps/web/components/new/add-document/connections.tsx @@ -10,7 +10,7 @@ import { Check, Loader, Trash2, Zap } from "lucide-react" import { useEffect, useState } from "react" import { toast } from "sonner" import type { z } from "zod" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { cn } from "@lib/utils" import { Button } from "@ui/components/button" diff --git a/apps/web/components/new/add-document/file.tsx b/apps/web/components/new/add-document/file.tsx index 8e7dc4c4..bb605f03 100644 --- a/apps/web/components/new/add-document/file.tsx +++ b/apps/web/components/new/add-document/file.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from "react" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { FileIcon } from "lucide-react" import { useHotkeys } from "react-hotkeys-hook" @@ -19,7 +19,12 @@ interface FileContentProps { isOpen?: boolean } -export function FileContent({ onSubmit, onDataChange, isSubmitting, isOpen }: FileContentProps) { +export function FileContent({ + onSubmit, + onDataChange, + isSubmitting, + isOpen, +}: FileContentProps) { const [isDragging, setIsDragging] = useState(false) const [selectedFile, setSelectedFile] = useState<File | null>(null) const [title, setTitle] = useState("") @@ -33,8 +38,16 @@ export function FileContent({ onSubmit, onDataChange, isSubmitting, isOpen }: Fi } } - const updateData = (newFile: File | null, newTitle: string, newDescription: string) => { - onDataChange?.({ file: newFile, title: newTitle, description: newDescription }) + const updateData = ( + newFile: File | null, + newTitle: string, + newDescription: string, + ) => { + onDataChange?.({ + file: newFile, + title: newTitle, + description: newDescription, + }) } const handleFileChange = (file: File | null) => { diff --git a/apps/web/components/new/add-document/index.tsx b/apps/web/components/new/add-document/index.tsx index 9e117912..a99505bd 100644 --- a/apps/web/components/new/add-document/index.tsx +++ b/apps/web/components/new/add-document/index.tsx @@ -3,7 +3,7 @@ import { useState, useEffect, useMemo, useCallback } from "react" import { Dialog, DialogContent, DialogTitle } from "@repo/ui/components/dialog" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { FileTextIcon, GlobeIcon, diff --git a/apps/web/components/new/add-document/link.tsx b/apps/web/components/new/add-document/link.tsx index 544af86d..2efb67dc 100644 --- a/apps/web/components/new/add-document/link.tsx +++ b/apps/web/components/new/add-document/link.tsx @@ -3,7 +3,7 @@ import { useState, useEffect } from "react" import { cn } from "@lib/utils" import { Button } from "@ui/components/button" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { useHotkeys } from "react-hotkeys-hook" import { Image as ImageIcon, Loader2 } from "lucide-react" import { toast } from "sonner" diff --git a/apps/web/components/new/add-document/note.tsx b/apps/web/components/new/add-document/note.tsx index 465e295a..4f833ca2 100644 --- a/apps/web/components/new/add-document/note.tsx +++ b/apps/web/components/new/add-document/note.tsx @@ -1,7 +1,7 @@ "use client" import { useState, useEffect } from "react" -import { useHotkeys } from "react-hotkeys-hook" +import { TextEditor } from "../text-editor" interface NoteContentProps { onSubmit?: (content: string) => void @@ -31,11 +31,6 @@ export function NoteContent({ onContentChange?.(newContent) } - useHotkeys("mod+enter", handleSubmit, { - enabled: isOpen && canSubmit, - enableOnFormTags: ["TEXTAREA"], - }) - // Reset content when modal closes useEffect(() => { if (!isOpen) { @@ -45,12 +40,12 @@ export function NoteContent({ }, [isOpen, onContentChange]) return ( - <textarea - value={content} - onChange={(e) => handleContentChange(e.target.value)} - placeholder="Write your note here..." - disabled={isSubmitting} - className="w-full h-full p-4 mb-4! rounded-[14px] bg-[#14161A] shadow-inside-out resize-none disabled:opacity-50 outline-none" - /> + <div className="p-4 overflow-y-auto flex-1 w-full h-full mb-4! bg-[#14161A] shadow-inside-out rounded-[14px]"> + <TextEditor + content={undefined} + onContentChange={handleContentChange} + onSubmit={handleSubmit} + /> + </div> ) } diff --git a/apps/web/components/new/chat/index.tsx b/apps/web/components/new/chat/index.tsx index 3460c456..08f4e2ef 100644 --- a/apps/web/components/new/chat/index.tsx +++ b/apps/web/components/new/chat/index.tsx @@ -14,7 +14,7 @@ import { SquarePenIcon, } from "lucide-react" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import ChatInput from "./input" import ChatModelSelector from "./model-selector" import { GradientLogo, LogoBgGradient } from "@ui/assets/Logo" @@ -110,7 +110,6 @@ export function ChatSidebar({ }, }, }), - maxSteps: 10, onFinish: async (result) => { if (result.message.role !== "assistant") return @@ -285,14 +284,20 @@ export function ChatSidebar({ useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { + const activeElement = document.activeElement as HTMLElement | null + const isInEditableContext = + activeElement?.tagName === "INPUT" || + activeElement?.tagName === "TEXTAREA" || + activeElement?.isContentEditable || + activeElement?.closest('[contenteditable="true"]') + if ( e.key.toLowerCase() === "t" && !e.metaKey && !e.ctrlKey && !e.altKey && isChatOpen && - document.activeElement?.tagName !== "INPUT" && - document.activeElement?.tagName !== "TEXTAREA" + !isInEditableContext ) { e.preventDefault() handleNewChat() diff --git a/apps/web/components/new/chat/input/chain-of-thought.tsx b/apps/web/components/new/chat/input/chain-of-thought.tsx index 0371a97e..b1923146 100644 --- a/apps/web/components/new/chat/input/chain-of-thought.tsx +++ b/apps/web/components/new/chat/input/chain-of-thought.tsx @@ -2,7 +2,7 @@ import { useAuth } from "@lib/auth-context" import { Avatar, AvatarFallback, AvatarImage } from "@ui/components/avatar" import type { UIMessage } from "@ai-sdk/react" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" interface MemoryResult { documentId?: string diff --git a/apps/web/components/new/chat/input/index.tsx b/apps/web/components/new/chat/input/index.tsx index 4294add5..40c1949d 100644 --- a/apps/web/components/new/chat/input/index.tsx +++ b/apps/web/components/new/chat/input/index.tsx @@ -3,7 +3,7 @@ import { ChevronUpIcon } from "lucide-react" import NovaOrb from "@/components/nova/nova-orb" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { useRef, useState } from "react" import { motion } from "motion/react" import { SendButton, StopButton } from "./actions" diff --git a/apps/web/components/new/chat/message/related-memories.tsx b/apps/web/components/new/chat/message/related-memories.tsx index f3b406db..ad83d03e 100644 --- a/apps/web/components/new/chat/message/related-memories.tsx +++ b/apps/web/components/new/chat/message/related-memories.tsx @@ -1,6 +1,6 @@ import { ChevronDownIcon, ChevronUpIcon } from "lucide-react" import type { UIMessage } from "@ai-sdk/react" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { cn } from "@lib/utils" interface MemoryResult { diff --git a/apps/web/components/new/chat/model-selector.tsx b/apps/web/components/new/chat/model-selector.tsx index 9cecafc2..c1952bea 100644 --- a/apps/web/components/new/chat/model-selector.tsx +++ b/apps/web/components/new/chat/model-selector.tsx @@ -3,7 +3,7 @@ import { useState } from "react" import { cn } from "@lib/utils" import { Button } from "@ui/components/button" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { ChevronDownIcon } from "lucide-react" import { models, type ModelId, modelNames } from "@/lib/models" diff --git a/apps/web/components/new/document-cards/file-preview.tsx b/apps/web/components/new/document-cards/file-preview.tsx index 6f72c0e3..93e53463 100644 --- a/apps/web/components/new/document-cards/file-preview.tsx +++ b/apps/web/components/new/document-cards/file-preview.tsx @@ -3,7 +3,7 @@ import { useState } from "react" import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api" import type { z } from "zod" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { cn } from "@lib/utils" import { PDF } from "@ui/assets/icons" import { FileText, Image, Video } from "lucide-react" diff --git a/apps/web/components/new/document-cards/google-docs-preview.tsx b/apps/web/components/new/document-cards/google-docs-preview.tsx index ee3e6c72..6c783c7d 100644 --- a/apps/web/components/new/document-cards/google-docs-preview.tsx +++ b/apps/web/components/new/document-cards/google-docs-preview.tsx @@ -2,7 +2,7 @@ import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api" import type { z } from "zod" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { cn } from "@lib/utils" type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema> diff --git a/apps/web/components/new/document-cards/mcp-preview.tsx b/apps/web/components/new/document-cards/mcp-preview.tsx index 55c98169..a8a792fb 100644 --- a/apps/web/components/new/document-cards/mcp-preview.tsx +++ b/apps/web/components/new/document-cards/mcp-preview.tsx @@ -2,7 +2,7 @@ import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api" import type { z } from "zod" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { cn } from "@lib/utils" import { ClaudeDesktopIcon, MCPIcon } from "@ui/assets/icons" @@ -13,11 +13,16 @@ export function McpPreview({ document }: { document: DocumentWithMemories }) { return ( <div className="bg-[#0B1017] p-3 rounded-[18px] space-y-2"> <div className="flex items-center justify-between gap-1"> - <p className={cn(dmSansClassName(), "text-[12px] font-semibold flex items-center gap-1")}> - <ClaudeDesktopIcon className="size-3" /> + <p + className={cn( + dmSansClassName(), + "text-[12px] font-semibold flex items-center gap-1", + )} + > + <ClaudeDesktopIcon className="size-3" /> Claude Desktop </p> - <MCPIcon className="size-6" /> + <MCPIcon className="size-6" /> </div> <div className="space-y-[6px]"> {document.title && ( diff --git a/apps/web/components/new/document-cards/note-preview.tsx b/apps/web/components/new/document-cards/note-preview.tsx index 288b6fa5..2becc237 100644 --- a/apps/web/components/new/document-cards/note-preview.tsx +++ b/apps/web/components/new/document-cards/note-preview.tsx @@ -2,12 +2,54 @@ import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api" import type { z } from "zod" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { cn } from "@lib/utils" +import { useMemo } from "react" type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema> type DocumentWithMemories = DocumentsResponse["documents"][0] +type TipTapNode = { + type: string + text?: string + content?: TipTapNode[] + attrs?: Record<string, unknown> +} + +function extractTextFromTipTapContent(content: string): string { + try { + const json = JSON.parse(content) as TipTapNode + return extractTextFromNode(json) + } catch { + return content + } +} + +function extractTextFromNode(node: TipTapNode): string { + if (node.type === "text" && node.text) { + return node.text + } + + if (!node.content) { + return "" + } + + const texts: string[] = [] + for (const child of node.content) { + const text = extractTextFromNode(child) + if (text) { + texts.push(text) + } + } + + const blockTypes = ["paragraph", "heading", "listItem", "blockquote", "codeBlock"] + if (blockTypes.includes(node.type)) { + return `${texts.join("")}\n` + } + + return texts.join("") +} + function NoteIcon() { return ( <svg @@ -79,6 +121,11 @@ function NoteIcon() { } export function NotePreview({ document }: { document: DocumentWithMemories }) { + const previewText = useMemo(() => { + if (!document.content) return "" + return extractTextFromTipTapContent(document.content).trim() + }, [document.content]) + return ( <div className="bg-[#0B1017] p-3 rounded-[18px] space-y-2"> <div className="flex items-center gap-1"> @@ -98,9 +145,9 @@ export function NotePreview({ document }: { document: DocumentWithMemories }) { {document.title} </p> )} - {document.content && ( + {previewText && ( <p className="text-[10px] text-[#737373] line-clamp-4"> - {document.content} + {previewText} </p> )} </div> diff --git a/apps/web/components/new/document-cards/tweet-preview.tsx b/apps/web/components/new/document-cards/tweet-preview.tsx index 7ba9b392..291bc18a 100644 --- a/apps/web/components/new/document-cards/tweet-preview.tsx +++ b/apps/web/components/new/document-cards/tweet-preview.tsx @@ -11,7 +11,7 @@ import { TweetSkeleton, } from "react-tweet" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" export function TweetPreview({ data, diff --git a/apps/web/components/new/document-cards/website-preview.tsx b/apps/web/components/new/document-cards/website-preview.tsx index d61b1ed6..ab3c5ad3 100644 --- a/apps/web/components/new/document-cards/website-preview.tsx +++ b/apps/web/components/new/document-cards/website-preview.tsx @@ -3,7 +3,7 @@ import { useState } from "react" import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api" import type { z } from "zod" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { cn } from "@lib/utils" type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema> diff --git a/apps/web/components/new/document-cards/youtube-preview.tsx b/apps/web/components/new/document-cards/youtube-preview.tsx index 101376f8..47c9cb5e 100644 --- a/apps/web/components/new/document-cards/youtube-preview.tsx +++ b/apps/web/components/new/document-cards/youtube-preview.tsx @@ -2,7 +2,7 @@ import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api" import type { z } from "zod" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { cn } from "@lib/utils" import { extractYouTubeVideoId } from "../utils" diff --git a/apps/web/components/new/document-modal/document-icon.tsx b/apps/web/components/new/document-modal/document-icon.tsx index f86228eb..cb279e49 100644 --- a/apps/web/components/new/document-modal/document-icon.tsx +++ b/apps/web/components/new/document-modal/document-icon.tsx @@ -80,7 +80,7 @@ const PDFIcon = ({ className }: { className: string }) => { width="8.25216" height="10.2522" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix" /> <feBlend @@ -158,7 +158,7 @@ const TextDocumentIcon = ({ className }: { className: string }) => { width="18.0253" height="13.8376" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix" /> <feBlend diff --git a/apps/web/components/new/document-modal/index.tsx b/apps/web/components/new/document-modal/index.tsx index 74d4e178..bd8ec05d 100644 --- a/apps/web/components/new/document-modal/index.tsx +++ b/apps/web/components/new/document-modal/index.tsx @@ -2,19 +2,24 @@ import { Dialog, DialogContent, DialogTitle } from "@repo/ui/components/dialog" import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api" -import { ArrowUpRightIcon, XIcon } from "lucide-react" +import { ArrowUpRightIcon, XIcon, Loader2 } from "lucide-react" import type { z } from "zod" import * as DialogPrimitive from "@radix-ui/react-dialog" import { cn } from "@lib/utils" import dynamic from "next/dynamic" import { Title } from "./title" import { Summary as DocumentSummary } from "./summary" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { GraphListMemories, type MemoryEntry } from "./graph-list-memories" import { YoutubeVideo } from "./content/yt-video" import { TweetContent } from "./content/tweet" -import { isTwitterUrl } from "@/utils/url-helpers" +import { isTwitterUrl } from "@/lib/url-helpers" import { NotionDoc } from "./content/notion-doc" +import { TextEditor } from "../text-editor" +import { useState, useEffect, useCallback, useMemo } from "react" +import { motion, AnimatePresence } from "motion/react" +import { Button } from "@repo/ui/components/button" +import { useDocumentMutations } from "@/hooks/use-document-mutations" // Dynamically importing to prevent DOMMatrix error const PdfViewer = dynamic( @@ -43,7 +48,49 @@ export function DocumentModal({ isOpen, onClose, }: DocumentModalProps) { - console.log(_document) + const { updateMutation } = useDocumentMutations() + + const { initialEditorContent, initialEditorString } = useMemo(() => { + const content = _document?.content as string | null | undefined + return { + initialEditorContent: content ?? undefined, + initialEditorString: content ?? "", + } + }, [_document?.content]) + + const [draftContentString, setDraftContentString] = + useState(initialEditorString) + const [editorResetNonce, setEditorResetNonce] = useState(0) + const [lastSavedContent, setLastSavedContent] = useState<string | null>(null) + + const resetEditor = useCallback(() => { + setDraftContentString(initialEditorString) + setEditorResetNonce((n) => n + 1) + setLastSavedContent(null) + }, [initialEditorString]) + + useEffect(() => { + setDraftContentString(initialEditorString) + setEditorResetNonce((n) => n + 1) + setLastSavedContent(null) + }, [initialEditorString]) + + useEffect(() => { + if (!isOpen) resetEditor() + }, [isOpen, resetEditor]) + + const hasUnsavedChanges = + draftContentString !== initialEditorString && + draftContentString !== lastSavedContent + + const handleSave = useCallback(() => { + if (!_document?.id) return + updateMutation.mutate( + { documentId: _document.id, content: draftContentString }, + { onSuccess: (_data, variables) => setLastSavedContent(variables.content) }, + ) + }, [_document?.id, draftContentString, updateMutation]) + return ( <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}> <DialogContent @@ -79,7 +126,7 @@ export function DocumentModal({ </a> )} <DialogPrimitive.Close - className="bg-[#0D121A] w-7 h-7 flex items-center justify-center focus:ring-ring rounded-full transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)]" + className="bg-[#0D121A] w-7 h-7 flex items-center justify-center focus:ring-ring rounded-full transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)]" data-slot="dialog-close" > <XIcon stroke="#737373" /> @@ -91,7 +138,7 @@ export function DocumentModal({ <div id="document-preview" className={cn( - "bg-[#14161A] rounded-[14px] overflow-hidden flex flex-col shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)]", + "bg-[#14161A] rounded-[14px] overflow-hidden flex flex-col shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)] relative", )} > {(_document?.type === "tweet" || @@ -104,9 +151,66 @@ export function DocumentModal({ /> )} {_document?.type === "text" && ( - <div className="p-4 overflow-y-auto flex-1"> - {_document.content} - </div> + <> + <div className="p-4 overflow-y-auto flex-1 scrollbar-thin"> + <TextEditor + key={`${_document.id}-${editorResetNonce}`} + content={initialEditorContent} + onContentChange={setDraftContentString} + onSubmit={handleSave} + /> + </div> + <AnimatePresence> + {hasUnsavedChanges && ( + <motion.div + initial={{ opacity: 0, y: 20 }} + animate={{ opacity: 1, y: 0 }} + exit={{ opacity: 0, y: 20 }} + transition={{ duration: 0.2 }} + className="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-3 px-4 py-2 bg-[#1B1F24] rounded-full shadow-[0_4px_20px_rgba(0,0,0,0.4),inset_1px_1px_1px_rgba(255,255,255,0.1)]" + > + <span className="text-sm text-[#737373]"> + Unsaved changes + </span> + <Button + variant="ghost" + size="sm" + onClick={resetEditor} + disabled={updateMutation.isPending} + className="text-[#737373]/80 hover:text-white rounded-full px-3" + > + Cancel + </Button> + <Button + variant="insideOut" + size="sm" + onClick={handleSave} + disabled={updateMutation.isPending} + className="hover:text-white rounded-full px-4" + > + {updateMutation.isPending ? ( + <> + <Loader2 className="size-4 animate-spin mr-1" /> + Saving... + </> + ) : ( + <> + Save + <span + className={cn( + "bg-[#21212180] border border-[#73737333] text-[#737373] rounded-sm px-1 py-0.5 text-[10px] flex items-center justify-center", + dmSansClassName(), + )} + > + ⌘+Enter + </span> + </> + )} + </Button> + </motion.div> + )} + </AnimatePresence> + </> )} {_document?.type === "pdf" && <PdfViewer url={_document.url} />} {_document?.type === "notion_doc" && ( diff --git a/apps/web/components/new/document-modal/title.tsx b/apps/web/components/new/document-modal/title.tsx index b8bdc8bb..066c437b 100644 --- a/apps/web/components/new/document-modal/title.tsx +++ b/apps/web/components/new/document-modal/title.tsx @@ -1,5 +1,5 @@ import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import type { DocumentTypeEnum } from "@repo/validation/schemas" import type { z } from "zod" import { getDocumentIcon } from "@/components/new/document-modal/document-icon" diff --git a/apps/web/components/new/header.tsx b/apps/web/components/new/header.tsx index a5aa47d3..3bb2d115 100644 --- a/apps/web/components/new/header.tsx +++ b/apps/web/components/new/header.tsx @@ -18,7 +18,7 @@ import { } from "lucide-react" import { Button } from "@ui/components/button" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { Tabs, TabsList, TabsTrigger } from "@ui/components/tabs" import { useProjectName } from "@/hooks/use-project-name" import { @@ -259,10 +259,12 @@ export function Header({ onAddMemory, onOpenMCP }: HeaderProps) { <Settings className="h-4 w-4" /> Settings </DropdownMenuItem> - <DropdownMenuItem onClick={() => { - authClient.signOut() - router.push("/login/new") - }}> + <DropdownMenuItem + onClick={() => { + authClient.signOut() + router.push("/login/new") + }} + > <LogOut className="h-4 w-4" /> Logout </DropdownMenuItem> diff --git a/apps/web/components/new/mcp-modal/index.tsx b/apps/web/components/new/mcp-modal/index.tsx index d555ae62..6816c21e 100644 --- a/apps/web/components/new/mcp-modal/index.tsx +++ b/apps/web/components/new/mcp-modal/index.tsx @@ -1,4 +1,4 @@ -import { dmSans125ClassName, dmSansClassName } from "@/utils/fonts" +import { dmSans125ClassName, dmSansClassName } from "@/lib/fonts" import { Dialog, DialogContent, DialogFooter } from "@repo/ui/components/dialog" import { cn } from "@lib/utils" import * as DialogPrimitive from "@radix-ui/react-dialog" diff --git a/apps/web/components/new/mcp-modal/mcp-detail-view.tsx b/apps/web/components/new/mcp-modal/mcp-detail-view.tsx index f1254bcb..5cc2fa68 100644 --- a/apps/web/components/new/mcp-modal/mcp-detail-view.tsx +++ b/apps/web/components/new/mcp-modal/mcp-detail-view.tsx @@ -14,7 +14,7 @@ import Image from "next/image" import { toast } from "sonner" import { analytics } from "@/lib/analytics" import { cn } from "@lib/utils" -import { dmMonoClassName, dmSansClassName } from "@/utils/fonts" +import { dmMonoClassName, dmSansClassName } from "@/lib/fonts" import { SyncLogoIcon } from "@ui/assets/icons" const clients = { @@ -78,7 +78,14 @@ export function MCPSteps({ variant = "full" }: MCPStepsProps) { > <div className="absolute left-4 top-0 w-px bg-[#1E293B] z-10" - style={{ height: activeStep === 3 ? isEmbedded ? "100%" : "calc(100% - 4rem)" : "100%" }} + style={{ + height: + activeStep === 3 + ? isEmbedded + ? "100%" + : "calc(100% - 4rem)" + : "100%", + }} /> <div className="flex items-start space-x-4 z-20"> <button diff --git a/apps/web/components/new/memories-grid.tsx b/apps/web/components/new/memories-grid.tsx index e5972d51..e6095645 100644 --- a/apps/web/components/new/memories-grid.tsx +++ b/apps/web/components/new/memories-grid.tsx @@ -6,11 +6,8 @@ import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api" import { useInfiniteQuery } from "@tanstack/react-query" import { useCallback, memo, useMemo, useState, useRef } from "react" import type { z } from "zod" -import { - Masonry, - useInfiniteLoader, -} from "masonic" -import { dmSansClassName } from "@/utils/fonts" +import { Masonry, useInfiniteLoader } from "masonic" +import { dmSansClassName } from "@/lib/fonts" import { SuperLoader } from "@/components/superloader" import { cn } from "@lib/utils" import { Button } from "@ui/components/button" @@ -151,9 +148,7 @@ export function MemoriesGrid({ isChatOpen }: { isChatOpen: boolean }) { } return ( - <div - className="h-full" - > + <div className="h-full"> <Button className={cn( dmSansClassName(), diff --git a/apps/web/app/new/onboarding/setup/chat-sidebar.tsx b/apps/web/components/new/onboarding/setup/chat-sidebar.tsx index d35ce73d..59742271 100644 --- a/apps/web/app/new/onboarding/setup/chat-sidebar.tsx +++ b/apps/web/components/new/onboarding/setup/chat-sidebar.tsx @@ -5,10 +5,11 @@ import { motion, AnimatePresence } from "motion/react" import NovaOrb from "@/components/nova/nova-orb" import { Button } from "@ui/components/button" import { PanelRightCloseIcon, SendIcon } from "lucide-react" -import { collectValidUrls } from "@/utils/url-helpers" +import { collectValidUrls } from "@/lib/url-helpers" import { $fetch } from "@lib/api" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" +import { useAuth } from "@lib/auth-context" interface ChatSidebarProps { formData: { @@ -20,6 +21,7 @@ interface ChatSidebarProps { } export function ChatSidebar({ formData }: ChatSidebarProps) { + const { user } = useAuth() const [message, setMessage] = useState("") const [isChatOpen, setIsChatOpen] = useState(true) const [messages, setMessages] = useState< @@ -127,9 +129,60 @@ export function ChatSidebar({ formData }: ChatSidebarProps) { useEffect(() => { if (!formData) return - const urls = collectValidUrls(formData.linkedin, formData.otherLinks) + const formDataMessages: typeof messages = [] + + if (formData.twitter) { + formDataMessages.push({ + message: formData.twitter, + url: formData.twitter, + title: "X/Twitter", + description: formData.twitter, + type: "formData" as const, + }) + } + + if (formData.linkedin) { + formDataMessages.push({ + message: formData.linkedin, + url: formData.linkedin, + title: "LinkedIn", + description: formData.linkedin, + type: "formData" as const, + }) + } + + if (formData.otherLinks.length > 0) { + formData.otherLinks.forEach((link) => { + formDataMessages.push({ + message: link, + url: link, + title: "Link", + description: link, + type: "formData" as const, + }) + }) + } + + if (formData.description?.trim()) { + formDataMessages.push({ + message: formData.description, + title: "Likes", + description: formData.description, + type: "formData" as const, + }) + } + + setMessages(formDataMessages) + + const hasContent = + formData.twitter || + formData.linkedin || + formData.otherLinks.length > 0 || + formData.description?.trim() - console.log("urls", urls) + if (!hasContent) return + + const urls = collectValidUrls(formData.linkedin, formData.otherLinks) const processContent = async () => { setIsLoading(true) @@ -137,17 +190,73 @@ export function ChatSidebar({ formData }: ChatSidebarProps) { try { const documentIds: string[] = [] - // Step 1: Fetch content from Exa if URLs exist + if (formData.description?.trim()) { + try { + const descDocResponse = await $fetch("@post/documents", { + body: { + content: formData.description, + containerTags: ["sm_project_default"], + metadata: { + sm_source: "consumer", + description_source: "user_input", + }, + }, + }) + + if (descDocResponse.data?.id) { + documentIds.push(descDocResponse.data.id) + } + } catch (error) { + console.warn("Error creating description document:", error) + } + } + + if (formData.twitter) { + try { + const researchResponse = await fetch("/api/onboarding/research", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + xUrl: formData.twitter, + name: user?.name, + email: user?.email, + }), + }) + + if (researchResponse.ok) { + const { text } = await researchResponse.json() + + if (text?.trim()) { + const xDocResponse = await $fetch("@post/documents", { + body: { + content: text, + containerTags: ["sm_project_default"], + metadata: { + sm_source: "consumer", + onboarding_source: "x_research", + x_url: formData.twitter, + }, + }, + }) + + if (xDocResponse.data?.id) { + documentIds.push(xDocResponse.data.id) + } + } + } + } catch (error) { + console.warn("Error fetching X research:", error) + } + } + if (urls.length > 0) { - const response = await fetch("/api/exa/fetch-content", { + const response = await fetch("/api/onboarding/extract-content", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ urls }), }) const { results } = await response.json() - console.log("results", results) - // Create documents from Exa results for (const result of results) { try { const docResponse = await $fetch("@post/documents", { @@ -171,95 +280,17 @@ export function ChatSidebar({ formData }: ChatSidebarProps) { } } - // Step 2: Create document from description if it exists - if (formData.description?.trim()) { - try { - const descDocResponse = await $fetch("@post/documents", { - body: { - content: formData.description, - containerTags: ["sm_project_default"], - metadata: { - sm_source: "consumer", - description_source: "user_input", - }, - }, - }) - - if (descDocResponse.data?.id) { - documentIds.push(descDocResponse.data.id) - } - } catch (error) { - console.warn("Error creating description document:", error) - } - } - - // Step 3: Poll for memories or show form data if (documentIds.length > 0) { await pollForMemories(documentIds) - } else { - // No documents created, show form data or waiting - const formDataMessages = [] - - if (formData.twitter) { - formDataMessages.push({ - message: `Twitter: ${formData.twitter}`, - url: formData.twitter, - title: "Twitter Profile", - description: `Twitter: ${formData.twitter}`, - type: "formData" as const, - }) - } - - if (formData.linkedin) { - formDataMessages.push({ - message: `LinkedIn: ${formData.linkedin}`, - url: formData.linkedin, - title: "LinkedIn Profile", - description: `LinkedIn: ${formData.linkedin}`, - type: "formData" as const, - }) - } - - if (formData.otherLinks.length > 0) { - formData.otherLinks.forEach((link) => { - formDataMessages.push({ - message: `Link: ${link}`, - url: link, - title: "Other Link", - description: `Link: ${link}`, - type: "formData" as const, - }) - }) - } - - const waitingMessage = { - message: "Waiting for your input", - url: "", - title: "", - description: "Waiting for your input", - type: "waiting" as const, - } - - setMessages([...formDataMessages, waitingMessage]) } } catch (error) { console.warn("Error processing content:", error) - - const waitingMessage = { - message: "Waiting for your input", - url: "", - title: "", - description: "Waiting for your input", - type: "waiting" as const, - } - - setMessages([waitingMessage]) } setIsLoading(false) } processContent() - }, [formData, pollForMemories]) + }, [formData, pollForMemories, user]) return ( <AnimatePresence mode="wait"> @@ -330,6 +361,39 @@ export function ChatSidebar({ formData }: ChatSidebarProps) { )} <div className="w-px flex-1 bg-[#293952]/40" /> </div> + {msg.type === "formData" && ( + <div className="bg-[#293952]/40 rounded-lg p-2 px-3 space-y-1 flex-1"> + {msg.title && ( + <h3 + className="text-sm font-medium" + style={{ + background: + "linear-gradient(90deg, #369BFD 0%, #36FDFD 30%, #36FDB5 100%)", + WebkitBackgroundClip: "text", + WebkitTextFillColor: "transparent", + backgroundClip: "text", + }} + > + {msg.title} + </h3> + )} + {msg.url && ( + <a + href={msg.url} + target="_blank" + rel="noopener noreferrer" + className="text-xs text-blue-400 hover:underline break-all block" + > + {msg.url} + </a> + )} + {msg.title === "Likes" && msg.description && ( + <p className="text-xs text-white/70 mt-1"> + {msg.description} + </p> + )} + </div> + )} {msg.type === "memory" && ( <div className="space-y-2 w-full max-h-60 overflow-y-auto scrollbar-thin"> {msg.memories?.map((memory) => ( @@ -383,7 +447,7 @@ export function ChatSidebar({ formData }: ChatSidebarProps) { {isLoading && ( <div className="flex items-center gap-2 text-foreground/50"> <NovaOrb size={28} className="blur-none!" /> - <span className="text-sm">Fetching your memories...</span> + <span className="text-sm">Extracting memories...</span> </div> )} </div> diff --git a/apps/web/app/new/onboarding/setup/header.tsx b/apps/web/components/new/onboarding/setup/header.tsx index 4981c6aa..4981c6aa 100644 --- a/apps/web/app/new/onboarding/setup/header.tsx +++ b/apps/web/components/new/onboarding/setup/header.tsx diff --git a/apps/web/app/new/onboarding/setup/integrations-step.tsx b/apps/web/components/new/onboarding/setup/integrations-step.tsx index ff1ce96f..49e3062a 100644 --- a/apps/web/app/new/onboarding/setup/integrations-step.tsx +++ b/apps/web/components/new/onboarding/setup/integrations-step.tsx @@ -3,10 +3,10 @@ import { useState } from "react" import { Button } from "@ui/components/button" import { MCPDetailView } from "@/components/new/mcp-modal/mcp-detail-view" -import { XBookmarksDetailView } from "@/components/x-bookmarks-detail-view" +import { XBookmarksDetailView } from "@/components/new/onboarding/x-bookmarks-detail-view" import { useRouter } from "next/navigation" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { useOnboardingStorage } from "@hooks/use-onboarding-storage" const integrationCards = [ @@ -164,7 +164,9 @@ export function IntegrationsStep() { <Button variant="link" className="text-white hover:text-gray-300 hover:no-underline cursor-pointer" - onClick={() => router.push("/new/onboarding?flow=setup&step=relatable")} + onClick={() => + router.push("/new/onboarding?flow=setup&step=relatable") + } > ← Back </Button> diff --git a/apps/web/app/new/onboarding/setup/relatable-question.tsx b/apps/web/components/new/onboarding/setup/relatable-question.tsx index c853985d..5fbe9bb4 100644 --- a/apps/web/app/new/onboarding/setup/relatable-question.tsx +++ b/apps/web/components/new/onboarding/setup/relatable-question.tsx @@ -5,7 +5,7 @@ import { motion, AnimatePresence } from "motion/react" import { Button } from "@ui/components/button" import { useRouter } from "next/navigation" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" const relatableOptions = [ { diff --git a/apps/web/app/new/onboarding/welcome/continue-step.tsx b/apps/web/components/new/onboarding/welcome/continue-step.tsx index eefab753..86b4593a 100644 --- a/apps/web/app/new/onboarding/welcome/continue-step.tsx +++ b/apps/web/components/new/onboarding/welcome/continue-step.tsx @@ -1,4 +1,4 @@ -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import { cn } from "@lib/utils" import { Button } from "@ui/components/button" import { motion } from "motion/react" diff --git a/apps/web/app/new/onboarding/welcome/features-step.tsx b/apps/web/components/new/onboarding/welcome/features-step.tsx index 6d15e2f8..2671efc1 100644 --- a/apps/web/app/new/onboarding/welcome/features-step.tsx +++ b/apps/web/components/new/onboarding/welcome/features-step.tsx @@ -2,7 +2,7 @@ import { motion } from "motion/react" import { Button } from "@ui/components/button" import { useRouter } from "next/navigation" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" export function FeaturesStep() { const router = useRouter() diff --git a/apps/web/app/new/onboarding/welcome/greeting-step.tsx b/apps/web/components/new/onboarding/welcome/greeting-step.tsx index 744e3719..744e3719 100644 --- a/apps/web/app/new/onboarding/welcome/greeting-step.tsx +++ b/apps/web/components/new/onboarding/welcome/greeting-step.tsx diff --git a/apps/web/app/new/onboarding/welcome/input-step.tsx b/apps/web/components/new/onboarding/welcome/input-step.tsx index 077d4944..077d4944 100644 --- a/apps/web/app/new/onboarding/welcome/input-step.tsx +++ b/apps/web/components/new/onboarding/welcome/input-step.tsx diff --git a/apps/web/app/new/onboarding/welcome/memories-step.tsx b/apps/web/components/new/onboarding/welcome/profile-step.tsx index 4230f510..65eb21c6 100644 --- a/apps/web/app/new/onboarding/welcome/memories-step.tsx +++ b/apps/web/components/new/onboarding/welcome/profile-step.tsx @@ -3,9 +3,15 @@ import { Button } from "@ui/components/button" import { useState } from "react" import { useRouter } from "next/navigation" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" +import { + parseXHandle, + parseLinkedInHandle, + toXProfileUrl, + toLinkedInProfileUrl, +} from "@/lib/url-helpers" -interface MemoriesStepProps { +interface ProfileStepProps { onSubmit: (data: { twitter: string linkedin: string @@ -19,7 +25,7 @@ type ValidationError = { linkedin: string | null } -export function MemoriesStep({ onSubmit }: MemoriesStepProps) { +export function ProfileStep({ onSubmit }: ProfileStepProps) { const router = useRouter() const [otherLinks, setOtherLinks] = useState([""]) const [twitterHandle, setTwitterHandle] = useState("") @@ -43,63 +49,43 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) { setOtherLinks(updated) } - const validateTwitterLink = (value: string): string | null => { - if (!value.trim()) return null + const validateTwitterHandle = (handle: string): string | null => { + if (!handle.trim()) return null - const normalized = value.trim().toLowerCase() - const isXDomain = - normalized.includes("x.com") || normalized.includes("twitter.com") - - if (!isXDomain) { - return "share your X profile link" - } - - // Check if it's a profile link (not a status/tweet link) - const profilePattern = - /^(https?:\/\/)?(www\.)?(x\.com|twitter\.com)\/[^\/]+$/ - const statusPattern = /\/status\//i - - if (statusPattern.test(normalized) || !profilePattern.test(normalized)) { - return "share your X profile link" + // Basic validation: handle should be alphanumeric, underscore, or hyphen + // X/Twitter handles can contain letters, numbers, and underscores, max 15 chars + const handlePattern = /^[a-zA-Z0-9_]{1,15}$/ + if (!handlePattern.test(handle.trim())) { + return "Enter your handle or profile link" } - // Note: 404 validation would require a backend API endpoint - // Format validation is handled above return null } - const validateLinkedInLink = (value: string): string | null => { - if (!value.trim()) return null - - const normalized = value.trim().toLowerCase() - const isLinkedInDomain = normalized.includes("linkedin.com") - - if (!isLinkedInDomain) { - return "share your Linkedin profile link" - } - - // Check if it's a profile link (should have /in/ or /pub/) - const profilePattern = - /^(https?:\/\/)?(www\.)?linkedin\.com\/(in|pub)\/[^\/]+/ + const validateLinkedInHandle = (handle: string): string | null => { + if (!handle.trim()) return null - if (!profilePattern.test(normalized)) { - return "share your Linkedin profile link" + // Basic validation: LinkedIn handles are typically alphanumeric with hyphens + // They can be quite long, so we'll be lenient + const handlePattern = /^[a-zA-Z0-9-]+$/ + if (!handlePattern.test(handle.trim())) { + return "Enter your handle or profile link" } - // Note: 404 validation would require a backend API endpoint - // Format validation is handled above return null } const handleTwitterChange = (value: string) => { - setTwitterHandle(value) - const error = validateTwitterLink(value) + const parsedHandle = parseXHandle(value) + setTwitterHandle(parsedHandle) + const error = validateTwitterHandle(parsedHandle) setErrors((prev) => ({ ...prev, twitter: error })) } const handleLinkedInChange = (value: string) => { - setLinkedinProfile(value) - const error = validateLinkedInLink(value) + const parsedHandle = parseLinkedInHandle(value) + setLinkedinProfile(parsedHandle) + const error = validateLinkedInHandle(parsedHandle) setErrors((prev) => ({ ...prev, linkedin: error })) } @@ -123,24 +109,33 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) { X/Twitter </label> <div className="relative flex items-center"> - <input - id="twitter-handle" - type="text" - placeholder="x.com/yourhandle" - value={twitterHandle} - onChange={(e) => handleTwitterChange(e.target.value)} - onBlur={() => { - if (twitterHandle.trim()) { - const error = validateTwitterLink(twitterHandle) - setErrors((prev) => ({ ...prev, twitter: error })) - } - }} - className={`w-full px-4 py-2 bg-[#070E1B] border rounded-xl text-white placeholder-onboarding focus:outline-none transition-colors h-[40px] ${ + <div + className={`flex items-center border rounded-xl overflow-hidden h-[40px] w-full ${ errors.twitter ? "border-[#52596633] bg-[#290F0A]" : "border-onboarding/20" }`} - /> + > + <div className="px-3 py-2 bg-[#070E1B] text-white/60 text-sm border-r border-onboarding/20 whitespace-nowrap"> + x.com/ + </div> + <input + id="twitter-handle" + type="text" + placeholder="handle" + value={twitterHandle} + onChange={(e) => handleTwitterChange(e.target.value)} + onBlur={() => { + if (twitterHandle.trim()) { + const error = validateTwitterHandle(twitterHandle) + setErrors((prev) => ({ ...prev, twitter: error })) + } + }} + className={`flex-1 px-4 py-2 bg-[#070E1B] text-white placeholder-onboarding focus:outline-none transition-colors ${ + errors.twitter ? "bg-[#290F0A]" : "" + }`} + /> + </div> {errors.twitter && ( <div className="absolute left-full ml-3"> <div @@ -165,24 +160,33 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) { LinkedIn </label> <div className="relative flex items-center"> - <input - id="linkedin-profile" - type="text" - placeholder="linkedin.com/in/yourname" - value={linkedinProfile} - onChange={(e) => handleLinkedInChange(e.target.value)} - onBlur={() => { - if (linkedinProfile.trim()) { - const error = validateLinkedInLink(linkedinProfile) - setErrors((prev) => ({ ...prev, linkedin: error })) - } - }} - className={`w-full px-4 py-2 bg-[#070E1B] border rounded-xl text-white placeholder-onboarding focus:outline-none transition-colors h-[40px] ${ + <div + className={`flex items-center border rounded-xl overflow-hidden h-[40px] w-full ${ errors.linkedin ? "border-[#52596633] bg-[#290F0A]" : "border-onboarding/20" }`} - /> + > + <div className="px-3 py-2 bg-[#070E1B] text-white/60 text-sm border-r border-onboarding/20 whitespace-nowrap w-[140px]"> + linkedin.com/in/ + </div> + <input + id="linkedin-profile" + type="text" + placeholder="username" + value={linkedinProfile} + onChange={(e) => handleLinkedInChange(e.target.value)} + onBlur={() => { + if (linkedinProfile.trim()) { + const error = validateLinkedInHandle(linkedinProfile) + setErrors((prev) => ({ ...prev, linkedin: error })) + } + }} + className={`flex-1 px-4 py-2 bg-[#070E1B] text-white placeholder-onboarding focus:outline-none transition-colors ${ + errors.linkedin ? "bg-[#290F0A]" : "" + }`} + /> + </div> {errors.linkedin && ( <div className="absolute left-full ml-3"> <div @@ -282,8 +286,8 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) { }} onClick={() => { const formData = { - twitter: twitterHandle, - linkedin: linkedinProfile, + twitter: toXProfileUrl(twitterHandle), + linkedin: toLinkedInProfileUrl(linkedinProfile), description: description, otherLinks: otherLinks.filter((l) => l.trim()), } diff --git a/apps/web/app/new/onboarding/welcome/welcome-step.tsx b/apps/web/components/new/onboarding/welcome/welcome-step.tsx index 5c0d998f..5c0d998f 100644 --- a/apps/web/app/new/onboarding/welcome/welcome-step.tsx +++ b/apps/web/components/new/onboarding/welcome/welcome-step.tsx diff --git a/apps/web/components/x-bookmarks-detail-view.tsx b/apps/web/components/new/onboarding/x-bookmarks-detail-view.tsx index 72befe96..acd4ebf8 100644 --- a/apps/web/components/x-bookmarks-detail-view.tsx +++ b/apps/web/components/new/onboarding/x-bookmarks-detail-view.tsx @@ -2,7 +2,7 @@ import { Button } from "@ui/components/button" import { cn } from "@lib/utils" -import { dmSansClassName } from "@/utils/fonts" +import { dmSansClassName } from "@/lib/fonts" import Image from "next/image" interface XBookmarksDetailViewProps { @@ -27,9 +27,7 @@ const steps = [ }, ] -export function XBookmarksDetailView({ - onBack, -}: XBookmarksDetailViewProps) { +export function XBookmarksDetailView({ onBack }: XBookmarksDetailViewProps) { const handleInstall = () => { window.open( "https://chromewebstore.google.com/detail/supermemory/afpgkkipfdpeaflnangednailhoegogi", diff --git a/apps/web/components/new/settings/account.tsx b/apps/web/components/new/settings/account.tsx index 10967947..3be01f9f 100644 --- a/apps/web/components/new/settings/account.tsx +++ b/apps/web/components/new/settings/account.tsx @@ -1,6 +1,6 @@ "use client" -import { dmSans125ClassName } from "@/utils/fonts" +import { dmSans125ClassName } from "@/lib/fonts" import { cn } from "@lib/utils" import { useAuth } from "@lib/auth-context" import { Avatar, AvatarFallback, AvatarImage } from "@ui/components/avatar" diff --git a/apps/web/components/new/settings/connections-mcp.tsx b/apps/web/components/new/settings/connections-mcp.tsx index 760dcf22..5a619f65 100644 --- a/apps/web/components/new/settings/connections-mcp.tsx +++ b/apps/web/components/new/settings/connections-mcp.tsx @@ -1,6 +1,6 @@ "use client" -import { dmSans125ClassName } from "@/utils/fonts" +import { dmSans125ClassName } from "@/lib/fonts" import { cn } from "@lib/utils" import { $fetch } from "@lib/api" import { fetchSubscriptionStatus } from "@lib/queries" diff --git a/apps/web/components/new/settings/integrations.tsx b/apps/web/components/new/settings/integrations.tsx index 0ce96bf7..deccf5e4 100644 --- a/apps/web/components/new/settings/integrations.tsx +++ b/apps/web/components/new/settings/integrations.tsx @@ -1,6 +1,6 @@ "use client" -import { dmSans125ClassName } from "@/utils/fonts" +import { dmSans125ClassName } from "@/lib/fonts" import { analytics } from "@/lib/analytics" import { cn } from "@lib/utils" import { authClient } from "@lib/auth" diff --git a/apps/web/components/new/settings/support.tsx b/apps/web/components/new/settings/support.tsx index 691f5c38..5868f356 100644 --- a/apps/web/components/new/settings/support.tsx +++ b/apps/web/components/new/settings/support.tsx @@ -1,6 +1,6 @@ "use client" -import { dmSans125ClassName } from "@/utils/fonts" +import { dmSans125ClassName } from "@/lib/fonts" import { cn } from "@lib/utils" import { ArrowUpRight } from "lucide-react" diff --git a/apps/web/components/new/text-editor/extensions.tsx b/apps/web/components/new/text-editor/extensions.tsx new file mode 100644 index 00000000..9db26c2b --- /dev/null +++ b/apps/web/components/new/text-editor/extensions.tsx @@ -0,0 +1,92 @@ +import StarterKit from "@tiptap/starter-kit" +import Placeholder from "@tiptap/extension-placeholder" +import Link from "@tiptap/extension-link" +import Image from "@tiptap/extension-image" +import TaskList from "@tiptap/extension-task-list" +import TaskItem from "@tiptap/extension-task-item" +import { cx } from "class-variance-authority" + +const placeholder = Placeholder.configure({ + placeholder: 'Write, paste anything or type "/" for commands...', +}) + +const taskList = TaskList.configure({ + HTMLAttributes: { + class: cx("not-prose pl-2"), + }, +}) + +const taskItem = TaskItem.configure({ + HTMLAttributes: { + class: cx("flex items-start my-4"), + }, + nested: true, +}) + +const link = Link.configure({ + HTMLAttributes: { + class: cx( + "text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer", + ), + }, + openOnClick: false, +}) + +const image = Image.configure({ + HTMLAttributes: { + class: cx("rounded-lg border border-muted"), + }, +}) + +const starterKit = StarterKit.configure({ + bulletList: { + HTMLAttributes: { + class: cx("list-disc list-outside leading-3 -mt-2"), + }, + }, + orderedList: { + HTMLAttributes: { + class: cx("list-decimal list-outside leading-3 -mt-2"), + }, + }, + listItem: { + HTMLAttributes: { + class: cx("leading-normal -mb-2"), + }, + }, + blockquote: { + HTMLAttributes: { + class: cx("border-l-4 border-primary"), + }, + }, + codeBlock: { + HTMLAttributes: { + class: cx("rounded-sm bg-muted border p-5 font-mono font-medium"), + }, + }, + code: { + HTMLAttributes: { + class: cx("rounded-md bg-muted px-1.5 py-1 font-mono font-medium"), + spellcheck: "false", + }, + }, + horizontalRule: { + HTMLAttributes: { + class: cx("mt-4 mb-6 border-t border-muted-foreground"), + }, + }, + dropcursor: { + color: "#DBEAFE", + width: 4, + }, + gapcursor: false, +}) + +export const defaultExtensions = [ + starterKit, + placeholder, + link, + image, + taskList, + taskItem, +] diff --git a/apps/web/components/new/text-editor/index.tsx b/apps/web/components/new/text-editor/index.tsx new file mode 100644 index 00000000..6446863d --- /dev/null +++ b/apps/web/components/new/text-editor/index.tsx @@ -0,0 +1,174 @@ +"use client" + +import { useEditor, EditorContent } from "@tiptap/react" +import { BubbleMenu } from "@tiptap/react/menus" +import type { Editor } from "@tiptap/core" +import { Markdown } from "@tiptap/markdown" +import { useRef, useEffect, useCallback } from "react" +import { defaultExtensions } from "./extensions" +import { slashCommand } from "./suggestions" +import { Bold, Italic, Code } from "lucide-react" +import { useDebouncedCallback } from "use-debounce" +import { cn } from "@lib/utils" + +const extensions = [...defaultExtensions, slashCommand, Markdown] + +export function TextEditor({ + content: initialContent, + onContentChange, + onSubmit, +}: { + content: string | undefined + onContentChange: (content: string) => void + onSubmit: () => void +}) { + const containerRef = useRef<HTMLDivElement>(null) + const editorRef = useRef<Editor | null>(null) + const onSubmitRef = useRef(onSubmit) + const hasUserEditedRef = useRef(false) + + useEffect(() => { + onSubmitRef.current = onSubmit + }, [onSubmit]) + + const debouncedUpdates = useDebouncedCallback((editor: Editor) => { + if (!hasUserEditedRef.current) return + const json = editor.getJSON() + const markdown = editor.storage.markdown?.manager?.serialize(json) ?? "" + onContentChange?.(markdown) + }, 500) + + const editor = useEditor({ + extensions, + content: initialContent, + contentType: "markdown", + immediatelyRender: true, + onCreate: ({ editor }) => { + editorRef.current = editor + }, + onUpdate: ({ editor }) => { + editorRef.current = editor + debouncedUpdates(editor) + }, + editorProps: { + handleKeyDown: (_view, event) => { + if ((event.metaKey || event.ctrlKey) && event.key === "Enter") { + event.preventDefault() + onSubmitRef.current?.() + return true + } + hasUserEditedRef.current = true + return false + }, + handleTextInput: () => { + hasUserEditedRef.current = true + return false + }, + handlePaste: () => { + hasUserEditedRef.current = true + return false + }, + handleDrop: () => { + hasUserEditedRef.current = true + return false + }, + }, + }) + + useEffect(() => { + if (editor && initialContent) { + hasUserEditedRef.current = false + editor.commands.setContent(initialContent, { contentType: "markdown" }) + } + }, [editor, initialContent]) + + const handleClick = useCallback( + (e: React.MouseEvent<HTMLDivElement>) => { + const target = e.target as HTMLElement + if (target.closest(".ProseMirror")) { + return + } + if (target.closest("button, a")) { + return + } + + const proseMirror = containerRef.current?.querySelector( + ".ProseMirror", + ) as HTMLElement + if (proseMirror && editorRef.current) { + setTimeout(() => { + proseMirror.focus() + editorRef.current?.commands.focus("end") + }, 0) + } + }, + [], + ) + + useEffect(() => { + return () => { + editor?.destroy() + } + }, [editor]) + + return ( + <> + {/* biome-ignore lint/a11y/useSemanticElements: div is needed as container for editor, cannot use button */} + {/* biome-ignore lint/a11y/useKeyWithClickEvents: we need to use a div to get the focus on the editor */} + <div + role="button" + tabIndex={0} + ref={containerRef} + onClick={handleClick} + className="w-full h-full outline-none prose prose-invert max-w-none [&_.ProseMirror]:outline-none [&_.ProseMirror]:focus:outline-none [&_.ProseMirror-focused]:outline-none text-editor-prose cursor-text" + > + <EditorContent editor={editor} /> + </div> + {editor && ( + <BubbleMenu + editor={editor} + options={{ placement: "bottom-start", offset: 8 }} + > + <div className="flex items-center gap-1 rounded-[8px] bg-[#1b1f24] p-2 shadow-[0px_4px_20px_0px_rgba(0,0,0,0.25),inset_1px_1px_1px_0px_rgba(255,255,255,0.1)]"> + <button + type="button" + onClick={() => + editor.chain().focus().toggleBold().run() + } + className={cn( + "flex items-center justify-center rounded-[4px] p-1.5 hover:bg-[#2e353d] cursor-pointer text-[#fafafa]", + editor.isActive("bold") && "bg-[#2e353d]", + )} + > + <Bold size={16} /> + </button> + <button + type="button" + onClick={() => + editor.chain().focus().toggleItalic().run() + } + className={cn( + "flex items-center justify-center rounded-[4px] p-1.5 hover:bg-[#2e353d] cursor-pointer text-[#fafafa]", + editor.isActive("italic") && "bg-[#2e353d]", + )} + > + <Italic size={16} /> + </button> + <button + type="button" + onClick={() => + editor.chain().focus().toggleCode().run() + } + className={cn( + "flex items-center justify-center rounded-[4px] p-1.5 hover:bg-[#2e353d] cursor-pointer text-[#fafafa]", + editor.isActive("code") && "bg-[#2e353d]", + )} + > + <Code size={16} /> + </button> + </div> + </BubbleMenu> + )} + </> + ) +} diff --git a/apps/web/components/new/text-editor/slash-command.tsx b/apps/web/components/new/text-editor/slash-command.tsx new file mode 100644 index 00000000..31991093 --- /dev/null +++ b/apps/web/components/new/text-editor/slash-command.tsx @@ -0,0 +1,308 @@ +"use client" + +import { Extension, type Editor, type Range } from "@tiptap/core" +import Suggestion, { type SuggestionOptions } from "@tiptap/suggestion" +import { useEffect, useLayoutEffect, useState, useRef } from "react" +import { createPortal } from "react-dom" +import { createRoot, type Root } from "react-dom/client" +import { + useFloating, + offset, + flip, + shift, + autoUpdate, +} from "@floating-ui/react" +import { cn } from "@lib/utils" + +export interface SuggestionItem { + title: string + description: string + searchTerms?: string[] + icon: React.ReactNode + command: (props: { editor: Editor; range: Range }) => void +} + +interface CommandListProps { + items: SuggestionItem[] + command: (item: SuggestionItem) => void + selectedIndex: number +} + +function CommandList({ items, command, selectedIndex }: CommandListProps) { + const containerRef = useRef<HTMLDivElement>(null) + + useEffect(() => { + const selectedElement = containerRef.current?.querySelector( + `[data-index="${selectedIndex}"]`, + ) + selectedElement?.scrollIntoView({ block: "nearest" }) + }, [selectedIndex]) + + if (items.length === 0) { + return ( + <div className="z-50 h-auto max-h-[330px] overflow-y-auto rounded-[8px] bg-[#1b1f24] p-2 shadow-[0px_4px_20px_0px_rgba(0,0,0,0.25),inset_1px_1px_1px_0px_rgba(255,255,255,0.1)]"> + <div className="px-2 text-muted-foreground">No results</div> + </div> + ) + } + + return ( + <div + ref={containerRef} + className="z-50 h-auto max-h-[330px] overflow-y-auto rounded-[8px] bg-[#1b1f24] p-2 shadow-[0px_4px_20px_0px_rgba(0,0,0,0.25),inset_1px_1px_1px_0px_rgba(255,255,255,0.1)]" + > + {items.map((item, index) => ( + <button + type="button" + key={item.title} + data-index={index} + onClick={() => command(item)} + className={cn( + "flex w-full items-center gap-2 rounded-[4px] px-3 py-2 text-left hover:bg-[#2e353d]", + index === selectedIndex && "bg-[#2e353d]", + )} + > + <div className="flex size-[20px] shrink-0 items-center justify-center text-[#fafafa]"> + {item.icon} + </div> + <p className="font-medium text-[16px] leading-[1.35] tracking-[-0.16px] text-[#fafafa]"> + {item.title} + </p> + </button> + ))} + </div> + ) +} + +interface CommandMenuProps { + items: SuggestionItem[] + command: (item: SuggestionItem) => void + clientRect: (() => DOMRect | null) | null + selectedIndex: number +} + +function CommandMenu({ + items, + command, + clientRect, + selectedIndex, +}: CommandMenuProps) { + const [mounted, setMounted] = useState(false) + + const { refs, floatingStyles } = useFloating({ + placement: "bottom-start", + middleware: [offset(8), flip(), shift()], + whileElementsMounted: autoUpdate, + }) + + useLayoutEffect(() => { + setMounted(true) + }, []) + + useEffect(() => { + const rect = clientRect?.() + if (rect) { + refs.setReference({ + getBoundingClientRect: () => rect, + }) + } + }, [clientRect, refs]) + + if (!mounted) return null + + return createPortal( + <div ref={refs.setFloating} style={floatingStyles} className="z-50"> + <CommandList + items={items} + command={command} + selectedIndex={selectedIndex} + /> + </div>, + document.body, + ) +} + +export function createSlashCommand(items: SuggestionItem[]) { + let component: { + updateProps: (props: CommandMenuProps) => void + destroy: () => void + element: HTMLElement + } | null = null + let root: Root | null = null + let selectedIndex = 0 + let currentItems: SuggestionItem[] = [] + + const renderMenu = (props: { + items: SuggestionItem[] + command: (item: SuggestionItem) => void + clientRect: (() => DOMRect | null) | null + }) => { + root?.render( + <CommandMenu + items={props.items} + command={props.command} + clientRect={props.clientRect} + selectedIndex={selectedIndex} + />, + ) + } + + const suggestion: Omit<SuggestionOptions<SuggestionItem>, "editor"> = { + char: "/", + items: ({ query }) => { + return items.filter( + (item) => + item.title.toLowerCase().includes(query.toLowerCase()) || + item.searchTerms?.some((term) => + term.toLowerCase().includes(query.toLowerCase()), + ), + ) + }, + command: ({ editor, range, props }) => { + props.command({ editor, range }) + }, + render: () => { + let currentCommand: ((item: SuggestionItem) => void) | null = null + let currentClientRect: (() => DOMRect | null) | null = null + + return { + onStart: (props) => { + selectedIndex = 0 + currentItems = props.items as SuggestionItem[] + currentCommand = props.command as ( + item: SuggestionItem, + ) => void + currentClientRect = props.clientRect ?? null + + const element = document.createElement("div") + document.body.appendChild(element) + + root = createRoot(element) + if (currentCommand) { + renderMenu({ + items: currentItems, + command: currentCommand, + clientRect: currentClientRect, + }) + } + + component = { + element, + updateProps: (newProps: CommandMenuProps) => { + root?.render( + <CommandMenu + items={newProps.items} + command={newProps.command} + clientRect={newProps.clientRect} + selectedIndex={newProps.selectedIndex} + />, + ) + }, + destroy: () => { + root?.unmount() + element.remove() + root = null + }, + } + }, + + onUpdate: (props) => { + currentItems = props.items as SuggestionItem[] + currentCommand = props.command as ( + item: SuggestionItem, + ) => void + currentClientRect = props.clientRect ?? null + + if (selectedIndex >= currentItems.length) { + selectedIndex = Math.max(0, currentItems.length - 1) + } + + if (currentCommand) { + component?.updateProps({ + items: currentItems, + command: currentCommand, + clientRect: currentClientRect, + selectedIndex, + }) + } + }, + + onKeyDown: (props) => { + const { event } = props + + if (event.key === "Escape") { + component?.destroy() + component = null + return true + } + + if (event.key === "ArrowUp") { + selectedIndex = + selectedIndex <= 0 + ? currentItems.length - 1 + : selectedIndex - 1 + if (currentCommand) { + component?.updateProps({ + items: currentItems, + command: currentCommand, + clientRect: currentClientRect, + selectedIndex, + }) + } + return true + } + + if (event.key === "ArrowDown") { + selectedIndex = + selectedIndex >= currentItems.length - 1 + ? 0 + : selectedIndex + 1 + if (currentCommand) { + component?.updateProps({ + items: currentItems, + command: currentCommand, + clientRect: currentClientRect, + selectedIndex, + }) + } + return true + } + + if (event.key === "Enter") { + const item = currentItems[selectedIndex] + if (item && currentCommand) { + currentCommand(item) + } + return true + } + + return false + }, + + onExit: () => { + component?.destroy() + component = null + }, + } + }, + } + + return Extension.create({ + name: "slashCommand", + + addOptions() { + return { + suggestion, + } + }, + + addProseMirrorPlugins() { + return [ + Suggestion({ + editor: this.editor, + ...this.options.suggestion, + }), + ] + }, + }) +} diff --git a/apps/web/components/new/text-editor/suggestions.tsx b/apps/web/components/new/text-editor/suggestions.tsx new file mode 100644 index 00000000..d31f7732 --- /dev/null +++ b/apps/web/components/new/text-editor/suggestions.tsx @@ -0,0 +1,103 @@ +import { + Heading1, + Heading2, + Heading3, + List, + ListOrdered, + TextQuote, + Text, +} from "lucide-react" +import { createSlashCommand, type SuggestionItem } from "./slash-command" + +export const suggestionItems: SuggestionItem[] = [ + { + title: "Heading 1", + description: "Big section heading.", + searchTerms: ["title", "big", "large"], + icon: <Heading1 size={20} />, + command: ({ editor, range }) => { + editor + .chain() + .focus() + .deleteRange(range) + .setNode("heading", { level: 1 }) + .run() + }, + }, + { + title: "Heading 2", + description: "Medium section heading.", + searchTerms: ["subtitle", "medium"], + icon: <Heading2 size={20} />, + command: ({ editor, range }) => { + editor + .chain() + .focus() + .deleteRange(range) + .setNode("heading", { level: 2 }) + .run() + }, + }, + { + title: "Heading 3", + description: "Small section heading.", + searchTerms: ["subtitle", "small"], + icon: <Heading3 size={20} />, + command: ({ editor, range }) => { + editor + .chain() + .focus() + .deleteRange(range) + .setNode("heading", { level: 3 }) + .run() + }, + }, + { + title: "Text", + description: "Just start typing with plain text.", + searchTerms: ["p", "paragraph"], + icon: <Text size={18} />, + command: ({ editor, range }) => { + editor + .chain() + .focus() + .deleteRange(range) + .toggleNode("paragraph", "paragraph") + .run() + }, + }, + { + title: "Bullet List", + description: "Create a simple bullet list.", + searchTerms: ["unordered", "point"], + icon: <List size={20} />, + command: ({ editor, range }) => { + editor.chain().focus().deleteRange(range).toggleBulletList().run() + }, + }, + { + title: "Numbered List", + description: "Create a list with numbering.", + searchTerms: ["ordered"], + icon: <ListOrdered size={20} />, + command: ({ editor, range }) => { + editor.chain().focus().deleteRange(range).toggleOrderedList().run() + }, + }, + { + title: "Block Quote", + description: "Capture a quote.", + searchTerms: ["blockquote"], + icon: <TextQuote size={20} />, + command: ({ editor, range }) => + editor + .chain() + .focus() + .deleteRange(range) + .toggleNode("paragraph", "paragraph") + .toggleBlockquote() + .run(), + }, +] + +export const slashCommand = createSlashCommand(suggestionItems) diff --git a/apps/web/globals.css b/apps/web/globals.css index 50f28e98..c9e5da27 100644 --- a/apps/web/globals.css +++ b/apps/web/globals.css @@ -88,3 +88,35 @@ inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.1); } + +/* Disable ProseMirror focus styles */ +.ProseMirror:focus, +.ProseMirror-focused, +.ProseMirror:focus-visible { + outline: none; + box-shadow: none; + border: none; +} + +/* Override prose paragraph margins for text editor */ +.text-editor-prose.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; +} + +/* Style placeholder for text editor */ +.text-editor-prose .ProseMirror p.is-editor-empty:first-child::before { + content: attr(data-placeholder); + float: left; + color: #525966; + pointer-events: none; + height: 0; +} + +.text-editor-prose .ProseMirror .is-empty::before { + content: attr(data-placeholder); + float: left; + color: #525966; + pointer-events: none; + height: 0; +} diff --git a/apps/web/hooks/use-document-mutations.ts b/apps/web/hooks/use-document-mutations.ts index 5abd7b56..f3931b5f 100644 --- a/apps/web/hooks/use-document-mutations.ts +++ b/apps/web/hooks/use-document-mutations.ts @@ -10,10 +10,10 @@ interface DocumentsQueryData { } interface UseDocumentMutationsOptions { - onClose: () => void + onClose?: () => void } -export function useDocumentMutations({ onClose }: UseDocumentMutationsOptions) { +export function useDocumentMutations({ onClose }: UseDocumentMutationsOptions = {}) { const queryClient = useQueryClient() const noteMutation = useMutation({ @@ -101,7 +101,7 @@ export function useDocumentMutations({ onClose }: UseDocumentMutationsOptions) { queryClient.invalidateQueries({ queryKey: ["documents-with-memories", variables.project], }) - onClose() + onClose?.() }, }) @@ -184,7 +184,7 @@ export function useDocumentMutations({ onClose }: UseDocumentMutationsOptions) { queryClient.invalidateQueries({ queryKey: ["documents-with-memories", variables.project], }) - onClose() + onClose?.() }, }) @@ -301,7 +301,43 @@ export function useDocumentMutations({ onClose }: UseDocumentMutationsOptions) { queryClient.invalidateQueries({ queryKey: ["documents-with-memories", variables.project], }) - onClose() + onClose?.() + }, + }) + + const updateMutation = useMutation({ + mutationFn: async ({ + documentId, + content, + }: { + documentId: string + content: string + }) => { + const response = await $fetch(`@patch/documents/${documentId}`, { + body: { + content, + metadata: { + sm_source: "consumer", + }, + }, + }) + + if (response.error) { + throw new Error(response.error?.message || "Failed to save document") + } + + return response.data + }, + onSuccess: () => { + toast.success("Document saved successfully!") + queryClient.invalidateQueries({ + queryKey: ["documents-with-memories"], + }) + }, + onError: (error) => { + toast.error("Failed to save document", { + description: error instanceof Error ? error.message : "Unknown error", + }) }, }) @@ -309,5 +345,6 @@ export function useDocumentMutations({ onClose }: UseDocumentMutationsOptions) { noteMutation, linkMutation, fileMutation, + updateMutation, } } diff --git a/apps/web/utils/fonts.ts b/apps/web/lib/fonts.ts index dd13c6b5..dd13c6b5 100644 --- a/apps/web/utils/fonts.ts +++ b/apps/web/lib/fonts.ts diff --git a/apps/web/lib/url-helpers.ts b/apps/web/lib/url-helpers.ts new file mode 100644 index 00000000..e4147a05 --- /dev/null +++ b/apps/web/lib/url-helpers.ts @@ -0,0 +1,190 @@ +/** + * Validates if a string is a valid URL. + */ +export const isValidUrl = (url: string): boolean => { + try { + new URL(url) + return true + } catch { + return false + } +} + +/** + * Normalizes a URL by adding https:// prefix if missing. + */ +export const normalizeUrl = (url: string): string => { + if (!url.trim()) return "" + if (url.startsWith("http://") || url.startsWith("https://")) { + return url + } + return `https://${url}` +} + +/** + * Checks if a URL is a Twitter/X URL. + */ +export const isTwitterUrl = (url: string): boolean => { + const normalizedUrl = url.toLowerCase() + return ( + normalizedUrl.includes("twitter.com") || normalizedUrl.includes("x.com") + ) +} + +/** + * Checks if a URL is a LinkedIn profile URL (not a company page). + */ +export const isLinkedInProfileUrl = (url: string): boolean => { + const normalizedUrl = url.toLowerCase() + return ( + normalizedUrl.includes("linkedin.com/in/") && + !normalizedUrl.includes("linkedin.com/company/") + ) +} + +/** + * Collects and validates URLs from LinkedIn profile and other links, excluding Twitter. + */ +export const collectValidUrls = ( + linkedinProfile: string, + otherLinks: string[], +): string[] => { + const urls: string[] = [] + + if (linkedinProfile.trim()) { + const normalizedLinkedIn = normalizeUrl(linkedinProfile.trim()) + if ( + isValidUrl(normalizedLinkedIn) && + isLinkedInProfileUrl(normalizedLinkedIn) + ) { + urls.push(normalizedLinkedIn) + } + } + + otherLinks + .filter((link) => link.trim()) + .forEach((link) => { + const normalizedLink = normalizeUrl(link.trim()) + if (isValidUrl(normalizedLink) && !isTwitterUrl(normalizedLink)) { + urls.push(normalizedLink) + } + }) + + return urls +} + +/** + * Extracts X/Twitter handle from various input formats (URLs, handles with @, etc.). + */ +export function parseXHandle(input: string): string { + if (!input.trim()) return "" + + let value = input.trim() + + if (value.startsWith("@")) { + value = value.slice(1) + } + + const lowerValue = value.toLowerCase() + if (lowerValue.includes("x.com") || lowerValue.includes("twitter.com")) { + try { + let url: URL + if (value.startsWith("http://") || value.startsWith("https://")) { + url = new URL(value) + } else { + url = new URL(`https://${value}`) + } + + const pathSegments = url.pathname.split("/").filter(Boolean) + if (pathSegments.length > 0) { + const firstSegment = pathSegments[0] + if (firstSegment && firstSegment !== "status" && firstSegment !== "i") { + return firstSegment + } + } + } catch { + const match = value.match(/(?:x\.com|twitter\.com)\/([^/\s?#]+)/i) + const handle = match?.[1] + if (handle && handle !== "status") { + return handle + } + } + } + + if ( + value.includes("/") && + !lowerValue.includes("x.com") && + !lowerValue.includes("twitter.com") + ) { + const parts = value.split("/").filter(Boolean) + const firstPart = parts[0] + if (firstPart) { + return firstPart + } + } + + return value +} + +/** + * Extracts LinkedIn handle from various input formats (URLs, handles with @, etc.). + */ +export function parseLinkedInHandle(input: string): string { + if (!input.trim()) return "" + + let value = input.trim() + + if (value.startsWith("@")) { + value = value.slice(1) + } + + const lowerValue = value.toLowerCase() + if (lowerValue.includes("linkedin.com")) { + try { + let url: URL + if (value.startsWith("http://") || value.startsWith("https://")) { + url = new URL(value) + } else { + url = new URL(`https://${value}`) + } + + const pathMatch = url.pathname.match(/\/(in|pub)\/([^/\s?#]+)/i) + const handle = pathMatch?.[2] + if (handle) { + return handle + } + } catch { + const match = value.match(/linkedin\.com\/(?:in|pub)\/([^/\s?#]+)/i) + const handle = match?.[1] + if (handle) { + return handle + } + } + } + + if (value.includes("/in/") || value.includes("/pub/")) { + const match = value.match(/\/(?:in|pub)\/([^/\s?#]+)/i) + const handle = match?.[1] + if (handle) { + return handle + } + } + + return value +} + +/** + * Converts X/Twitter handle to full profile URL. + */ +export function toXProfileUrl(handle: string): string { + if (!handle.trim()) return "" + return `https://x.com/${handle.trim()}` +} + +/** + * Converts LinkedIn handle to full profile URL. + */ +export function toLinkedInProfileUrl(handle: string): string { + if (!handle.trim()) return "" + return `https://linkedin.com/in/${handle.trim()}` +} diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts index 139923e8..17f8dc4c 100644 --- a/apps/web/next.config.ts +++ b/apps/web/next.config.ts @@ -2,6 +2,19 @@ import { withSentryConfig } from "@sentry/nextjs" import type { NextConfig } from "next" const nextConfig: NextConfig = { + transpilePackages: [ + "@tiptap/core", + "@tiptap/react", + "@tiptap/pm", + "@tiptap/starter-kit", + "@tiptap/extension-placeholder", + "@tiptap/extension-link", + "@tiptap/extension-image", + "@tiptap/extension-task-list", + "@tiptap/extension-task-item", + "@tiptap/suggestion", + "@tiptap/markdown", + ], experimental: { viewTransition: true, turbopackFileSystemCacheForDev: true, diff --git a/apps/web/package.json b/apps/web/package.json index eb744d8e..27ca7aa4 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -15,13 +15,15 @@ "postdeploy": "bun run sentry:sourcemaps" }, "dependencies": { - "@ai-sdk/google": "^2.0.0-beta.13", - "@ai-sdk/react": "2.0.0-beta.24", + "@ai-sdk/google": "^3.0.9", + "@ai-sdk/react": "^3.0.39", + "@ai-sdk/xai": "^3.0.23", "@better-fetch/fetch": "^1.1.18", "@dnd-kit/core": "^6.3.1", "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/sortable": "^10.0.0", "@dnd-kit/utilities": "^3.2.2", + "@floating-ui/react": "^0.27.0", "@opennextjs/cloudflare": "^1.12.0", "@radix-ui/react-accordion": "^1.2.11", "@radix-ui/react-alert-dialog": "^1.1.14", @@ -48,8 +50,19 @@ "@tanstack/react-query-devtools": "^5.84.2", "@tanstack/react-table": "^8.21.3", "@tanstack/react-virtual": "^3.13.12", + "@tiptap/core": "^3.15.3", + "@tiptap/extension-image": "^3.15.3", + "@tiptap/extension-link": "^3.15.3", + "@tiptap/extension-placeholder": "^3.15.3", + "@tiptap/extension-task-item": "^3.15.3", + "@tiptap/extension-task-list": "^3.15.3", + "@tiptap/markdown": "^3.15.3", + "@tiptap/pm": "^3.15.3", + "@tiptap/react": "^3.15.3", + "@tiptap/starter-kit": "^3.15.3", + "@tiptap/suggestion": "^3.15.3", "@types/dompurify": "^3.2.0", - "ai": "5.0.0-beta.24", + "ai": "^6.0.35", "autumn-js": "0.0.116", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", @@ -85,6 +98,7 @@ "streamdown": "^1.1.6", "tailwind-merge": "^3.3.1", "tw-animate-css": "^1.3.4", + "use-debounce": "^10.1.0", "vaul": "^1.1.2", "zustand": "^5.0.7" }, diff --git a/apps/web/utils/url-helpers.ts b/apps/web/utils/url-helpers.ts deleted file mode 100644 index 3a9ef5de..00000000 --- a/apps/web/utils/url-helpers.ts +++ /dev/null @@ -1,59 +0,0 @@ -export const isValidUrl = (url: string): boolean => { - try { - new URL(url) - return true - } catch { - return false - } -} - -export const normalizeUrl = (url: string): string => { - if (!url.trim()) return "" - if (url.startsWith("http://") || url.startsWith("https://")) { - return url - } - return `https://${url}` -} - -export const isTwitterUrl = (url: string): boolean => { - const normalizedUrl = url.toLowerCase() - return ( - normalizedUrl.includes("twitter.com") || normalizedUrl.includes("x.com") - ) -} - -export const isLinkedInProfileUrl = (url: string): boolean => { - const normalizedUrl = url.toLowerCase() - return ( - normalizedUrl.includes("linkedin.com/in/") && - !normalizedUrl.includes("linkedin.com/company/") - ) -} - -export const collectValidUrls = ( - linkedinProfile: string, - otherLinks: string[], -): string[] => { - const urls: string[] = [] - - if (linkedinProfile.trim()) { - const normalizedLinkedIn = normalizeUrl(linkedinProfile.trim()) - if ( - isValidUrl(normalizedLinkedIn) && - isLinkedInProfileUrl(normalizedLinkedIn) - ) { - urls.push(normalizedLinkedIn) - } - } - - otherLinks - .filter((link) => link.trim()) - .forEach((link) => { - const normalizedLink = normalizeUrl(link.trim()) - if (isValidUrl(normalizedLink) && !isTwitterUrl(normalizedLink)) { - urls.push(normalizedLink) - } - }) - - return urls -} |