feat(docs): code injection (#990)

Co-authored-by: Joshua Croft <[email protected]>

components/code.tsx

@@ -4,13 +4,16 @@ import { CopyIcon, DropDownArrow } from "src/icons/shared-icons";
 import { Windows, Mac, Ubuntu, OSProps } from "src/icons/os-icons";
 import { useEffect } from "react";
 import { motion } from "framer-motion";
+
 interface CodeGroupProps {
  children: ReactNode;
  isOSFile?: boolean;
  isLocalHostedFile?: boolean;
  hasCopy?: boolean;
  osBlocks: ReactNode;
  codeBlocks: ReactNode;
+ dynamic?: boolean;
+ digest?: string;
 }
 
 interface CodeBlockProps {
@@ -564,3 +567,23 @@ export const DocsCode: React.FC<CodeGroupProps> = ({
  </div>
  );
 };
+
+interface CodeSegment {
+ path: string;
+ lineStart: number;
+ lineEnd: number;
+ hosted: boolean;
+ filename?: string;
+}
+
+interface GithubCodeSegment {
+ digest?: string;
+}
+
+export const GithubCodeSegment: React.FC<GithubCodeSegment> = () => {
+ return <div hidden />;
+};
+
+export const CodeSegment: React.FC<CodeSegment> = () => {
+ return <div hidden />;
+};

pages/guides/agents/quickstart.mdx

@@ -1,4 +1,4 @@
-import { CodeGroup, DocsCode } from "../../../components/code";
+import {CodeGroup, CodeSegment, DocsCode, GithubCodeSegment} from "../../../components/code";
 
 # Quick Start Guide for uAgents Framework
 
@@ -81,21 +81,42 @@ Create a new Python script:
 </CodeGroup>
 Open `interval_task.py` in your text editor and add the following code:
 
- ```py copy filename="interval_task.py"
- from uagents import Agent, Context
+<GithubCodeSegment digest="8124d02089b755b4ecfbfbbfeefb829b">
+ <CodeSegment
+ path="https://github.com/fetchai/uAgent-Examples/blob/main/5-documentation/guides/agents/quickstart/local/interval_task.py"
+ lineStart={1}
+ lineEnd={14}
+ last_updated={""}
+ hosted={true}
+ />
+</GithubCodeSegment>
+<CodeGroup dynamic hasCopy isLocalHostedFile digest='8124d02089b755b4ecfbfbbfeefb829b'>
+
+
+<DocsCode local={true}>
+ ```py copy filename="interval_task.py"
+
+ from uagents import Agent, Context
+
+ # Create an agent named Alice
+ alice = Agent(name="alice", seed="YOUR NEW PHRASE")
+
+ # Define a periodic task for Alice
+ @alice.on_interval(period=2.0)
+ async def say_hello(ctx: Context):
+ ctx.logger.info(f'hello, my name is {alice.name}')
+
+
+ # Run the agent
+ if __name__ == "__main__":
+ alice.run()
+
+```
+</DocsCode>
 
- # Create an agent named Alice
- alice = Agent(name="alice", seed=YOUR NEW PHRASE)
+</CodeGroup>
 
- # Define a periodic task for Alice
- @alice.on_interval(period=2.0)
- async def say_hello(ctx: Context):
- ctx.logger.info(f'hello, my name is {alice.name}')
 
- # Run the agent
- if __name__ == "__main__":
- alice.run()
- ```
 
 Be sure to update `seed` with a unique phrase, your seed will need to be wrapped in `"`.
 
@@ -142,7 +163,6 @@ Create 2 new Python scripts:
 
 </CodeGroup>
 
-
 <CodeGroup hasCopy isOSFile>
 <DocsCode mac={true}>
  ```py copy filename="mac"
@@ -165,73 +185,117 @@ Create 2 new Python scripts:
 
 Open `SenderAgent.py` in your text editor and add the following code:
 
- ```py copy filename="SenderAgent.py"
- from uagents import Agent, Context, Model
-
-
- class Message(Model):
- message: str
-
-
- RECIPIENT_ADDRESS = (
- "test-agent://agent1qd8ymq4najh5wycvhvhcw3l5lmkgkvkrqevrs6wpp5ll0khfdq6v2cq6859"
- )
-
- SenderAgent = Agent(
- name="SenderAgent",
- port=8000,
- seed="SenderAgent secret phrase",
- endpoint=["http://127.0.0.1:8000/submit"],
- )
-
- print(SenderAgent.address)
-
- @SenderAgent.on_interval(period=2.0)
- async def send_message(ctx: Context):
- await ctx.send(RECIPIENT_ADDRESS, Message(message="Hi there. Let's start our conversation!"))
-
-
- @SenderAgent.on_message(model=Message)
- async def message_handler(ctx: Context, sender: str, msg: Message):
- ctx.logger.info(f"Received message from {sender}: {msg.message}")
-
-
- if __name__ == "__main__":
- SenderAgent.run()
- ```
+<GithubCodeSegment digest="50258d23280034cc685e1b7f06bc0c65">
+ <CodeSegment
+ path="https://github.com/fetchai/uAgent-Examples/blob/main/5-documentation/guides/agents/quickstart/local/SenderAgent.py"
+ lineStart={1}
+ lineEnd={33}
+ last_updated={""}
+ hosted={true}
+ />
+</GithubCodeSegment>
+<CodeGroup dynamic hasCopy isLocalHostedFile digest='50258d23280034cc685e1b7f06bc0c65'>
+
+
+<DocsCode local={true}>
+ ```py copy filename="SenderAgent.py"
+
+ from uagents import Agent, Context, Model
+
+
+ class Message(Model):
+ message: str
+
+
+ RECIPIENT_ADDRESS = (
+ "test-agent://agent1qd8ymq4najh5wycvhvhcw3l5lmkgkvkrqevrs6wpp5ll0khfdq6v2cq6859"
+ )
+
+ SenderAgent = Agent(
+ name="SenderAgent",
+ port=8000,
+ seed="SenderAgent secret phrase",
+ endpoint=["http://127.0.0.1:8000/submit"],
+ )
+
+ print(SenderAgent.address)
+
+
+ @SenderAgent.on_interval(period=2.0)
+ async def send_message(ctx: Context):
+ await ctx.send(RECIPIENT_ADDRESS, Message(message="Hi there. Let's start our conversation!"))
+
+
+ @SenderAgent.on_message(model=Message)
+ async def message_handler(ctx: Context, sender: str, msg: Message):
+ ctx.logger.info(f"Received message from {sender}: {msg.message}")
+
+
+ if __name__ == "__main__":
+ SenderAgent.run()
+
+```
+</DocsCode>
+
+</CodeGroup>
+
+
 
 Then, open `ReceiverAgent.py` in your text editor and add the following code into it:
 
- ```py copy filename="ReceiverAgent.py"
- from uagents import Agent, Context, Model
-
- # NOTE: Run ReceiverAgent.py before running SenderAgent.py
-
-
- class Message(Model):
- message: str
-
-
- ReceiverAgent = Agent(
- name="ReceiverAgent",
- port=8001,
- seed="ReceiverAgent secret phrase",
- endpoint=["http://127.0.0.1:8001/submit"],
- )
-
- print(ReceiverAgent.address)
-
- @ReceiverAgent.on_message(model=Message)
- async def message_handler(ctx: Context, sender: str, msg: Message):
- ctx.logger.info(f"Received message from {sender}: {msg.message}")
-
- # send the response
- await ctx.send(sender, Message(message="Cool! Let's get started!"))
-
-
- if __name__ == "__main__":
- ReceiverAgent.run()
- ```
+<GithubCodeSegment digest="9abcc8ac977bfe803e43451debe9a560">
+ <CodeSegment
+ path="https://github.com/fetchai/uAgent-Examples/blob/main/5-documentation/guides/agents/quickstart/local/ReceiverAgent.py"
+ lineStart={1}
+ lineEnd={33}
+ last_updated={""}
+ hosted={true}
+ />
+</GithubCodeSegment>
+<CodeGroup dynamic hasCopy isLocalHostedFile digest='9abcc8ac977bfe803e43451debe9a560'>
+
+
+<DocsCode local={true}>
+ ```py copy filename="ReceiverAgent.py"
+
+ from uagents import Agent, Context, Model
+
+
+ # NOTE: Run ReceiverAgent.py before running SenderAgent.py
+
+
+ class Message(Model):
+ message: str
+
+
+ ReceiverAgent = Agent(
+ name="ReceiverAgent",
+ port=8001,
+ seed="ReceiverAgent secret phrase",
+ endpoint=["http://127.0.0.1:8001/submit"],
+ )
+
+ print(ReceiverAgent.address)
+
+
+ @ReceiverAgent.on_message(model=Message)
+ async def message_handler(ctx: Context, sender: str, msg: Message):
+ ctx.logger.info(f"Received message from {sender}: {msg.message}")
+
+ # send the response
+ await ctx.send(sender, Message(message="Cool! Let's get started!"))
+
+
+ if __name__ == "__main__":
+ ReceiverAgent.run()
+
+```
+</DocsCode>
+
+</CodeGroup>
+
+
+
 Again, be sure to update `seed` with a unique phrase.
 
 #### Run Script
@@ -248,7 +312,6 @@ Run the scripts to see the agents communicating:
 
 **Expected Output**:
 
-
 - **SenderAgent**:
 
  ```
@@ -271,7 +334,7 @@ Run the scripts to see the agents communicating:
  INFO: [ReceiverAgent]: Received message from agent1qdp9j2ev86k3h5acaayjm8tpx36zv4mjxn05pa2kwesspstzj697xy5vk2a: Hello there bob.
  INFO: [ReceiverAgent]: Received message from agent1qdp9j2ev86k3h5acaayjm8tpx36zv4mjxn05pa2kwesspstzj697xy5vk2a: Hello there bob.
  ```
- 
+
 ## Reach out to the Team!
 
 Excellent! You are now ready to start exploring the concepts and resources available to start developing your agents on the Fetch Network! if you're keen to skip the more code focused guides, your best next steps would be [Communicating with agents](intermediate/communicating-with-other-agents).