diff --git a/desktop/Cargo.lock b/desktop/Cargo.lock index 9ba905a211c..026cbe04c21 100644 --- a/desktop/Cargo.lock +++ b/desktop/Cargo.lock @@ -5673,7 +5673,7 @@ dependencies = [ [[package]] name = "openbb-platform" -version = "0.8.2" +version = "0.9.0" dependencies = [ "cc", "chrono", diff --git a/desktop/src-tauri/Cargo.toml b/desktop/src-tauri/Cargo.toml index 682ab12fd21..cb91ff4fc9e 100644 --- a/desktop/src-tauri/Cargo.toml +++ b/desktop/src-tauri/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "openbb-platform" -version = "0.8.2" +version = "0.9.0" description = "Open Data Platform - by OpenBB - Desktop Application for managing virtual environments, application backend servers." authors = ["OpenBB, Inc."] license = "AGPL-3.0" diff --git a/desktop/src-tauri/tauri.conf.json b/desktop/src-tauri/tauri.conf.json index da1341f0cbe..bac574e0374 100644 --- a/desktop/src-tauri/tauri.conf.json +++ b/desktop/src-tauri/tauri.conf.json @@ -1,7 +1,7 @@ { "$schema": "https://schema.tauri.app/config/2", "productName": "Open Data Platform", - "version": "0.8.2", + "version": "0.9.0", "identifier": "co.openbb.platform", "build": { "frontendDist": "../dist", @@ -49,7 +49,7 @@ "icons/icon.icns", "icons/icon.ico" ], - "category": "Finance", + "category": "DeveloperTool", "publisher": "OpenBB, Inc.", "copyright": "Copyright © 2025 OpenBB, Inc.", "license": "AGPLv3", diff --git a/desktop/src/components/Toast.tsx b/desktop/src/components/Toast.tsx new file mode 100644 index 00000000000..340d154d33f --- /dev/null +++ b/desktop/src/components/Toast.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import { Button } from "@openbb/ui-pro"; +import CustomIcon from "../components/Icon"; + +interface ToastProps { + title: string; + children: React.ReactNode; + onClose: () => void; + buttonText?: string; + onButtonClick?: () => void; +} + + +const Toast: React.FC = ({ + title, + children, + onClose, + buttonText, + onButtonClick, +}) => { + return ( +
+
+
+
+ +
{title}
+
+ +
+
{children}
+ {buttonText && onButtonClick && ( +
+ +
+ )} +
+
+ ); +}; + +export default Toast; diff --git a/desktop/src/routes/backends.tsx b/desktop/src/routes/backends.tsx index 57e83177652..b819aff3d2c 100644 --- a/desktop/src/routes/backends.tsx +++ b/desktop/src/routes/backends.tsx @@ -15,6 +15,7 @@ import Select, { components } from 'react-select'; import { CopyIcon, DocumentationIcon, FileIcon, FolderIcon, HelpIcon, SettingsIcon } from "../components/Icon"; import CustomIcon from "~/components/Icon"; +import Toast from "../components/Toast"; // ============== TYPES ============== @@ -2171,6 +2172,13 @@ function loadEnvironmentsFromCache(): Environment[] { export default function BackendsPage() { const isMounted = useRef(true); + const [showToast, setShowToast] = useState(false); + const [toastContent, setToastContent] = useState<{ + title: string; + content: React.ReactNode; + buttonText: string; + }>({ title: "", content: <>, buttonText: "" }); + // Core state const [backends, setBackends] = useState([]); const [selectedBackend, setSelectedBackend] = useState(null); @@ -2221,7 +2229,56 @@ export default function BackendsPage() { !localStorage.getItem("platform-api-run-once") ) { localStorage.setItem("platform-api-run-once", "true"); - openUrl(finalUrl).catch(console.error); + setToastContent({ + title: "Connect Backend with OpenBB Workspace", + content: ( +
    +
  1. Sign in to your OpenBB Workspace account.
    2. +
  2. Go to the "Apps" tab in the top menu.
    3. +
  3. Click on "Connect backend".
    4. +
  4. + Fill in the connection form with the following details: +
      +
    • Name: OpenBB Platform
      • +
    • URL: {finalUrl}
      • +
    +
    5. +
  5. Click "Test".
    6. +
  6. Click "Add" to finalize the integration.
    7. +
+ ), + buttonText: "Check Documentation", + }); + setShowToast(true); + } + if ( + backend.name === "OpenBB MCP" && + !localStorage.getItem("platform-mcp-run-once") + ) { + localStorage.setItem("platform-mcp-run-once", "true"); + setToastContent({ + title: "Connect MCP with OpenBB Workspace", + content: ( +
    +
  1. Sign in to your OpenBB Workspace account.
    2. +
  2. Go to the Chat on the right side.
    3. +
  3. Click on "MCP Tools" button above the chat input.
    4. +
  4. Click on "+" in the top-right to open the configuration panel.
    5. +
  5. Click on "Add Server".
    6. +
  6. + Fill in the connection form with the following details: +
      +
    • Name: OpenBB MCP
      • +
    • URL: {finalUrl}
      • +
    +
    7. +
  7. Check the box "Local Server".
    8. +
  8. Click "Add" to finalize the integration.
    9. +
+ ), + buttonText: "Check Documentation", + }); + setShowToast(true); } } return prevBackends.map((b) => @@ -2493,6 +2550,24 @@ export default function BackendsPage() { return (
+ {showToast && ( +
+ setShowToast(false)} + buttonText={toastContent.buttonText} + onButtonClick={() => { + const url = toastContent.title.includes("MCP") + ? "https://docs.openbb.co/python/quickstart/mcp" + : "https://docs.openbb.co/python/quickstart/workspace"; + openUrl(url).catch(console.error); + setShowToast(false); + }} + > + {toastContent.content} + +
+ )} {isCreating || isEditing ? ( // Form View
diff --git a/desktop/src/styles.css b/desktop/src/styles.css index 457e7b10eaf..70b005d7471 100644 --- a/desktop/src/styles.css +++ b/desktop/src/styles.css @@ -45,8 +45,10 @@ --bg-secondary: #f7f7f9; --bg-tertiary: #efeff2; --bg-accent: rgb(0, 136, 204, 0.3); + --bg-toast: rgba(212, 229, 252, 1); --text-primary: #151518; + --text-primary-inverse: #ffffff; --text-secondary: #2c2c32; --text-tertiary: #6f6d80; --text-muted: rgba(21, 21, 24, 0.35); @@ -73,6 +75,7 @@ --info-icon: rgba(138, 138, 144, 1); --tab-border-active: #007acc; --tag-bg: rgba(90, 89, 97, 0.3); + --info-icon: rgba(138, 138, 144, 1); } .dark { @@ -82,6 +85,7 @@ --bg-quartary: rgba(36, 36, 42, 1); --bg-accent: rgb(0, 136, 204, 0.3); --text-primary: #ffffff; + --text-primary-inverse: #151518; --text-secondary: #EBEBED; --text-tertiary: #9793b0; --text-muted: rgba(138, 138, 144, 1); @@ -107,6 +111,7 @@ --tag-bg: rgba(90, 89, 97, 0.3); --dropdown-bg: rgba(36, 36, 42, 1); --info-icon: rgba(138, 138, 144, 1); + --bg-toast: rgba(212, 229, 252, 1); } .info-icon { @@ -119,6 +124,48 @@ background-color: var(--tag-bg); } +.bg-theme-toast { + background-color: var(--bg-toast); +} + +.button-toast, +.button-toast:focus, +.button-toast:focus-visible, +.dark .button-toast, +.dark .button-toast:focus, +.dark .button-toast:focus-visible { + background-color: rgb(0, 136, 204, 1); + color: #ffffff; + padding: 8px; + border-radius: 0.375rem; + +} + +.button-toast:hover, +.dark .button-toast:hover { + background-color: rgb(0, 136, 204, 0.85); + color: #ffffff; +} + +.toast-container, .dark .toast-container { + background-color: var(--bg-toast); + border-radius: 0.5rem; + color: var(--text-primary-inverse); + padding-top: 10px; + padding-bottom: 20px; + padding-left: 20px; + padding-right: 0; + font-weight: medium; + box-shadow: 0 10px 12px rgba(0, 0, 0, 0.3); +} + +.toast-info-icon { + color: var(--button-neutral-bg); + width: 25px; + height: 25px; + font-weight: bold; +} + /* UTILITY CLASSES */ .text-theme-accent { color: var(--text-accent);