Adds help text for registry model providers in chat UI settings (#373)

* WIP change: display help in settings panel * Interprets markdown, updates Hugging Face help with explicit link * Edits SageMaker help to be neutral in use * Displays help message for all providers with one
jupyterlab · Sep 7, 2023 · 640f36c · 640f36c
1 parent fc711c7
commit 640f36c
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 26 deletions.
diff --git a/examples/commands.ipynb b/examples/commands.ipynb
diff --git a/packages/jupyter-ai-magics/jupyter_ai_magics/providers.py b/packages/jupyter-ai-magics/jupyter_ai_magics/providers.py
@@ -300,7 +300,7 @@ class HfHubProvider(BaseProvider, HuggingFaceHub):
     models = ["*"]
     model_id_key = "repo_id"
     help = (
-        "See https://huggingface.co/models for a list of models. "
+        "See [https://huggingface.co/models](https://huggingface.co/models) for a list of models. "
         "Pass a model's repository ID as the model ID; for example, `huggingface_hub:ExampleOwner/example-model`."
     )
     # ipywidgets needed to suppress tqdm warning
@@ -542,7 +542,7 @@ class SmEndpointProvider(BaseProvider, SagemakerEndpoint):
     # This all needs to be on one line of markdown, for use in a table
     help = (
         "Specify an endpoint name as the model ID. "
-        "In addition, you must include the `--region_name`, `--request_schema`, and the `--response_path` arguments. "
+        "In addition, you must specify a region name, request schema, and response path. "
         "For more information, see the documentation about [SageMaker endpoints deployment](https://docs.aws.amazon.com/sagemaker/latest/dg/realtime-endpoints-deployment.html) "
         "and about [using magic commands with SageMaker endpoints](https://jupyter-ai.readthedocs.io/en/latest/users/index.html#using-magic-commands-with-sagemaker-endpoints)."
     )

diff --git a/packages/jupyter-ai/jupyter_ai/handlers.py b/packages/jupyter-ai/jupyter_ai/handlers.py
@@ -262,6 +262,7 @@ def get(self):
                     id=provider.id,
                     name=provider.name,
                     models=provider.models,
+                    help=provider.help,
                     auth_strategy=provider.auth_strategy,
                     registry=provider.registry,
                     fields=provider.fields,

diff --git a/packages/jupyter-ai/jupyter_ai/models.py b/packages/jupyter-ai/jupyter_ai/models.py
@@ -79,6 +79,7 @@ class ListProvidersEntry(BaseModel):
     name: str
     model_id_label: Optional[str]
     models: List[str]
+    help: Optional[str]
     auth_strategy: AuthStrategy
     registry: bool
     fields: List[Field]

diff --git a/packages/jupyter-ai/src/components/chat-settings.tsx b/packages/jupyter-ai/src/components/chat-settings.tsx
@@ -1,4 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react';
+
+import ReactMarkdown from 'react-markdown';
+
 import { Box } from '@mui/system';
 import {
   Alert,
@@ -10,7 +13,8 @@ import {
   Radio,
   RadioGroup,
   TextField,
-  CircularProgress
+  CircularProgress,
+  Typography
 } from '@mui/material';
 
 import { Select } from './select';
@@ -36,6 +40,7 @@ export function ChatSettings(): JSX.Element {
   const [lmProvider, setLmProvider] =
     useState<AiService.ListProvidersEntry | null>(null);
   const [showLmLocalId, setShowLmLocalId] = useState<boolean>(false);
+  const [helpMarkdown, setHelpMarkdown] = useState<string | null>(null);
   const [lmLocalId, setLmLocalId] = useState<string>('');
   const lmGlobalId = useMemo<string | null>(() => {
     if (!lmProvider) {
@@ -72,6 +77,7 @@ export function ChatSettings(): JSX.Element {
     setLmLocalId(server.lmLocalId);
     setEmGlobalId(server.config.embeddings_provider_id);
     setSendWse(server.config.send_with_shift_enter);
+    setHelpMarkdown(server.lmProvider?.help ?? null);
     if (server.lmProvider?.registry) {
       setShowLmLocalId(true);
     }
@@ -237,6 +243,7 @@ export function ChatSettings(): JSX.Element {
           const nextLmLocalId = getModelLocalId(lmGid)!;
 
           setLmProvider(nextLmProvider);
+          setHelpMarkdown(nextLmProvider?.help ?? null);
           if (nextLmProvider.registry) {
             setLmLocalId('');
             setShowLmLocalId(true);
@@ -264,6 +271,11 @@ export function ChatSettings(): JSX.Element {
           fullWidth
         />
       )}
+      {helpMarkdown && (
+        <Typography className="jp-ai-ChatSettings-model-help">
+          <ReactMarkdown linkTarget="_blank">{helpMarkdown}</ReactMarkdown>
+        </Typography>
+      )}
       {lmGlobalId && (
         <ModelFields
           fields={lmProvider?.fields}

diff --git a/packages/jupyter-ai/src/handler.ts b/packages/jupyter-ai/src/handler.ts
@@ -164,6 +164,7 @@ export namespace AiService {
     name: string;
     model_id_label?: string;
     models: string[];
+    help?: string;
     auth_strategy: AuthStrategy;
     registry: boolean;
     fields: Field[];

diff --git a/packages/jupyter-ai/style/chat-settings.css b/packages/jupyter-ai/style/chat-settings.css
@@ -7,3 +7,14 @@
 .jp-ai-ChatSettings-welcome {
   color: var(--jp-ui-font-color1);
 }
+
+/* Defer to browser defaults for links in model help */
+.jp-ai-ChatSettings-model-help a {
+  text-decoration: revert;
+  color: revert;
+}
+
+.jp-ai-ChatSettings-model-help a:hover {
+  text-decoration: revert;
+  color: revert;
+}