Skip to content

Commit acc2026

Browse files
deeleeramonedeeleeramone
committed
add toast message for first API run
1 parent a58faac commit acc2026

File tree

6 files changed

+182
-5
lines changed

6 files changed

+182
-5
lines changed

‎desktop/Cargo.lock‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎desktop/src-tauri/Cargo.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[package]
22
name = "openbb-platform"
3-
version = "0.8.2"
3+
version = "0.9.0"
44
description = "Open Data Platform - by OpenBB - Desktop Application for managing virtual environments, application backend servers."
55
authors = ["OpenBB, Inc."]
66
license = "AGPL-3.0"

‎desktop/src-tauri/tauri.conf.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"$schema": "https://schema.tauri.app/config/2",
33
"productName": "Open Data Platform",
4-
"version": "0.8.2",
4+
"version": "0.9.0",
55
"identifier": "co.openbb.platform",
66
"build": {
77
"frontendDist": "../dist",
@@ -49,7 +49,7 @@
4949
"icons/icon.icns",
5050
"icons/icon.ico"
5151
],
52-
"category": "Finance",
52+
"category": "DeveloperTool",
5353
"publisher": "OpenBB, Inc.",
5454
"copyright": "Copyright © 2025 OpenBB, Inc.",
5555
"license": "AGPLv3",

‎desktop/src/components/Toast.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from "react";
2+
import { Button } from "@openbb/ui-pro";
3+
import CustomIcon from "../components/Icon";
4+
5+
interface ToastProps {
6+
title: string;
7+
children: React.ReactNode;
8+
onClose: () => void;
9+
buttonText?: string;
10+
onButtonClick?: () => void;
11+
}
12+
13+
14+
const Toast: React.FC<ToastProps> = ({
15+
title,
16+
children,
17+
onClose,
18+
buttonText,
19+
onButtonClick,
20+
}) => {
21+
return (
22+
<div className="toast-container">
23+
<div className="flex-col">
24+
<div className="flex flex-1 items-center justify-between">
25+
<div className="flex flex1 gap-2 items-start">
26+
<CustomIcon id="info" className="toast-info-icon w-5 h-5"/>
27+
<div className="body-sm-bold">{title}</div>
28+
</div>
29+
<Button
30+
type="button"
31+
variant="icon"
32+
onClick={onClose}
33+
>
34+
<span className="items-end body-lg-bold">x</span>
35+
</Button>
36+
</div>
37+
<div className="flex-1 mt-2 body-sm-medium justify-left mr-5 pr-10">{children}</div>
38+
{buttonText && onButtonClick && (
39+
<div className="mt-5 mr-5 flex justify-end">
40+
<Button
41+
type="button"
42+
className="button-toast"
43+
onClick={onButtonClick}
44+
size="xs"
45+
>
46+
{buttonText}
47+
</Button>
48+
</div>
49+
)}
50+
</div>
51+
</div>
52+
);
53+
};
54+
55+
export default Toast;

‎desktop/src/routes/backends.tsx‎

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import Select, { components } from 'react-select';
1515
import { CopyIcon, DocumentationIcon, FileIcon, FolderIcon, HelpIcon, SettingsIcon } from "../components/Icon";
1616

1717
import CustomIcon from "~/components/Icon";
18+
import Toast from "../components/Toast";
1819

1920
// ============== TYPES ==============
2021

