Welcome Dialog React Component

The Welcome dialog greets a new user on the first web console page that they visit, and gives them a short tour of the platform in eight steps: what Smarter is, what their new account is preloaded with, the generative AI technologies that they can try with it, connecting MCP servers (MCPClient resources, which the dialog calls MCP Servers, the name new users know), retrieval-augmented generation with Vectorstores (whose cloud infrastructure costs real money for as long as it exists), self-hosting open models from Hugging Face with an LLMHost (whose cloud infrastructure costs real money for as long as it runs), how Smarter runs in production on Kubernetes, the cloud orchestration technology behind platforms such as Netflix, YouTube and TikTok, and where to start. Its last step links to the Get Weather example LLMClient, the Prompt Workbench’s list of LLMClients, this documentation, and the project’s website. Its text and its orange accent follow the welcome email that the platform sent the user, so that the dialog reads as the next page of that email.

Each time the dialog opens, it picks one of its steps at random, and that step shows a Did you know? note below its illustration: a piece of trivia about the Smarter project, also picked at random, such as how it is coded in part with agentic AI, its Architecture Decision Records, its SDKs, or the languages that the web console speaks. The facts, and the unstyled note, come from @smarter/didyouknow, and the dialog styles the note as a card of its own. On a phone, where the illustration shrinks into a band above the text, the note is hidden.

The dialog’s first step has a Show at startup box, which is ticked for a new user. While it is ticked, the dialog opens by itself on the first web console page that the user visits each time they sign in. When the user closes the dialog, in any way, or reaches its last step, the dialog records the box’s choice. Unticked, the date is stored in UserProfile.welcomed_at, so the dialog doesn’t open by itself again, on any device or browser. Ticked, the date is cleared. Either way, a flag in the user’s session keeps it from opening by itself again until they next sign in. The user can take the tour again at any time from Welcome Tour in the user menu, and tick or untick the box there: any element with the data-smarter-welcome-open attribute opens it.

While the dialog is closed, the app shows the first of the onboarding hints: a sparkling spotlight on the sidebar’s LLM Clients link, with the note “Start building your AI masterpiece here.”

Unlike the other React components, which each have their own page, @smarter/welcome is mounted on every web console page: templates/dashboard/base.html includes templates/react/welcome.html for signed-in users. Its illustrations are the Keen theme’s dozzy-1 set, which has a version of each for the dark theme. The dialog is a modal: Escape, its close button, Skip tour and a click outside of it close it, the arrow keys move between its steps, and Tab keeps the focus inside it.

API

API views for the web console’s welcome dialog, the @smarter/welcome React app.

The dialog opens by itself on the first console page that a user visits after they sign in, for as long as its first step’s Show at startup box is ticked, which it is for a new user. It opens again whenever they choose Welcome Tour in the user menu. Closing it, in any way, records the box’s choice: unticked, the date in UserProfile.welcomed_at, so that it doesn’t open by itself again, on any device; ticked, no date. Either way, it doesn’t open by itself again in the same session.

welcome/ returns the links that the dialog’s last step offers. The dialog’s text lives in the React app, where it is translated.
welcome/dismiss/ records that the user has been welcomed, and whether it shows at startup.

smarter.apps.dashboard.views.views.api.welcome.WEATHER_LLMCLIENT_NAME = 'weather'

The example LLMClient that the welcome dialog suggests trying first.

See llm-clients/llmclient-weather.yaml in https://github.com/smarter-sh/example-manifests.

smarter.apps.dashboard.views.views.api.welcome.WELCOME_SHOWN_SESSION_KEY = 'smarter_welcome_shown'

The session key that is set once the user has closed the welcome dialog in this session.

The dialog opens by itself at most once per session, i.e. once each time the user signs in.

class smarter.apps.dashboard.views.views.api.welcome.WelcomeApiResponse(**data)[source]

Bases: BaseModel

The response of both welcome dialog api views.

Parameters:

welcomed – Whether the user has closed the welcome dialog before, with its Show at startup box unticked, so that it no longer opens by itself.
urls – The links that the dialog’s last step offers.

model_config = {'extra': 'forbid'}: Configuration for the model, should be a dictionary conforming to [ConfigDict][pydantic.config.ConfigDict].

class smarter.apps.dashboard.views.views.api.welcome.WelcomeDismissRequest(**data)[source]

Bases: BaseModel

The body of a request to the welcome dismiss api.

Parameters:: show_at_startup – Whether the dialog opens by itself each time the user signs in: the first step’s Show at startup box. An empty body is False.

model_config = {'extra': 'forbid', 'populate_by_name': True, 'validate_by_alias': True, 'validate_by_name': True}: Configuration for the model, should be a dictionary conforming to [ConfigDict][pydantic.config.ConfigDict].

