@mazees/mark 5.0.0

package/src/renderer/src/pages/Configuration.jsx

@@ -0,0 +1,360 @@
+import { useState, useEffect } from 'react'
+import { getAllConfig, saveConfiguration } from '../api/db'
+import { getExtractor } from '../api/vectorMemory'
+import { driver } from 'driver.js'
+import 'driver.js/dist/driver.css'
+import { useConfirm } from '../hooks/useConfirm'
+import { useChat } from '../contexts/ChatContext'
+import {
+  AiEngineSection,
+  CameraSection,
+  ShortcutSection,
+  VoiceSection,
+  PermissionsSection
+} from '../components/config'
+
+const Configuration = ({ isFirstSetup = false, onSetupComplete = null }) => {
+  const [config, setConfig] = useState({
+    personality: 'Santai layaknya seorang teman dan suka bercanda.',
+    model: 'local-model',
+    customModel: 'default-model',
+    temperature: 0,
+    ttsRate: 10,
+    ttsPitch: 55,
+    aiProvider: 'gemini-web',
+    geminiWebModel: 'gemini-3.6-flash',
+    deepseekWebModel: 'deepseek-chat',
+    deepseekUserToken: '',
+    wakeWordEnabled: true,
+    customWakeWords: '',
+    speechLanguage: 'id-ID',
+    tgBotToken: '',
+    tgAdminIds: '',
+    awarenessEnabled: true,
+    cameraDeviceId: 'default',
+    cameraEnabled: true,
+    bgOverlayOpacity: 65
+  })
+  const [videoDevices, setVideoDevices] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [isDownloadingModel, setIsDownloadingModel] = useState(false)
+  const [downloadProgress, setDownloadProgress] = useState(0)
+  const { ModalComponent } = useConfirm()
+  const chatContext = useChat()
+
+  useEffect(() => {
+    let isMounted = true
+    const init = async () => {
+      try {
+        setLoading(true)
+        await loadConfig()
+      } catch (err) {
+        console.error('Error loading config:', err)
+      } finally {
+        if (isMounted) setLoading(false)
+      }
+    }
+    init()
+
+    navigator.mediaDevices
+      .getUserMedia({ video: true })
+      .then((stream) => {
+        navigator.mediaDevices
+          .enumerateDevices()
+          .then((devices) => {
+            const cameras = devices.filter((d) => d.kind === 'videoinput')
+            if (isMounted) setVideoDevices(cameras)
+          })
+          .catch((err) => console.error('Error enumerating devices', err))
+
+        // Stop stream immediately since we just needed permission
+        stream.getTracks().forEach((track) => track.stop())
+      })
+      .catch((err) => console.error('Cam permission denied', err))
+
+    return () => {
+      isMounted = false
+    }
+  }, [])
+
+  useEffect(() => {
+    if (isFirstSetup) {
+      setTimeout(() => {
+        const driverObj = driver({
+          showProgress: true,
+          animate: true,
+          nextBtnText: 'Lanjut',
+          prevBtnText: 'Kembali',
+          doneBtnText: 'Paham!',
+          steps: [
+            {
+              popover: {
+                title: 'Halo, Selamat Datang di Mark! 👋',
+                description:
+                  'Mark adalah asisten AI pribadimu. Sebelum mulai ngobrol, ayo kita kenalan dulu sama pengaturan utamanya biar Mark bisa kerja maksimal buat kamu!',
+                side: 'top',
+                align: 'center'
+              }
+            },
+            {
+              element: '#tour-ai-provider',
+              popover: {
+                title: '1. Pilih Mesin AI',
+                description:
+                  'Kamu bisa milih mau pakai Gemini Gratis tanpa API Key, AI lokal (LM Studio), atau Custom API OpenAI-Compatible.',
+                side: 'bottom',
+                align: 'start'
+              }
+            },
+            {
+              element: '#tour-embed-provider',
+              popover: {
+                title: '2. Memori AI',
+                description:
+                  'Ini otak tempat Mark mengingat semuanya. Berjalan 100% lokal dengan vector embeddings tanpa setup tambahan.',
+                side: 'top',
+                align: 'start'
+              }
+            },
+            {
+              element: '#tour-wakeword',
+              popover: {
+                title: '3. Wake Word & Voice',
+                description:
+                  'Mark mendukung deteksi suara "Hey Mark / Mark" otomatis via Web Speech API bawaan Microsoft Edge / Chrome.',
+                side: 'top',
+                align: 'start'
+              }
+            },
+            {
+              element: '#tour-persona',
+              popover: {
+                title: '4. Kepribadian Mark',
+                description:
+                  'Di sini kamu bebas nentuin gaya bicara Mark. Mau dia formal kayak asisten pro, atau santai kayak temen nongkrong? Tulis aja di sini!',
+                side: 'top',
+                align: 'start'
+              }
+            },
+            {
+              element: '#tour-temperature',
+              popover: {
+                title: '5. Kreativitas AI',
+                description:
+                  'Temperature nentuin seberapa kreatif Mark. Angka kecil (0-0.3) bikin dia kaku tapi akurat, angka besar (0.7-1.0) bikin dia imajinatif dan luwes.',
+                side: 'top',
+                align: 'start'
+              }
+            },
+            {
+              element: '#tour-tts',
+              popover: {
+                title: '6. Pengaturan Suara',
+                description:
+                  'Atur kecepatan (Rate) dan tinggi-rendahnya nada suara (Pitch) Mark. Kamu bisa klik "Test Suara Mark" buat dengerin hasil racikanmu!',
+                side: 'top',
+                align: 'start'
+              }
+            },
+            {
+              element: '#tour-save-btn',
+              popover: {
+                title: 'Simpan & Mulai',
+                description:
+                  'Kalau udah diisi semua (termasuk API key kalau pakai Cloud), klik di sini buat mulai ngobrol sama Mark!',
+                side: 'top',
+                align: 'center'
+              }
+            }
+          ]
+        })
+        driverObj.drive()
+      }, 500)
+    }
+  }, [isFirstSetup])
+
+  const loadConfig = async () => {
+    const data = await getAllConfig()
+    if (data.length > 0) {
+      setConfig((prev) => ({
+        ...prev,
+        ...data[0],
+        aiProvider: data[0].aiProvider || 'gemini-web',
+        geminiWebModel: data[0].geminiWebModel || 'gemini-3.6-flash',
+        deepseekWebModel: data[0].deepseekWebModel || 'deepseek-chat',
+        deepseekUserToken: data[0].deepseekUserToken || '',
+        micDeviceId: data[0].micDeviceId || 'default',
+        awarenessEnabled: data[0].awarenessEnabled ?? true,
+        bgOverlayOpacity:
+          data[0].bgOverlayOpacity !== undefined ? Number(data[0].bgOverlayOpacity) : 65
+      }))
+    }
+  }
+
+  const handleSaveConfiguration = async () => {
+    if (config.aiProvider === 'custom') {
+      const endpoint = config.customEndpoint?.trim() || ''
+      if (!endpoint.endsWith('/chat/completions')) {
+        alert(
+          'Gagal Menyimpan: Custom Endpoint URL tidak valid! URL wajib diakhiri dengan /chat/completions (Contoh: https://api.openai.com/v1/chat/completions).'
+        )
+        return
+      }
+    }
+
+    setIsDownloadingModel(true)
+    setDownloadProgress(0)
+
+    try {
+      let extStats = {}
+      await getExtractor((info) => {
+        if (info.status === 'initiate') {
+          extStats[info.file] = { loaded: 0, total: info.total || 0 }
+        } else if (info.status === 'progress') {
+          if (extStats[info.file]) {
+            extStats[info.file].loaded = info.loaded
+            extStats[info.file].total = info.total
+          }
+          const values = Object.values(extStats)
+          const totalBytes = values.reduce((acc, curr) => acc + curr.total, 0)
+          const loadedBytes = values.reduce((acc, curr) => acc + curr.loaded, 0)
+          if (totalBytes > 0) {
+            setDownloadProgress(Math.round((loadedBytes / totalBytes) * 100))
+          }
+        } else if (info.status === 'done' || info.status === 'ready') {
+          setDownloadProgress(100)
+        }
+      })
+    } catch (e) {
+      console.error(e)
+    }
+    setIsDownloadingModel(false)
+    await saveConfiguration(config)
+
+    // Update global state without reloading the page
+    if (chatContext && chatContext.setConfig) {
+      chatContext.setConfig([config])
+    }
+
+    if (isFirstSetup && onSetupComplete) {
+      onSetupComplete()
+    } else {
+      window.location.href = '#/'
+    }
+  }
+
+  const handleBack = () => window.history.back()
+
+  return (
+    <div className="h-screen text-white overflow-hidden relative font-['Poppins',sans-serif] bg-base-300 rounded-xl border border-white/5 shadow-2xl">
+      {/* Background Ambience */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,oklch(var(--n))_0%,transparent_70%)] opacity-20 pointer-events-none" />
+      <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-10 pointer-events-none" />
+
+      {/* Main Content Area */}
+      <div className="relative z-10 w-full h-full overflow-y-auto custom-scrollbar">
+        <div className="max-w-2xl mx-auto px-4 py-8 pb-32 space-y-8">
+          {/* Page Header */}
+          <div className="flex items-center gap-4">
+            {!isFirstSetup && (
+              <button
+                type="button"
+                onClick={handleBack}
+                className="btn btn-ghost btn-sm btn-circle shrink-0"
+                style={{ WebkitAppRegion: 'no-drag' }}
+                title="Kembali"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1.2em"
+                  height="1.2em"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+                </svg>
+              </button>
+            )}
+            <div>
+              <h1 className="text-2xl font-bold">
+                {isFirstSetup ? 'Selamat Datang di Mark!' : 'Pengaturan Mark'}
+              </h1>
+              <p className="opacity-50 text-sm mt-1">
+                {isFirstSetup
+                  ? 'Sebelum mulai ngobrol, atur provider AI dan pengaturan dasar lainnya di bawah ini.'
+                  : 'Sesuaikan perilaku Mark dengan preferensimu.'}
+              </p>
+            </div>
+          </div>
+
+          {loading ? (
+            <div className="flex-1 min-h-[50vh] flex flex-col items-center justify-center gap-3">
+              <span className="loading loading-spinner loading-lg text-primary" />
+              <p className="font-mono text-xs text-base-content/50 tracking-widest uppercase">
+                Memuat Pengaturan Mark...
+              </p>
+            </div>
+          ) : (
+            <>
+              {/* 1. AI Engine & Tools */}
+              <AiEngineSection config={config} setConfig={setConfig} />
+
+              <div className="divider"></div>
+
+              {/* 2. Camera Settings */}
+              <CameraSection config={config} setConfig={setConfig} videoDevices={videoDevices} />
+
+              {/* 3. Global Shortcut Settings */}
+              <ShortcutSection config={config} setConfig={setConfig} />
+
+              <div className="divider"></div>
+
+              {/* 4. Voice & Wake Word Settings */}
+              <VoiceSection config={config} setConfig={setConfig} />
+
+              <div className="divider"></div>
+
+              {/* 6. Security & Whitelist Permissions */}
+              <PermissionsSection />
+
+              {/* 7. Save Bar */}
+              <div className="flex flex-col items-end pt-2">
+                {isDownloadingModel && (
+                  <div className="w-full max-w-xs mb-4">
+                    <div className="flex justify-between text-xs mb-1">
+                      <span>Mengunduh Model Embeddings...</span>
+                      <span>{downloadProgress}%</span>
+                    </div>
+                    <progress
+                      className="progress progress-primary w-full"
+                      value={downloadProgress}
+                      max="100"
+                    ></progress>
+                  </div>
+                )}
+                <button
+                  id="tour-save-btn"
+                  onClick={handleSaveConfiguration}
+                  disabled={isDownloadingModel}
+                  className="btn btn-primary px-8 cursor-pointer"
+                >
+                  {isDownloadingModel
+                    ? 'Menyimpan...'
+                    : isFirstSetup
+                      ? 'Simpan & Mulai Gunakan Mark'
+                      : 'Simpan Pengaturan'}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+
+        <ModalComponent />
+      </div>
+    </div>
+  )
+}
+
+export default Configuration

package/src/renderer/src/pages/GoogleWorkspace.jsx

@@ -0,0 +1,293 @@
+import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { FaGoogle, FaKey, FaSave, FaCheckCircle, FaExclamationTriangle } from 'react-icons/fa'
+import { getAllConfig, saveConfiguration } from '../api/db'
+import { webApi } from '../api/web-bridge'
+
+const GoogleWorkspace = () => {
+  const navigate = useNavigate()
+  const [config, setConfig] = useState({})
+  const [isLoading, setIsLoading] = useState(true)
+  const [isSaving, setIsSaving] = useState(false)
+  const [toastMessage, setToastMessage] = useState(null)
+  const [isConnected, setIsConnected] = useState(false)
+  const [isConnecting, setIsConnecting] = useState(false)
+
+  useEffect(() => {
+    loadConfig()
+    checkConnectionStatus()
+  }, [])
+
+  const checkConnectionStatus = async () => {
+    const res = await webApi.googleStatus()
+    setIsConnected(Boolean(res?.isConnected))
+  }
+
+  const handleConnect = async () => {
+    if (!config.googleClientId || !config.googleClientSecret) {
+      showToast('Client ID & Secret harus diisi dan disimpan dulu!')
+      return
+    }
+    setIsConnecting(true)
+    try {
+      const res = await webApi.googleConnect(config.googleClientId, config.googleClientSecret)
+      if (res.success) {
+        showToast('Berhasil terhubung ke Google Workspace!')
+        setIsConnected(true)
+      } else {
+        showToast(`Gagal: ${res.error}`)
+      }
+    } catch (e) {
+      showToast('Gagal memproses login.')
+    } finally {
+      setIsConnecting(false)
+    }
+  }
+
+  const handleDisconnect = async () => {
+    try {
+      await webApi.googleDisconnect()
+      setIsConnected(false)
+      showToast('Terputus dari Google Workspace.')
+    } catch (e) {
+      showToast('Gagal memutuskan koneksi.')
+    }
+  }
+
+  const loadConfig = async () => {
+    try {
+      const data = await getAllConfig()
+      if (data && data.length > 0) {
+        setConfig(data[0])
+      }
+    } catch (error) {
+      console.error('Failed to load config:', error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleSave = async () => {
+    setIsSaving(true)
+    try {
+      await saveConfiguration(config)
+      await webApi.syncConfig(config)
+      showToast('Kredensial Google Workspace berhasil disimpan!')
+    } catch (error) {
+      console.error('Failed to save config:', error)
+      showToast('Gagal menyimpan kredensial.')
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const showToast = (msg) => {
+    setToastMessage(msg)
+    setTimeout(() => setToastMessage(null), 3000)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-base-300 text-base-content flex items-center justify-center">
+        <span className="loading loading-spinner text-primary w-12 h-12"></span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-screen bg-base-300 text-base-content overflow-hidden relative font-['Poppins',sans-serif]">
+      {/* Background Ambience */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,oklch(var(--n))_0%,transparent_70%)] opacity-20 pointer-events-none" />
+      <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-10 pointer-events-none" />
+
+      {/* Main Content Area */}
+      <div className="relative z-10 w-full h-full overflow-y-auto custom-scrollbar">
+        <div className="max-w-4xl mx-auto px-4 py-8 pb-32 space-y-8">
+          {/* Page Header */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <button
+                type="button"
+                onClick={() => navigate('/')}
+                className="btn btn-ghost btn-sm btn-circle shrink-0"
+                style={{ WebkitAppRegion: 'no-drag' }}
+                title="Kembali"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1.2em"
+                  height="1.2em"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+                </svg>
+              </button>
+              <div>
+                <h1 className="text-2xl font-bold">Google Workspace</h1>
+                <p className="opacity-50 text-sm mt-1">
+                  Integrasi Drive, Calendar, dan Gmail ke Mark AI.
+                </p>
+              </div>
+            </div>
+          </div>
+          {/* Info Card */}
+          <div className="card bg-base-100 border border-info/30 shadow-xl shadow-info/10">
+            <div className="card-body">
+              <h2 className="card-title text-info mb-2 flex items-center gap-2">
+                <FaExclamationTriangle /> Panduan Singkat
+              </h2>
+              <p className="text-sm opacity-80 mb-4">
+                Untuk menghubungkan Mark dengan Google Workspace milikmu, kamu harus membuat{' '}
+                <strong>OAuth Client ID</strong> bertipe Desktop App di Google Cloud Console.
+              </p>
+              <ol className="list-decimal list-inside text-sm space-y-2 opacity-80 bg-base-200 p-4 rounded-xl font-mono">
+                <li>
+                  Buka{' '}
+                  <a
+                    href="https://console.cloud.google.com/"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-primary hover:underline"
+                  >
+                    console.cloud.google.com
+                  </a>
+                </li>
+                <li>
+                  Buat Project Baru & Aktifkan: <strong>Drive API, Gmail API, Calendar API</strong>
+                </li>
+                <li>
+                  Buat <strong>OAuth Consent Screen</strong> (External, masukkan emailmu di Test
+                  Users)
+                </li>
+                <li>
+                  Buat Credentials baru: <strong>OAuth client ID</strong> &gt;{' '}
+                  <strong>Desktop App</strong>
+                </li>
+                <li>Copy Client ID & Client Secret ke form di bawah ini.</li>
+              </ol>
+            </div>
+          </div>
+
+          {/* Form Card */}
+          <div className="card bg-base-100 border border-white/5 shadow-2xl">
+            <div className="card-body space-y-6">
+              <h2 className="card-title text-xl border-b border-white/10 pb-4 flex items-center gap-2">
+                <FaKey className="text-warning" /> API Credentials
+              </h2>
+
+              <div className="form-control w-full">
+                <label className="label">
+                  <span className="label-text font-bold text-sm">Google Client ID</span>
+                </label>
+                <input
+                  type="text"
+                  placeholder="Misal: 123456789-abcdefghijkl.apps.googleusercontent.com"
+                  className="input input-bordered w-full font-mono text-sm focus:border-primary"
+                  value={config.googleClientId || ''}
+                  onChange={(e) => setConfig({ ...config, googleClientId: e.target.value })}
+                />
+              </div>
+
+              <div className="form-control w-full">
+                <label className="label">
+                  <span className="label-text font-bold text-sm">Google Client Secret</span>
+                </label>
+                <input
+                  type="password"
+                  placeholder="GOCSPX-xxxxxxxxxxxxxxxxxxxxxxxx"
+                  className="input input-bordered w-full font-mono text-sm focus:border-primary"
+                  value={config.googleClientSecret || ''}
+                  onChange={(e) => setConfig({ ...config, googleClientSecret: e.target.value })}
+                />
+              </div>
+
+              <div className="bg-warning/10 border border-warning/30 rounded-xl p-4 mt-4 flex gap-3 items-start">
+                <FaExclamationTriangle className="text-warning mt-1 shrink-0" />
+                <div>
+                  <h3 className="font-bold text-warning text-sm">Peringatan Keamanan</h3>
+                  <p className="text-xs opacity-70 mt-1">
+                    Kredensial ini disimpan secara lokal dan aman di databasemu. Jangan pernah
+                    membagikan Client Secret ke orang lain. Mark hanya akan menggunakan kredensial
+                    ini untuk meminta akses ke akun Google-mu secara resmi.
+                  </p>
+                </div>
+              </div>
+
+              {/* Connection Status & Buttons */}
+              <div className="border-t border-white/10 pt-6 mt-2 flex flex-col gap-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="font-bold text-sm">Status Koneksi</h3>
+                    <p className="text-xs opacity-70">
+                      {isConnected
+                        ? 'Mark terhubung dan memiliki akses ke Google Workspace.'
+                        : 'Mark belum diberikan akses masuk ke Google Workspace.'}
+                    </p>
+                  </div>
+                  <div
+                    className={`px-3 py-1 rounded-full text-xs font-bold ${isConnected ? 'bg-success/20 text-success' : 'bg-base-300 text-white/50'}`}
+                  >
+                    {isConnected ? 'TERHUBUNG' : 'TERPUTUS'}
+                  </div>
+                </div>
+
+                {isConnected ? (
+                  <button onClick={handleDisconnect} className="btn btn-error btn-outline w-full">
+                    Putuskan Koneksi Google
+                  </button>
+                ) : (
+                  <button
+                    onClick={handleConnect}
+                    disabled={isConnecting || !config.googleClientId || !config.googleClientSecret}
+                    className="btn btn-info w-full"
+                  >
+                    {isConnecting ? (
+                      <span className="loading loading-spinner"></span>
+                    ) : (
+                      <FaGoogle />
+                    )}
+                    Login & Beri Akses
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Sticky Save Button */}
+        <div className="fixed bottom-0 left-0 w-full bg-base-300/80 backdrop-blur border-t border-white/10 p-4 z-50">
+          <div className="max-w-5xl mx-auto flex justify-end">
+            <button
+              onClick={handleSave}
+              disabled={isSaving || !config.googleClientId || !config.googleClientSecret}
+              className="btn btn-primary min-w-[200px]"
+            >
+              {isSaving ? (
+                <span className="loading loading-spinner"></span>
+              ) : (
+                <>
+                  <FaSave /> Simpan Kredensial
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Toast Notification */}
+        {toastMessage && (
+          <div className="toast toast-top toast-center z-[100]">
+            <div className="alert alert-success shadow-lg">
+              <FaCheckCircle className="text-xl" />
+              <span>{toastMessage}</span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default GoogleWorkspace