Feature/ai

.cursor/rules/i18n.mdc

@@ -0,0 +1,17 @@
+---
+description: 
+globs: locales/**/*.json
+alwaysApply: false
+---
+
+i18n Coding Standards.
+
+1. Read and follow https://www.i18next.com/translation-function/formatting
+
+2. Use flat keys. Use `.` to separate. Do not use object form nesting.
+
+3. For languages sensitive to singular and plural, distinguish between them using the `_one` and `_other` forms.
+
+4. In the build stage, flattened dot-separated keys (such as 'exif.custom.rendered.custom') will be automatically converted to nested object objects, which may cause conflicts. For example, 'exif.custom.rendered.custom' may conflict with 'exif.custom.rendered'. Please avoid using such dot-separated flat keys.
+
+5. @locales is located at the root directory and needs to handle all existing languages at the same time.

.cursorignore

@@ -0,0 +1 @@
+# Add directories or file patterns to ignore during indexing (e.g. foo/ or *.csv)

.gitattributes

@@ -1 +1,2 @@
 * text=auto eol=lf
+*.splinecode filter=lfs diff=lfs merge=lfs -text

apps/desktop/layer/renderer/package.json

@@ -12,6 +12,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@ai-sdk/openai": "2.0.0-beta.5",
+    "@ai-sdk/react": "2.0.0-beta.11",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@electron-toolkit/preload": "3.0.2",
@@ -37,6 +39,7 @@
     "@radix-ui/react-slot": "1.2.3",
     "@sentry/react": "9.35.0",
     "@shikijs/transformers": "3.7.0",
+    "@splinetool/react-spline": "4.0.0",
     "@tanstack/query-sync-storage-persister": "5.81.5",
     "@tanstack/react-query": "5.81.5",
     "@tanstack/react-query-devtools": "5.81.5",
@@ -45,7 +48,9 @@
     "@use-gesture/react": "10.3.1",
     "@welldone-software/why-did-you-render": "10.0.1",
     "@yornaath/batshit": "0.10.1",
+    "ai": "5.0.0-beta.11",
     "camelcase-keys": "9.1.3",
+    "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
     "cookie-es": "2.0.0",
@@ -69,6 +74,7 @@
     "masonic": "4.1.0",
     "mdast-util-gfm-table": "2.0.0",
     "mdast-util-to-markdown": "2.1.2",
+    "mermaid": "11.7.0",
     "motion": "12.23.0",
     "nanoid": "5.1.5",
     "ofetch": "1.4.1",

apps/desktop/layer/renderer/src/@types/constants.ts

@@ -9,5 +9,5 @@ export const dayjsLocaleImportMap = {
   ["ja"]: ["ja", () => import("dayjs/locale/ja")],
   ["zh-TW"]: ["zh-tw", () => import("dayjs/locale/zh-tw")],
 }
-export const ns = ["common", "lang", "errors", "app", "settings", "shortcuts"] as const
+export const ns = ["common", "lang", "errors", "app", "settings", "shortcuts", "ai"] as const
 export const defaultNS = "app" as const

apps/desktop/layer/renderer/src/@types/default-resource.ts

@@ -1,4 +1,5 @@
 // DONT EDIT THIS FILE MANUALLY
+import ai_en from "@locales/ai/en.json"
 import en from "@locales/app/en.json"
 import common_en from "@locales/common/en.json"
 import common_ja from "@locales/common/ja.json"