class smarter.apps.dashboard.views.views.api.welcome.WelcomeDismissView(**kwargs)[source]

Bases: SmarterAuthenticatedWebView

Records that the user has closed the welcome dialog, and whether it shows at startup.

The body is a WelcomeDismissRequest, as JSON; a request that isn’t JSON is an empty one. With showAtStartup false, or an empty body, it sets UserProfile.welcomed_at on each of the user’s profiles that hasn’t got one, and keeps the date of an earlier visit, so that the dialog doesn’t open by itself again. With showAtStartup true, it clears the date, so that the dialog opens by itself the next time the user signs in. Either way, it sets WELCOME_SHOWN_SESSION_KEY, so that the dialog doesn’t open by itself again in this session. Its response is that of WelcomeView.

class smarter.apps.dashboard.views.views.api.welcome.WelcomeUrls(**data)[source]

Bases: BaseModel

The links that the welcome dialog’s last step offers.

Parameters:

weather – The Prompt Workbench chat of the Get Weather example LLMClient, or None if the user can’t read one, e.g. on a platform that hasn’t added the examples.
llmclients – The Prompt Workbench’s list of the LLMClients that the user can read.
docs – The documentation site, docs.smarter.sh.
project – The Smarter project’s website, smarter.sh.

model_config = {'extra': 'forbid'}: Configuration for the model, should be a dictionary conforming to [ConfigDict][pydantic.config.ConfigDict].

class smarter.apps.dashboard.views.views.api.welcome.WelcomeView(**kwargs)[source]

Bases: SmarterAuthenticatedWebView

The welcome dialog’s state, and the links that its last step offers.

Response shape:

{
    "welcomed": false,
    "urls": {
        "weather": "/workbench/llm-clients/3f2a9c/prompt/",
        "llmclients": "/workbench/",
        "docs": "https://docs.smarter.sh/",
        "project": "https://smarter.sh/"
    }
}

smarter.apps.dashboard.views.views.api.welcome.not_signed_in()[source]

The response to a request without a signed-in user.

SmarterAuthenticatedWebView redirects anonymous requests to the login page, so this is only for a user that get_resolved_user() can’t resolve.

Returns:: A 401 response.
Return type:: JsonResponse

smarter.apps.dashboard.views.views.api.welcome.user_was_welcomed(user_id)[source]

Whether the user has closed the welcome dialog with its Show at startup box unticked, in any of.

their accounts.

The console’s base template asks on every page, so the answer is cached until WelcomeDismissView invalidates it.

Parameters:: user_id (int) – The id of the Django user.
Returns:: True once the user has closed the welcome dialog, until they tick Show at startup again.
Return type:: bool

smarter.apps.dashboard.views.views.api.welcome.weather_llmclient_url(user)[source]

The Prompt Workbench chat of the Get Weather example LLMClient, llm-clients/<hashed_id>/prompt/.

The user’s own copy wins, if they have one. Otherwise, the one that their account, or the platform, shares with them.

Parameters:: user (User) – The Django user.
Returns:: The url path of the chat, or None if the user can’t read a Get Weather LLMClient.
Return type:: str | None

smarter.apps.dashboard.views.views.api.welcome.welcome_response(user)[source]

The welcome dialog’s state and links, for this user.

Parameters:: user (User) – The Django user.
Returns:: The response of the welcome dialog api views.
Return type:: WelcomeApiResponse

Template Tags

Django template tags for the web console’s welcome dialog, the @smarter/welcome React app.

templates/react/welcome.html uses them, and the console’s base template, templates/dashboard/base.html, includes it on every page, for signed-in users.

smarter.apps.dashboard.templatetags.react_welcome.templatetag_manager = <smarter.lib.django.templatetags.smarter_react_templatetag_manager.SmarterReactTemplateTagManager object>

Manages integration of Vite-built React assets into Django templates.

Expects to find a Vite-generated manifest.json in the file path static/react/@smarter/welcome/.

smarter.apps.dashboard.templatetags.react_welcome.welcome_dialog(context)[source]

The attributes of the welcome dialog’s root element.

The urls are reversed against settings.ROOT_URLCONF, because the console’s base template also renders on a deployed LLMClient’s host, whose urlconf has none of the console’s names.

Parameters:: context (RequestContext) – The template context, whose request’s user is the signed-in user.
Returns:: The root element’s id, the cookie names, the welcome api urls, show_at_startup: whether the dialog opens by itself each time the user signs in, which is its Show at startup box, and show: whether it opens by itself on this page, because it shows at startup, and the user hasn’t closed it yet in this session. It never opens by itself for a request without a signed-in user.
Return type:: dict[str, str | bool]

smarter.apps.dashboard.templatetags.react_welcome.welcome_react_assets()[source]

Load CSS and JS files for the welcome dialog’s React app.

based on its manifest.json.

Return type:: ReactAppAssets