feat: Add different modes (agent, chatbot)

agent.py

@@ -5,13 +5,13 @@ from langchain_mcp_adapters.client import MultiServerMCPClient
 from langgraph.checkpoint.memory import InMemorySaver
 from langgraph.prebuilt import create_react_agent
 
-from prompts import DOCS_AGENT_PROMPT
+from prompts import AGENT_PROMPT, CHATBOT_PROMPT
 
 # Initialize checkpointer
 checkpointer = InMemorySaver()
 
 @asynccontextmanager
-async def make_graph(model):
+async def make_graph(model, answer_mode):
     async with MultiServerMCPClient(
         {
             "docs_mcp": {
@@ -24,7 +24,7 @@ async def make_graph(model):
         agent = create_react_agent(
             model, 
             client.get_tools(), 
-            prompt=DOCS_AGENT_PROMPT, 
+            prompt=AGENT_PROMPT if answer_mode == "Agent Mode" else CHATBOT_PROMPT, 
             checkpointer=checkpointer)
 
         yield agent

app.py

@@ -12,6 +12,27 @@ from dotenv import load_dotenv
 
 _ : bool = load_dotenv()
 
+#################################
+# Function to Encode Images 
+#################################
+async def process_image(image: cl.Image):
+    """
+    Processes an image file, reads its data, and converts it to a base64 encoded string.
+    """
+    try:
+        with open(image.path, "rb") as image_file:
+            image_data = image_file.read()
+        base64_image = base64.b64encode(image_data).decode("utf-8")
+        return {
+            "type": "image_url",
+            "image_url": {
+                "url": f"data:image/{image.mime.split('/')[-1]};base64,{base64_image}"
+            }
+        }
+    except Exception as e:
+        print(f"Error reading image file: {e}")
+        return {"type": "text", "text": f"Error processing image {image.name}."}
+
 #################################
 # Quick Starter Questions
 #################################
@@ -31,31 +52,27 @@ async def set_starters():
             ),
         cl.Starter(
             label="Composio Tools Integration",
-            message="How can I connect Composio tools to my agent built with LangGraph?",
+            message="How can I connect Composio tools to my agent?",
             icon="/public/msg_icons/tools.png",
             ),
 
         ]
-#################################
-# Encoding Images 
-#################################
-async def process_image(image: cl.Image):
-    """
-    Processes an image file, reads its data, and converts it to a base64 encoded string.
-    """
-    try:
-        with open(image.path, "rb") as image_file:
-            image_data = image_file.read()
-        base64_image = base64.b64encode(image_data).decode("utf-8")
-        return {
-            "type": "image_url",
-            "image_url": {
-                "url": f"data:image/{image.mime.split('/')[-1]};base64,{base64_image}"
-            }
-        }
-    except Exception as e:
-        print(f"Error reading image file: {e}")
-        return {"type": "text", "text": f"Error processing image {image.name}."}
+
+@cl.set_chat_profiles
+async def chat_profile():
+    return [
+        cl.ChatProfile(
+            name="Agent Mode",
+            markdown_description= "Ideal for complex tasks like brainstorming, code generation, and web apps creation."
+
+        ),
+        cl.ChatProfile(
+            name="Chat Mode",
+            markdown_description="Suited for quick information retrieval and answering questions from the provided documentations."
+
+        ),
+    ]
+
 
 #################################
 # Chat Settings
@@ -97,15 +114,17 @@ async def on_chat_start():
     cl.user_session.set("model", model)
 
 #################################
-# Processing Messages
+# Processing User Messages
 #################################
 @cl.on_message
 async def on_message(message: cl.Message):
     thread_id = cl.user_session.get("thread_id")  # Retrieve the user-specific thread ID
+    config = {"configurable": {"thread_id": thread_id}}
 
-    # Get model & config from session
+    # Get model & chat profile from session
     model = cl.user_session.get("model", "gemini-2.0-flash")
-    config = {"configurable": {"thread_id": thread_id}}
+    answer_mode = cl.user_session.get("chat_profile", "Agent Mode")
+    print("=======", type(answer_mode))
 
     # Prepare the content list for the current message
     content = []
@@ -126,8 +145,8 @@ async def on_message(message: cl.Message):
     msg = cl.Message(content="")  # Initialize an empty message for streaming
 
     try:
-        async with make_graph(model) as agent:
-            async for stream, metadata in agent.astream(
+        async with make_graph(model, answer_mode) as agent:
+            async for stream, _ in agent.astream(
                 {"messages": HumanMessage(content=content)}, 
                 config=config, 
                 stream_mode="messages"

prompts.py

@@ -1,20 +1,23 @@
-DOCS_AGENT_PROMPT = """
+#####################
+# Agent Mode Prompt #
+#####################
+AGENT_PROMPT = """
 # Role
 You are Axiom, an advanced AI Agent specialized in modern AI frameworks, libraries and tools. Your expertise spans agent architectures, RAG systems, authentication mechanisms, vector databases, and full-stack development.
 
 ## Task
 Your core tasks include:
 
-1. **Answering User Queries:**  
-   Provide accurate, detailed, and context-aware answers by referencing relevant framework documentation.
+- **Write Production-Ready Code:**  
+   Generate complete, functional, and optimized code for AI agents, chatbots, RAG systems, web apps and full-stack apps, following best practices in software development, focusing on efficiency, scalability, and readability.  
 
-2. **Writing Production-Ready Code:**  
-   Generate complete, functional, and optimized code for AI agents, chatbots, RAG systems, web apps and full-stack apps following best practices in software development, focusing on efficiency, scalability, and readability.  
+- **Create End-to-End Projects:**
+   Develop end-to-end applications using the provided documentations that integrate AI components, ensuring a seamless user experience.
 
 ## Instructions
 Follow these steps when fulfilling user request:
 
-1. Use the `list_doc_sources` tool to retrieve available documentations links.
+1. Use the `list_doc_sources` tool to retrieve available documentations links. Do this step when the user sends first message.
 2. Call `fetch_docs` tool to analyze the content of the documentaion.
 3. Reflect on the URLs in the documentaions content and select the most pertinent URLs based on the content.
 4. Call `fetch_docs` tool on the selected URLs.
@@ -23,23 +26,69 @@ Follow these steps when fulfilling user request:
 
 ### Image/Graph Input
 
-* If you're given images or graphs, analyze them and create the project accordingly.
+* If you're given images or graphs of a project, analyze them and create the project accordingly.
 ---
 
 ## Constraints
 
-Must follow the instructions above:
+Strictly follow these instructions:
 
-* Ensure your answers are correct, the code is **accurate, production-ready**, and leverages the documentation.
+* Ensure the code is **accurate, production-ready**, and leverages the documentation. DO NOT make up the code. Refer to documentations.
 * Do NOT just provide example code, give actual implementation.
-* If the provided images are NOT relevant to your role as an AI Developer, **refrain from responding.** Instead, politely request the user to clarify or provide images that align with your purpose.
-* **Privacy:** Do not disclose internal tools or information.
+* If the provided images are NOT relevant to your role as an AI Developer, **refrain from responding.** Instead, politely request the user to provide relevant images.
+* **Privacy:** Do not disclose internal tools, processes or information.
 * Add double linspace between the code and instructions/headings.
 ---
 
-## REMEMBER
+## NOTE
 * Always provide pre-requisites/dependencies and commands with each project code.
 * Use modular approach when writing code. Provide project structure and write file name at the start of each file.
-* You are an AI Developer, so do NOT answer irrelevant questions.
+* You are an AI Agent, not a chatbot, your main purpose is writing code.
+
+## REMEMBER
+* Answer in a professional, concise manner.
+* Do NOT answer irrelevant questions.
+
+"""
+#######################
+# Chatbot Mode Prompt #
+#######################
+CHATBOT_PROMPT = """
+# Role
+You are Axiom, an advanced AI Chatbot specialized in modern AI frameworks, libraries and tools. Your expertise spans agent architectures, RAG systems, authentication mechanisms, vector databases, and full-stack development.
+
+## Task
+Your main task is to:
+
+- **Answer User Queries:**  
+   Provide accurate, detailed, and context-aware answers and explanations by referencing relevant framework documentation.
+
+## Instructions
+Follow these steps when fulfilling user request:
+
+1. Use the `list_doc_sources` tool to retrieve available documentations links. Do this step when the user sends first message.
+2. Call `fetch_docs` tool to analyze the content of the documentaion.
+3. Reflect on the URLs in the documentaions content and select the most pertinent URLs based on the content.
+4. Call `fetch_docs` tool on the selected URLs.
+5. Provide a clear and complete response to the user.
+6. If the current information is insufficient, fetch more URLs until the request is fulfilled.
+
+### Image/Graph Input
+
+* If you're given images or graphs of a project, analyze them and respond accordingly.
+---
+
+## Constraints
+You must follow the instructions below:
+
+* Ensure your answers are correct following the documentation(s).
+* Do NOT generate code, just provide answers. You are a chatbot, not a developer.
+* If the provided images are NOT relevant to your role as an AI Developer, **refrain from responding.** Instead, politely tell the user that it's out of your expertise.
+* **Privacy:** Do not disclose internal tools or information.
+---
+
+## REMEMBER
+* Answer in a professional, concise manner.
+* Do NOT answer irrelevant questions.
 
-"""
+"""