@@ -29,6 +30,7 @@ export const defaultResources = {
     settings: settings_en,
     shortcuts: shortcuts_en,
     errors: errors_en,
+    ai: ai_en,
   },
   "zh-CN": {
     lang: lang_zhCN,

apps/desktop/layer/renderer/src/atoms/settings/ai.ts

@@ -0,0 +1,27 @@
+import { createSettingAtom } from "@follow/atoms/helper/setting.js"
+import { defaultAISettings } from "@follow/shared/settings/defaults"
+import type { AISettings } from "@follow/shared/settings/interface"
+import { jotaiStore } from "@follow/utils"
+import { atom, useAtomValue } from "jotai"
+
+export const createDefaultSettings = (): AISettings => defaultAISettings
+
+export const {
+  useSettingKey: useAISettingKey,
+  useSettingSelector: useAISettingSelector,
+  setSetting: setAISetting,
+  clearSettings: clearAISettings,
+  initializeDefaultSettings: initializeDefaultAISettings,
+  getSettings: getAISettings,
+  useSettingValue: useAISettingValue,
+  settingAtom: __aiSettingAtom,
+} = createSettingAtom("ai", createDefaultSettings)
+export const aiServerSyncWhiteListKeys = []
+// Local Setting for ai
+
+const aiChatPinnedAtom = atom<boolean>(false)
+export const useAIChatPinned = () => useAtomValue(aiChatPinnedAtom)
+export const setAIChatPinned = (pinned: boolean) => {
+  jotaiStore.set(aiChatPinnedAtom, pinned)
+}
+export const getAIChatPinned = () => jotaiStore.get(aiChatPinnedAtom)

apps/desktop/layer/renderer/src/components/common/AppErrorBoundary.tsx

@@ -5,6 +5,7 @@ import { createElement, Suspense, useCallback } from "react"
 
 import { getErrorFallback } from "../errors"
 import type { ErrorComponentType } from "../errors/enum"
+import PageErrorFallback from "../errors/PageError"
 
 export interface AppErrorBoundaryProps extends PropsWithChildren {
   height?: number | string
@@ -38,19 +39,15 @@ type ErrorFallbackProps = Parameters<FallbackRender>["0"]
 export type AppErrorFallbackProps = ErrorFallbackProps & {}
 const AppErrorBoundaryItem: FC<AppErrorBoundaryProps> = ({ errorType, children }) => {
   const fallbackRender = useCallback(
-    (fallbackProps: ErrorFallbackProps) => (
-      <Suspense>{createElement(getErrorFallback(errorType), fallbackProps)}</Suspense>
-    ),
+    (fallbackProps: ErrorFallbackProps) => {
+      const errorElement = getErrorFallback(errorType)
+      if (!errorElement) {
+        return <PageErrorFallback {...fallbackProps} />
+      }
+      return <Suspense>{createElement(getErrorFallback(errorType), fallbackProps)}</Suspense>
+    },
     [errorType],
   )
 
-  const onError = useCallback((error: unknown, componentStack?: string) => {
-    console.error("Uncaught error:", error, componentStack)
-  }, [])
-
-  return (
-    <ErrorBoundary fallback={fallbackRender} onError={onError}>
-      {children}
-    </ErrorBoundary>
-  )
+  return <ErrorBoundary fallback={fallbackRender}>{children}</ErrorBoundary>
 }

apps/desktop/layer/renderer/src/components/common/Focusable.tsx

@@ -24,4 +24,5 @@ export const FocusablePresets = {
   },
   isTimeline: (v) => v.has(HotkeyScope.Timeline) && !v.has(HotkeyScope.EntryRender),
   isEntryRender: (v) => v.has(HotkeyScope.EntryRender),
+  isAIChat: (v) => v.has(HotkeyScope.AIChat),
 } satisfies Record<string, (v: Set<string>) => boolean>

apps/desktop/layer/renderer/src/components/ui/button/GlassButton.tsx

@@ -0,0 +1,198 @@
+import { Spring } from "@follow/components/constants/spring.js"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from "@follow/components/ui/tooltip/index.js"
+import { cn } from "@follow/utils/utils"
+import { cva } from "class-variance-authority"
+import { m } from "motion/react"
+import type { FC, ReactNode } from "react"
+
+export interface GlassButtonProps {
+  description?: string
+  onClick: () => void
+  className?: string
+  children: ReactNode
+  /**
+   * Custom animation variants for hover and tap states
+   */
+  hoverScale?: number
+  tapScale?: number
+  /**
+   * Size variant
+   */
+  size?: "sm" | "md" | "lg"
+  /**
+   * Color theme
+   */
+  theme?: "light" | "dark" | "auto"
+  /**
+   * Visual variant
+   */
+  variant?: "glass" | "flat"
+}
+
+const glassButtonVariants = cva(
+  [
+    // Base styles - perfect 1:1 circle
+    "pointer-events-auto relative flex items-center justify-center rounded-full",
+    "transition-all duration-300 ease-out",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-8 text-sm",
+        md: "size-10 text-lg",
+        lg: "size-12 text-xl",
+      },
+      theme: {
+        light: ["text-gray-700 hover:text-gray-900"],
+        dark: ["text-white hover:text-white"],
+        auto: ["text-text hover:text-text-vibrant"],
+      },
+      variant: {
+        glass: ["backdrop-blur-md border shadow-lg"],
+        flat: ["border shadow-none"],
+      },
+    },
+    compoundVariants: [
+      // Glass variant themes
+      {
+        variant: "glass",
+        theme: "light",
+        className: [
+          "bg-material-thin hover:bg-material-medium",
+          "border-gray/30 hover:border-gray/40",
+          "shadow-gray/30",
+        ],
+      },
+      {
+        variant: "glass",
+        theme: "dark",
+        className: [
+          "bg-material-ultra-thin hover:bg-material-thin",
+          "border-gray/10 hover:border-gray/20",
+          "shadow-black/25",
+        ],
+      },
+      {
+        variant: "glass",
+        theme: "auto",
+        className: [
+          "bg-material-thin hover:bg-material-medium",
+          "border-gray/30 hover:border-gray/40",
+          "shadow-gray/30",
+        ],
+      },
+      // Flat variant themes
+      {
+        variant: "flat",
+        theme: "light",
+        className: ["bg-white/80 hover:bg-white/90", "border-gray/20 hover:border-gray/30"],
+      },
+      {
+        variant: "flat",
+        theme: "dark",
+        className: [
+          "bg-fill-secondary hover:bg-fill-tertiary",
+          "border-gray/20 hover:border-gray/30",
+        ],
+      },
+      {
+        variant: "flat",
+        theme: "auto",
+        className: [
+          "bg-white/80 hover:bg-white/90 dark:bg-fill-secondary dark:hover:bg-fill-tertiary",
+          "border-gray/20 hover:border-gray/30",
+        ],
+      },
+    ],
+    defaultVariants: {
+      size: "md",
+      theme: "auto",
+      variant: "glass",
+    },
+  },
+)
+
+const glassOverlayVariants = cva(
+  "absolute inset-0 rounded-full bg-gradient-to-t opacity-0 transition-opacity duration-300 hover:opacity-100",
+  {
+    variants: {
+      theme: {
+        light: "from-material-opaque/10 to-material-opaque/30",
+        dark: "from-material-opaque/5 to-material-opaque/20",
+        auto: "from-material-opaque/10 to-material-opaque/30",
+      },
+    },
+    defaultVariants: {
+      theme: "auto",
+    },
+  },
+)
+
+const glassInnerShadowVariants = cva("absolute inset-0 rounded-full shadow-inner", {
+  variants: {
+    theme: {
+      light: "shadow-gray/20",
+      dark: "shadow-black/10",
+      auto: "shadow-gray/20 dark:shadow-black/10",
+    },
+  },
+  defaultVariants: {
+    theme: "auto",
+  },
+})
+
+export const GlassButton: FC<GlassButtonProps> = ({
+  description,
+  onClick,
+  className,
+  children,
+  hoverScale = 1.1,
+  tapScale = 0.95,
+  size = "md",
+  theme = "auto",
+  variant = "glass",
+}) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <m.button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation()
+            onClick()
+          }}
+          className={cn(glassButtonVariants({ size, theme, variant }), className)}
+          initial={{ scale: 1 }}
+          whileHover={
+            variant === "flat"
+              ? undefined
+              : {
+                  scale: hoverScale,
+                }
+          }
+          whileTap={{ scale: tapScale }}
+          transition={Spring.presets.snappy}
+        >
+          {/* Glass effect overlay - only for glass variant */}
+          {variant === "glass" && <div className={glassOverlayVariants({ theme })} />}
+
+          {/* Icon container */}
+          <div className="center relative z-10 flex">{children}</div>
+
+          {/* Subtle inner shadow for depth - only for glass variant */}
+          {variant === "glass" && <div className={glassInnerShadowVariants({ theme })} />}
+        </m.button>
+      </TooltipTrigger>
+      {description && (
+        <TooltipPortal>
+          <TooltipContent>{description}</TooltipContent>
+        </TooltipPortal>
+      )}
+    </Tooltip>
+  )
+}