Chat help message on load (jupyterlab#277)

* Shortens text box placeholder

* Adds help command

* Adds link to docs

* Simplifies help handler

* Initial help message on load

* Reverts changes to default.py

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Copy edit: send -> ask

* Update packages/jupyter-ai/jupyter_ai/chat_handlers/help.py

Co-authored-by: Piyush Jain <[email protected]>

* Simplifies reply logic

* Tightens spacing for bulleted lists in markdown

* Slash commands, mentions magic commands

* Plural notebooks

* Update packages/jupyter-ai/jupyter_ai/chat_handlers/help.py

Co-authored-by: Andrii Ieroshenko <[email protected]>

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Piyush Jain <[email protected]>
Co-authored-by: Andrii Ieroshenko <[email protected]>

packages/jupyter-ai/jupyter_ai/chat_handlers/__init__.py

@@ -3,4 +3,5 @@
 from .clear import ClearChatHandler
 from .default import DefaultChatHandler
 from .generate import GenerateChatHandler
+from .help import HelpChatHandler
 from .learn import LearnChatHandler

packages/jupyter-ai/jupyter_ai/chat_handlers/help.py

@@ -0,0 +1,36 @@
+import time
+from typing import List
+from uuid import uuid4
+
+from jupyter_ai.models import AgentChatMessage, HumanChatMessage
+
+from .base import BaseChatHandler
+
+HELP_MESSAGE = """Hi there! I'm Jupyternaut, your programming assistant.
+You can ask me a question using the text box below. You can also use these commands:
+* `/learn` — Teach Jupyternaut about files on your system
+* `/ask` — Ask a question about your learned data
+* `/generate` — Generate a Jupyter notebook from a text prompt
+* `/clear` — Clear the chat window
+* `/help` — Display this help message
+
+Jupyter AI includes [magic commands](https://jupyter-ai.readthedocs.io/en/latest/users/index.html#the-ai-and-ai-magic-commands) that you can use in your notebooks.
+For more information, see the [documentation](https://jupyter-ai.readthedocs.io).
+"""
+
+
+def HelpMessage():
+    return AgentChatMessage(
+        id=uuid4().hex,
+        time=time.time(),
+        body=HELP_MESSAGE,
+        reply_to="",
+    )
+
+
+class HelpChatHandler(BaseChatHandler):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
+    async def _process_message(self, message: HumanChatMessage):
+        self.reply(HELP_MESSAGE, message)

packages/jupyter-ai/jupyter_ai/extension.py

@@ -9,8 +9,10 @@
     ClearChatHandler,
     DefaultChatHandler,
     GenerateChatHandler,
+    HelpChatHandler,
     LearnChatHandler,
 )
+from .chat_handlers.help import HelpMessage
 from .config_manager import ConfigManager
 from .handlers import (
     ChatHistoryHandler,
@@ -54,7 +56,7 @@ def initialize_settings(self):
         # list of chat messages to broadcast to new clients
         # this is only used to render the UI, and is not the conversational
         # memory object used by the LM chain.
-        self.settings["chat_history"] = []
+        self.settings["chat_history"] = [HelpMessage()]
 
         # get reference to event loop
         # `asyncio.get_event_loop()` is deprecated in Python 3.11+, in favor of
@@ -90,6 +92,7 @@ def initialize_settings(self):
             root_dir=self.serverapp.root_dir,
             dask_client_future=dask_client_future,
         )
+        help_chat_handler = HelpChatHandler(**chat_handler_kwargs)
         ask_chat_handler = AskChatHandler(
             **chat_handler_kwargs, retriever=learn_chat_handler
         )
@@ -99,6 +102,7 @@ def initialize_settings(self):
             "/clear": clear_chat_handler,
             "/generate": generate_chat_handler,
             "/learn": learn_chat_handler,
+            "/help": help_chat_handler,
         }
 
         latency_ms = round((time.time() - start) * 1000)

packages/jupyter-ai/src/components/chat-input.tsx

@@ -60,7 +60,7 @@ export function ChatInput(props: ChatInputProps): JSX.Element {
           variant="outlined"
           multiline
           onKeyDown={handleKeyDown}
-          placeholder="Ask Jupyternaut anything"
+          placeholder="Ask Jupyternaut"
           InputProps={{
             endAdornment: (
               <InputAdornment position="end">

packages/jupyter-ai/src/components/chat.tsx

@@ -127,8 +127,8 @@ function ChatBody({
         <Stack spacing={4}>
           <p className="jp-ai-ChatSettings-welcome">
             Welcome to Jupyter AI! To get started, please select a language
-            model to chat with from the settings panel. You will also likely
-            need to provide API credentials, so be sure to have those handy.
+            model to chat with from the settings panel. You may also need to
+            provide API credentials, so have those handy.
           </p>
           <Button
             variant="contained"

packages/jupyter-ai/style/react-markdown.css

@@ -6,6 +6,10 @@
   padding: 0;
 }
 
+.jp-RenderedHTMLCommon.jp-ai-react-markdown ul:not(.list-inline) {
+  padding-left: 1em;
+}
+
 /* !important specifier required to override inline styles from Prism */
 .jp-ai-code {
   font-family: var(--jp-code-font-family) !important;