@@ -2171,6 +2172,13 @@ function loadEnvironmentsFromCache(): Environment[] {
21712172
export default function BackendsPage() {
21722173
const isMounted = useRef(true);
21732174

2175+
const [showToast, setShowToast] = useState(false);
2176+
const [toastContent, setToastContent] = useState<{
2177+
title: string;
2178+
content: React.ReactNode;
2179+
buttonText: string;
2180+
}>({ title: "", content: <></>, buttonText: "" });
2181+
21742182
// Core state
21752183
const [backends, setBackends] = useState<BackendService[]>([]);
21762184
const [selectedBackend, setSelectedBackend] = useState<string | null>(null);
@@ -2221,7 +2229,56 @@ export default function BackendsPage() {
22212229
!localStorage.getItem("platform-api-run-once")
22222230
) {
22232231
localStorage.setItem("platform-api-run-once", "true");
2224-
openUrl(finalUrl).catch(console.error);
2232+
setToastContent({
2233+
title: "Connect Backend with OpenBB Workspace",
2234+
content: (
2235+
<ol className="list-decimal list-inside">
2236+
<li>Sign in to your OpenBB Workspace account.</li>
2237+
<li>Go to the "Apps" tab in the top menu.</li>
2238+
<li>Click on "Connect backend".</li>
2239+
<li>
2240+
Fill in the connection form with the following details:
2241+
<ul className="list-disc list-inside ml-4">
2242+
<li>Name: OpenBB Platform</li>
2243+
<li>URL: {finalUrl}</li>
2244+
</ul>
2245+
</li>
2246+
<li>Click "Test".</li>
2247+
<li>Click "Add" to finalize the integration.</li>
2248+
</ol>
2249+
),
2250+
buttonText: "Check Documentation",
2251+
});
2252+
setShowToast(true);
2253+
}
2254+
if (
2255+
backend.name === "OpenBB MCP" &&
2256+
!localStorage.getItem("platform-mcp-run-once")
2257+
) {
2258+
localStorage.setItem("platform-mcp-run-once", "true");
2259+
setToastContent({
2260+
title: "Connect MCP with OpenBB Workspace",
2261+
content: (
2262+
<ol className="list-decimal list-inside">
2263+
<li>Sign in to your OpenBB Workspace account.</li>
2264+
<li>Go to the Chat on the right side.</li>
2265+
<li>Click on "MCP Tools" button above the chat input.</li>
2266+
<li>Click on "+" in the top-right to open the configuration panel.</li>
2267+
<li>Click on "Add Server".</li>
2268+
<li>
2269+
Fill in the connection form with the following details:
2270+
<ul className="list-disc list-inside ml-4">
2271+
<li>Name: OpenBB MCP</li>
2272+
<li>URL: {finalUrl}</li>
2273+
</ul>
2274+
</li>
2275+
<li>Check the box "Local Server".</li>
2276+
<li>Click "Add" to finalize the integration.</li>
2277+
</ol>
2278+
),
2279+
buttonText: "Check Documentation",
2280+
});
2281+
setShowToast(true);
22252282
}
22262283
}
22272284
return prevBackends.map((b) =>
@@ -2493,6 +2550,24 @@ export default function BackendsPage() {
24932550

24942551
return (
24952552
<div className="w-full h-full">
2553+
{showToast && (
2554+
<div className="fixed top-3 right-3 z-50">
2555+
<Toast
2556+
title={toastContent.title}
2557+
onClose={() => setShowToast(false)}
2558+
buttonText={toastContent.buttonText}
2559+
onButtonClick={() => {
2560+
const url = toastContent.title.includes("MCP")
2561+
? "https://docs.openbb.co/python/quickstart/mcp"
2562+
: "https://docs.openbb.co/python/quickstart/workspace";
2563+
openUrl(url).catch(console.error);
2564+
setShowToast(false);
2565+
}}
2566+
>
2567+
{toastContent.content}
2568+
</Toast>
2569+
</div>
2570+
)}
24962571
{isCreating || isEditing ? (
24972572
// Form View
24982573
<div className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center overflow-auto" role="dialog">

‎desktop/src/styles.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,10 @@
4545
--bg-secondary: #f7f7f9;
4646
--bg-tertiary: #efeff2;
4747
--bg-accent: rgb(0, 136, 204, 0.3);
48+
--bg-toast: rgba(212, 229, 252, 1);
4849

4950
--text-primary: #151518;
51+
--text-primary-inverse: #ffffff;
5052
--text-secondary: #2c2c32;
5153
--text-tertiary: #6f6d80;
5254
--text-muted: rgba(21, 21, 24, 0.35);
@@ -73,6 +75,7 @@
7375
--info-icon: rgba(138, 138, 144, 1);
7476
--tab-border-active: #007acc;
7577
--tag-bg: rgba(90, 89, 97, 0.3);
78+
--info-icon: rgba(138, 138, 144, 1);
7679
}
7780

7881
.dark {
@@ -82,6 +85,7 @@
8285
--bg-quartary: rgba(36, 36, 42, 1);
8386
--bg-accent: rgb(0, 136, 204, 0.3);
8487
--text-primary: #ffffff;
88+
--text-primary-inverse: #151518;
8589
--text-secondary: #EBEBED;
8690
--text-tertiary: #9793b0;
8791
--text-muted: rgba(138, 138, 144, 1);
@@ -107,6 +111,7 @@
107111
--tag-bg: rgba(90, 89, 97, 0.3);
108112
--dropdown-bg: rgba(36, 36, 42, 1);
109113
--info-icon: rgba(138, 138, 144, 1);
114+
--bg-toast: rgba(212, 229, 252, 1);
110115
}
111116

112117
.info-icon {
@@ -119,6 +124,48 @@
119124
background-color: var(--tag-bg);
120125
}
121126

127+
.bg-theme-toast {
128+
background-color: var(--bg-toast);
129+
}
130+
131+
.button-toast,
132+
.button-toast:focus,
133+
.button-toast:focus-visible,
134+
.dark .button-toast,
135+
.dark .button-toast:focus,
136+
.dark .button-toast:focus-visible {
137+
background-color: rgb(0, 136, 204, 1);
138+
color: #ffffff;
139+
padding: 8px;
140+
border-radius: 0.375rem;
141+
142+
}
143+
144+
.button-toast:hover,
145+
.dark .button-toast:hover {
146+
background-color: rgb(0, 136, 204, 0.85);
147+
color: #ffffff;
148+
}
149+
150+
.toast-container, .dark .toast-container {
151+
background-color: var(--bg-toast);
152+
border-radius: 0.5rem;
153+
color: var(--text-primary-inverse);
154+
padding-top: 10px;
155+
padding-bottom: 20px;
156+
padding-left: 20px;
157+
padding-right: 0;
158+
font-weight: medium;
159+
box-shadow: 0 10px 12px rgba(0, 0, 0, 0.3);
160+
}
161+
162+
.toast-info-icon {
163+
color: var(--button-neutral-bg);
164+
width: 25px;
165+
height: 25px;
166+
font-weight: bold;
167+
}
168+
122169
/* UTILITY CLASSES */
123170
.text-theme-accent {
124171
color: var(--text-accent);

0 commit comments

Comments
 (0)