Enhance docs

.github/workflows/build.yml

@@ -24,6 +24,9 @@ jobs:
     - name: Lint and typecheck
       run: |
         hatch run lint-check
+    - name: Install Playwright browser(s)s
+      run: |
+        hatch run playwright install chromium
     - name: Test
       run: |
         hatch run test-cov-xml

DEVELOPER_GUIDE.md

@@ -0,0 +1,13 @@
+# Developer Guide
+
+This guide will show you how-to work with the project as a developer.
+
+## Docs
+
+For documentation we use [MkDocs](https://www.mkdocs.org/).
+
+To serve the documentation run
+
+```batch
+hatch run mkdocs serve
+```

docs/index.md

@@ -1,17 +1,20 @@
 
-# Examples
+# Panel Chat Examples
 
 To run all of these examples locally:
+
 ```bash
 git clone https://github.com/holoviz-topics/panel-chat-examples
 cd panel-chat-examples
 pip install hatch
-hatch run panel serve docs/examples/**/*.py --static-dirs thumbnails=docs/assets/thumbnails --autoreload
+hatch run panel-serve
 ```
 
-Note the default installation is not optimized for GPU usage. To enable GPU support for local
-models (i.e. not OpenAI), install `ctransformers` with the proper backend and modify the
-scripts configs' accordingly, e.g. `n_gpu_layers=1` for a single GPU.
+!!! note
+    Note the default installation is not optimized for GPU usage. To **enable
+    GPU support** for local models (i.e. not OpenAI), install `ctransformers`
+    with the proper backend and modify the
+    scripts configs' accordingly, e.g. `n_gpu_layers=1` for a single GPU.
 
 ## Basics
 
@@ -55,19 +58,23 @@ chat_interface.servable()
 
 ### Echo Stream
 
-Demonstrates how to use the `ChatInterface` and a `callback` function to stream back responses.
+Demonstrates how to use the `ChatInterface` and a `callback` function to stream back
+responses.
 
-The chatbot Assistant echoes back the message entered by the User in a *streaming* fashion.
+The chatbot Assistant echoes back the message entered by the User in a *streaming*
+fashion.
 
 [<img src="assets/thumbnails/echo_stream.png" alt="Echo Stream" style="max-height: 400px; max-width: 100%;">](examples/basics/echo_stream.py)
 
 <details>
 <summary>Source code for <a href='examples/basics/echo_stream.py' target='_blank'>echo_stream.py</a></summary>
 ```python
 """
-Demonstrates how to use the `ChatInterface` and a `callback` function to stream back responses.
+Demonstrates how to use the `ChatInterface` and a `callback` function to stream back
+responses.
 
-The chatbot Assistant echoes back the message entered by the User in a *streaming* fashion.
+The chatbot Assistant echoes back the message entered by the User in a *streaming*
+fashion.
 """
 
 
@@ -157,7 +164,6 @@ Demonstrates how to delay the display of the placeholder.
 """
 
 from asyncio import sleep
-from random import choice
 
 import panel as pn
 
@@ -448,7 +454,6 @@ Llama2.
 """
 
 import panel as pn
-
 from langchain.chains import LLMChain
 from langchain.llms import CTransformers
 from langchain.prompts import PromptTemplate
@@ -467,7 +472,8 @@ MODEL_KWARGS = {
 }
 llm_chains = {}
 
-TEMPLATE = """<s>[INST] You are a friendly chat bot who's willing to help answer the user:
+TEMPLATE = """<s>[INST] You are a friendly chat bot who's willing to help answer the
+user:
 {user_input} [/INST] </s>
 """
 
@@ -574,7 +580,7 @@ def add_key_to_env(key):
     os.environ["OPENAI_API_KEY"] = key
     chat_interface.send(
         "Your OpenAI key has been set. Feel free to minimize the sidebar.",
-        **SYSTEM_KWARGS
+        **SYSTEM_KWARGS,
     )
     chat_interface.disabled = False
 
@@ -882,3 +888,4 @@ chat_interface.send(
 chat_interface.servable()
 ```
 </details>
+

mkdocs.yml

@@ -1,18 +1,19 @@
 site_name: Panel Chat Examples
-site_description: Example recipes for Panel ChatInterface.
+site_description: Example recipes for Panel Chat Components
 
 repo_url: https://github.com/holoviz-topics/panel-chat-examples
 repo_name: holoviz-topics/panel-chat-examples
 
 theme:
     name: material
-    icon:
-        logo: material/library
+    logo: 'assets/images/panel-logo.png'
+    features:
+        - content.copy.code
     palette:
         # Palette toggle for light mode
         - media: "(prefers-color-scheme: light)"
           scheme: default
-          primary: grey
+          primary: white
           accent: blue
           toggle:
             icon: material/brightness-7
@@ -21,7 +22,7 @@ theme:
         # Palette toggle for dark mode
         - media: "(prefers-color-scheme: dark)"
           scheme: slate
-          primary: grey
+          primary: black
           accent: blue
           toggle:
             icon: material/brightness-4
@@ -37,6 +38,7 @@ markdown_extensions:
     - pymdownx.inlinehilite
     - pymdownx.snippets
     - pymdownx.superfences
+    - admonition
 
 plugins:
     - search
@@ -53,4 +55,4 @@ watch:
     - panel_chat_examples
 
 nav:
-    - Examples: index.md
+    - Panel Chat Examples: index.md

pyproject.toml

@@ -42,8 +42,8 @@ lint-check = [
   "ruff .",
   "mypy panel_chat_examples/",
 ]
-docs-serve = "mkdocs serve"
-docs-build = "mkdocs build"
+docs-serve = "python scripts/generate_gallery.py;mkdocs serve"
+docs-build = "python scripts/generate_gallery.py;mkdocs build"
 
 [build-system]
 requires = ["hatchling", "hatch-regex-commit"]

scripts/generate_gallery.py

@@ -21,20 +21,22 @@ def run():
 
     text = dedent(
         """
-        # Examples
+        # Panel Chat Examples
 
         To run all of these examples locally:
+
         ```bash
         git clone https://github.com/holoviz-topics/panel-chat-examples
         cd panel-chat-examples
         pip install hatch
         hatch run panel-serve
         ```
 
-        Note the default installation is not optimized for GPU usage. To enable GPU
-        support for local models (i.e. not OpenAI), install `ctransformers` with the
-        proper backend and modify the scripts configs' accordingly, e.g.
-        `n_gpu_layers=1` for a single GPU.
+        !!! note
+            Note the default installation is not optimized for GPU usage. To **enable
+            GPU support** for local models (i.e. not OpenAI), install `ctransformers`
+            with the proper backend and modify the
+            scripts configs' accordingly, e.g. `n_gpu_layers=1` for a single GPU.
         """
     )
     for folder in sorted(EXAMPLES_PATH.glob("**/"), key=lambda folder: folder.name):