[Docs Agent] Release of Docs Agent v 0.3.1 (#340)

* [docs-agent] Clean up Docs Agent's README.md files.

* [Release] Docs Agent version 0.3.1

What's changed:

- Bug fixes in the Docs Agent web app UI.
- Added more templates for the Docs Agent web app: widget and experimental
- A new custom splitter added: FIDL (.fidl) file specific splitter.

* [docs] Update the git clone instructions on Docs Agent's CLI setup
guide.

* [docs] Minor edits in Docs Agent's CLI setup guide.

examples/gemini/python/docs-agent/docs_agent/interfaces/chatbot/__init__.py

@@ -19,7 +19,7 @@
 from docs_agent.utilities import config
 
 
-def create_app(product: config.ProductConfig):
+def create_app(product: config.ProductConfig, app_mode: str = "web"):
     app = Flask(__name__)
-    app.register_blueprint(chatui.construct_blueprint(product_config=product))
+    app.register_blueprint(chatui.construct_blueprint(product_config=product, app_mode=app_mode))
     return app

examples/gemini/python/docs-agent/docs_agent/interfaces/chatbot/chatui.py

@@ -45,19 +45,32 @@
 
 
 # This is used to define the app blueprint using a productConfig
-def construct_blueprint(product_config: config.ProductConfig):
+def construct_blueprint(product_config: config.ProductConfig, app_mode: str = None):
     bp = Blueprint("chatui", __name__)
     if product_config.db_type == "google_semantic_retriever":
         docs_agent = DocsAgent(config=product_config, init_chroma=False)
     else:
         docs_agent = DocsAgent(config=product_config)
-    logging.info(f"Launching the flask app for product: {product_config.product_name}")
+    logging.info(f"Launching the Flask app for product: {product_config.product_name} with app_mode: {app_mode}")
+    # Assign templates and redirects
+    if app_mode == "web":
+        app_template = "chatui/index.html"
+        redirect_index = "chatui.index"
+    elif app_mode == "experimental":
+        app_template = "chatui-experimental/index.html"
+        redirect_index = "chatui-experimental.index"
+    elif app_mode == "widget":
+        app_template = "chat-widget/index.html"
+        redirect_index = "chat-widget.index"
+    else:
+        app_template = "chatui/index.html"
+        redirect_index = "chatui.index"
 
     @bp.route("/", methods=["GET", "POST"])
     def index():
         server_url = request.url_root.replace("http", "https")
         return render_template(
-            "chatui/index.html",
+            app_template,
             product=product_config.product_name,
             server_url=server_url,
         )
@@ -73,7 +86,7 @@ def api():
                     context,
                     sources_ref,
                     plain_token,
-                ) = ask_model_2_with_sources(input["question"], agent=docs_agent)
+                ) = ask_model_with_sources(input["question"], agent=docs_agent)
                 source_array = []
                 for source in sources_ref:
                     source_array.append(source.returnDictionary())
@@ -100,7 +113,7 @@ def like():
             log_like(is_like, str(uuid_found).strip())
             return "OK"
         else:
-            return redirect(url_for("chatui.index"))
+            return redirect(url_for(redirect_index))
 
     @bp.route("/rewrite", methods=["GET", "POST"])
     def rewrite():
@@ -149,54 +162,35 @@ def rewrite():
                 file.close()
             return "OK"
         else:
-            if product_config.docs_agent_config == "experimental":
-                return redirect(url_for("chatui.index_experimental"))
-            elif product_config.docs_agent_config == "normal":
-                return redirect(url_for("chatui.index"))
+            return redirect(url_for(redirect_index))
 
     # Render a response page when the user asks a question
     # using input text box.
     @bp.route("/result", methods=["GET", "POST"])
     def result():
         if request.method == "POST":
             question = request.form["question"]
-            if product_config.docs_agent_config == "experimental":
-                return ask_model2(question, agent=docs_agent, template="chatui/index_experimental.html")
-            elif product_config.docs_agent_config == "normal":
-                return ask_model2(
-                    question, agent=docs_agent, template="chatui/index.html"
-                )
+            return ask_model(question, agent=docs_agent, template=app_template)
         else:
-            if product_config.docs_agent_config == "experimental":
-                return redirect(url_for("chatui.index_experimental"))
-            elif product_config.docs_agent_config == "normal":
-                return redirect(url_for("chatui.index"))
+            return redirect(url_for(redirect_index))
 
     # Render a response page when the user clicks a question
     # from the related questions list.
     @bp.route("/question/<ask>", methods=["GET", "POST"])
     def question(ask):
         if request.method == "GET":
             question = urllib.parse.unquote_plus(ask)
-            if product_config.docs_agent_config == "experimental":
-                return ask_model2(question, agent=docs_agent, template="chatui/index_experimental.html")
-            elif product_config.docs_agent_config == "normal":
-                return ask_model2(
-                    question, agent=docs_agent, template="chatui/index.html"
-                )
+            return ask_model(question, agent=docs_agent, template=app_template)
         else:
-            if product_config.docs_agent_config == "experimental":
-                return redirect(url_for("chatui.index_expiremental"))
-            elif product_config.docs_agent_config == "normal":
-                return redirect(url_for("chatui.index"))
+            return redirect(url_for(redirect_index))
 
     return bp
 
 
 # Construct a set of prompts using the user question, send the prompts to
 # the lanaguage model, receive responses, and present them into a page.
 # Use template to specify a custom template for the classic web UI
-def ask_model2(question, agent, template: str = "chatui/index.html"):
+def ask_model(question, agent, template: str = "chatui/index.html"):
     # Returns a built context, a total token count of the context and an array
     # of sourceOBJ
     full_prompt = ""
@@ -307,7 +301,7 @@ def ask_model2(question, agent, template: str = "chatui/index.html"):
 # Not fully implemented
 # This method is used for the API endpoint, so it returns values that can be
 # packaged as JSON
-def ask_model_2_with_sources(question, agent):
+def ask_model_with_sources(question, agent):
     docs_agent = agent
     full_prompt = ""
     context, plain_token, sources_ref = docs_agent.query_vector_store_to_build(

examples/gemini/python/docs-agent/docs_agent/interfaces/chatbot/static/css/style-chatui.css

@@ -93,18 +93,20 @@ body {
     font-size: 0.9em;
     font-family: system-ui;
     line-height: 150%;
+    word-break: break-word;
     padding: 4px;
   }
 
   #response-box {
     font-size: 1.0em;
     font-family: sans-serif;
-    line-height: 100%;
+    line-height: 140%;
     margin-top: 10px;
   }
 
   #suggested-questions {
     font-family: sans-serif;
+    word-break: break-word;
   }
 
   #context-content{
@@ -176,6 +178,13 @@ body {
     margin-top: 12px;
   }
 
+  #answerable-span {
+    font-size: small;
+    font-family: system-ui;
+    float: right;
+    padding: 10px;
+  }
+
   /* ======= Style by class ======= */
 
   .hidden {
@@ -240,6 +249,7 @@ body {
   .related-questions {
     margin-bottom: 20px;
     font-size: 0.9em;
+    line-height: 140%;
   }
 
   /* ======= Style buttons by ID ======= */
@@ -291,7 +301,7 @@ body {
   #edit-text-area {
     font: 13px/1.5em Overpass, "Open Sans", Helvetica, sans-serif;
     max-height: 500px;
-    max-width: 650px;
+    max-width: -webkit-fill-available;
     height: 300px;
     width: 650px;
     padding: 8px;
@@ -340,7 +350,7 @@ body {
 
   .search input[type="text"] {
     border: 0;
-    width: 91%;
+    width: calc(100% - 65px);
     padding: 10px;
   }
 
@@ -505,3 +515,17 @@ body {
     margin-bottom: 0;
   }
 
+/* Loader animation */
+/* Source: https://css-loaders.com/classic/ */
+.loader {
+  width: fit-content;
+  font-family: monospace;
+  font-size: 14px;
+  margin-left: 13px;
+  clip-path: inset(0 3ch 0 0);
+  animation: animation 1s steps(4) infinite;
+}
+.loader:before {
+  content:"Generating a response..."
+}
+@keyframes animation {to{clip-path: inset(0 -1ch 0 0)}}