diff --git a/.github/spelling/known_words_corpus.txt b/.github/spelling/known_words_corpus.txt index 7e8b79133..da3aa0531 100644 --- a/.github/spelling/known_words_corpus.txt +++ b/.github/spelling/known_words_corpus.txt @@ -678,4 +678,28 @@ bestmatches gnews newsrequest v20 -servicefordungeons \ No newline at end of file +servicefordungeons +darksystemdiagramaiengine +svg +systemdiagramaiengine +humantextin +darkhumantextin +darkaiwithpersonaldata +aiwithpersonaldata +darkmailroom +darkscalinghosting +scalinghosting +anagentforeveryone +darkhostingnameservice1 +darkanagentforeveryone +hostingnameservice1 +darkagentsinteracting +imagebytheme +agentsinteracting +decentralisednetwork +darkdecentralisednetwork +decentralised +publicandprivateagents +darkpublicandprivateagents +highleveldiagram +darkhighleveldiagram \ No newline at end of file diff --git a/components/grid.module.css b/components/grid.module.css index 7c0044ebb..b5d2a90ae 100644 --- a/components/grid.module.css +++ b/components/grid.module.css @@ -30,7 +30,8 @@ } :is(html[class~="dark"] .hoverGridBox) { - background-color: #363841; + background: rgba(95, 56, 251, 0.2); + backdrop-filter: blur(35px); border: none; color: #bfaffd; } diff --git a/components/landing.module.css b/components/landing.module.css index b35854c7e..a66f388fd 100644 --- a/components/landing.module.css +++ b/components/landing.module.css @@ -372,7 +372,8 @@ } :is(html[class~="dark"] .comingSomewhereWrapper:hover) { - background-color: #363841; + background: rgba(95, 56, 251, 0.2); + backdrop-filter: blur(35px); } :is(html[class~="dark"] .comingSomewhereTitle) { diff --git a/components/mdx.tsx b/components/mdx.tsx index b91548985..1fc409b7a 100644 --- a/components/mdx.tsx +++ b/components/mdx.tsx @@ -2,6 +2,9 @@ import React, { ReactNode, useState, useEffect, useRef } from "react"; import { Tab as HeadlessTab } from "@headlessui/react"; import { DropDownArrow, Tickicon } from "src/icons/shared-icons"; import { motion } from "framer-motion"; +import Image from "next/image"; +import { useTheme } from "next-themes"; +import { ThemeMode } from "theme/fetch-ai-docs/helpers"; function InfoIcon(properties) { return ( @@ -289,3 +292,32 @@ export function Grid2({ children }: { children: ReactNode }) { ); } + +interface ImageByThemePropsTypes { + darkSrc: string; + lightSrc: string; + alt: string; + width?: number | `${number}`; + height?: number | `${number}`; +} + +export const ImageByTheme = ({ + darkSrc, + lightSrc, + alt, + width, + height, +}: ImageByThemePropsTypes) => { + const { resolvedTheme } = useTheme(); + const src = resolvedTheme === ThemeMode.Dark ? darkSrc : lightSrc; + return ( + {alt} + ); +}; diff --git a/components/tab.module.css b/components/tab.module.css index c6a31ed56..5f258a95c 100644 --- a/components/tab.module.css +++ b/components/tab.module.css @@ -23,7 +23,8 @@ } :is(html[class~="dark"] .hoverGuideBox) { - background: #363841; + background: rgba(95, 56, 251, 0.2); + backdrop-filter: blur(35px); box-shadow: none; } diff --git a/pages/concepts/agent-services/agent-hosting.mdx b/pages/concepts/agent-services/agent-hosting.mdx index 17e752e51..b4322a92f 100644 --- a/pages/concepts/agent-services/agent-hosting.mdx +++ b/pages/concepts/agent-services/agent-hosting.mdx @@ -1,4 +1,11 @@ import { Callout } from 'nextra/components' +import { ImageByTheme } from "components/mdx"; +import AnAgentForEveryone from 'src/images/an-agent-for-everyone.png'; +import DarkAnAgentForEveryone from 'src/images/dark-an-agent-for-everyone.svg'; +import ScalingHosting from 'src/images/scaling-hosting.png'; +import DarkScalingHosting from 'src/images/dark-scaling-hosting.svg'; +import HostingNameService1 from 'src/images/hosting-name-service_1.png'; +import DarkHostingNameService1 from 'src/images/dark-hosting-name-service_1.svg'; # Agentverse: My Agents @@ -8,7 +15,12 @@ The Agentverse My Agents tab enables all users to get quickly started and to dep With the world moving every increasingly towards an automated future where technology will play a greater central role in everyone's life, we will all require an agent to represent and help us in interacting and carry out operations with one other. -![](../../../src/images/an-agent-for-everyone.png) + + ## Deploy and run agents @@ -24,7 +36,12 @@ The **My Agents** section manages all the important steps about making sure that The **My Agents** section is designed to scale automatically with the number of messages that your agent receives. The benefit for you is that you do not have to carry the hassle of continuously deploying your agents, given that we run them for you using cloud technology. This means that your agents will continue running and receiving messages without the need of your presence for them to be deployed. Thus, as a developer, you can focus on making the most awesome agent code! -![](../../../src/images/scaling-hosting.png) + + ## Secure runtime @@ -40,4 +57,10 @@ An agent that only checks for an oracle value every 12 hours will be much cheape Hosted agents on the Agentverse can be given a human name so that you can find them faster, as can others for any type of development purposes. -![](../../../src/images/hosting-name-service_1.png) + + + diff --git a/pages/concepts/agent-services/agent-mail.mdx b/pages/concepts/agent-services/agent-mail.mdx index fbf46ac0e..2d133de90 100644 --- a/pages/concepts/agent-services/agent-mail.mdx +++ b/pages/concepts/agent-services/agent-mail.mdx @@ -1,4 +1,7 @@ import { Callout } from 'nextra/components' +import { ImageByTheme } from "components/mdx"; +import Mailroom from 'src/images/mailroom.png'; +import DarkMailroom from 'src/images/dark-mailroom.svg'; # Agentverse: Mailroom / IoT Gateway @@ -10,7 +13,11 @@ The **Agentverse Mailroom** is a service that allows you to set up mailboxes for The mailroom service also enables communication between agents registered in Agentverse and local agents: your local agents can access the APIs in the Agentverse to retrieve the information needed to communicate with the hosted agents registered in the Agentverse platform. -![](../../../src/images/mailroom.png) + ## Next steps diff --git a/pages/concepts/ai-engine/ai-engine-intro.mdx b/pages/concepts/ai-engine/ai-engine-intro.mdx index 3ea7eb101..60c0f78c9 100644 --- a/pages/concepts/ai-engine/ai-engine-intro.mdx +++ b/pages/concepts/ai-engine/ai-engine-intro.mdx @@ -1,5 +1,8 @@ import { Callout } from 'nextra/components' import PackageVersion from 'components/package-version' +import { ImageByTheme } from "components/mdx"; +import SystemDiagramAiEngine from 'src/images/concepts/ai-engine/system_diagram_ai_engine.png'; +import DarkSystemDiagramAiEngine from 'src/images/concepts/ai-engine/dark_system_diagram_ai_engine.svg'; # AI Engine @@ -7,7 +10,12 @@ import PackageVersion from 'components/package-version' The **AI Engine** is a system that combines [Agents ↗️](/concepts/agents/agents) with human-readable text input to create a scalable AI infrastructure that supports Large Language Models (LLMs). It is at the heart of [DeltaV ↗️](/concepts/ai-engine/deltav) and its functionalities. The goal of the AI Engine is to analyze, understand and link human input to agents by facilitating natural language interactions. The AI Engine reads user input, converts it into actionable tasks and selects the most appropriate AI agent registered in the Agentverse to perform the Objective Tasks provided by users. -![](../../../src/images/concepts/ai-engine/system_diagram_ai_engine.png) + + The AI Engine is characterized by a variety of different tasks. It is able to provide answers to complex queries and then carry out various actions, such as making a booking for a hotel. This is achieved through its ability to understand users' preferences and goals through **contextual understanding**. The AI Engine examines trends and turns random inputs into meaningful insights by evaluating previous interactions. When uncertainty comes into play, the AI Engine solicits feedback from the user to verify that its suggestions and recommendations match the user's end goal. In this way, the AI Engine actively anticipates the needs of users and adapts to them. We look forward to creating an ecosystem in which technology becomes an ally in achieving users' goals. diff --git a/pages/concepts/ai-engine/powering-connections-and-smart-operations-in-deltav.mdx b/pages/concepts/ai-engine/powering-connections-and-smart-operations-in-deltav.mdx index 5fcd0d1f9..73f791a3c 100644 --- a/pages/concepts/ai-engine/powering-connections-and-smart-operations-in-deltav.mdx +++ b/pages/concepts/ai-engine/powering-connections-and-smart-operations-in-deltav.mdx @@ -1,8 +1,21 @@ +import { ImageByTheme } from "components/mdx"; +import AiWithPersonalData from 'src/images/concepts/ai-engine/ai_with_personal_data.png'; +import DarkAiWithPersonalData from 'src/images/concepts/ai-engine/dark_ai_with_personal_data.svg'; +import HumanTextIn from 'src/images/concepts/ai-engine/human_text_in.png'; +import DarkHumanTextIn from 'src/images/concepts/ai-engine/dark_human_text_in.svg'; +import HotelTasksGoThroughTheEngineToRepresentativeAgents from 'src/images/concepts/ai-engine/hotel_tasks_go_through_the_engine_to_representative_agents.png'; +import DarkHotelTasksGoThroughTheEngineToRepresentativeAgents from 'src/images/concepts/ai-engine/dark_hotel_tasks_go_through_the_engine_to_representative_agents.svg'; + # Powering connections and smart operations in DeltaV The AI Engine stands at the core of [DeltaV ↗️](https://deltav.agentverse.ai/login) and its features, as it allows users and developers to connect to a wide range of agent-based [functions ↗️](/guides/agents/intermediate/agent-functions). Once an agent is [registered ↗️](/guides/agentverse/registering-agent-services), the offered Agent Function is visible to the AI Engine and it can start connecting users and Agent functionalities. -![](../../../src/images/concepts/ai-engine/ai_with_personal_data.png) + + This system is equipped with personalized capabilities, supported by an internal agent that performs tasks efficiently. An internal agent is created by the AI Engine and made available for communication via the DeltaV user interface. The AI Engine interprets the human text input provided to the agent and starts working asynchronously on your behalf as soon as it receives your intent. This customized method uses Large Language Models (LLMs), which are essential for improving the AI Engine's understanding, coordination and problem-solving capabilities. @@ -24,12 +37,20 @@ In this context, a **Primary function** refers to an agent function that provide ## Deconstructing tasks: context building and smart routing -![](../../../src/images/concepts/ai-engine/human_text_in.png) + Finding new information is a key focus of the AI Engine to significantly improve the user journey. This is crucial for the execution of Agent Functions, such as booking a hotel room for your holiday in a specific city. In an environment where reservations are centralized, this seems like a simple process. However, for the booking to be successful, the AI Engine must be able to understand the user's input and objectives and communicate with multiple agents. At this stage, the AI Engine's ability to **understand and plan** is very important: the user's goal is broken down into a series of smaller primary and secondary functions, each representing an integral step towards the desired end result. This coordination may be automatic, or in certain situations where the AI Engine is unsure, it may require user input to confirm the function selection. **Context building** plays a crucial role, allowing the AI Engine to continuously improve its understanding by transforming data. Context building is an ongoing process within the AI Engine that involves the continuous improvement of the knowledge base during the AI Engine session. In other words, context building is the continuous act of collecting and/or transforming new knowledge to complete a task. -![](../../../src/images/concepts/ai-engine/hotel_tasks_go_through_the_engine_to_representative_agents.png) + The final step of the AI Engine is **smart routing**, that is the ongoing process within the AI Engine that makes it aware of all registered Agents and Agent Function according to the objective for which they are best suited for. This process takes into account the context and past performance history of these agents to guide the AI Engine's decision-making process. In this way, the AI Engine selects the most suitable agents, taking into account the agents' functions and their past performance metrics. **Trust** becomes a key factor, favoring agents with a track record of reliable behavior. Smart routing not only ensures the completion of objectives, but also creates a sense of reliability and efficiency in the operations. diff --git a/pages/concepts/introducing-fetchai.mdx b/pages/concepts/introducing-fetchai.mdx index 3f8ff0888..9a456f163 100644 --- a/pages/concepts/introducing-fetchai.mdx +++ b/pages/concepts/introducing-fetchai.mdx @@ -1,3 +1,11 @@ +import { ImageByTheme } from "../../components/mdx"; +import HighLevelDiagram from 'src/images/concepts/about/High-level-system-diagram.png'; +import DarkHighLevelDiagram from 'src/images/concepts/about/Dark-high-level-system-diagram.svg'; +import AgentsInteracting from 'src/images/concepts/ai-agents/Agents_interacting.png'; +import DarkAgentsInteracting from 'src/images/concepts/ai-agents/Dark_agents_interacting.svg'; +import DecentralisedNetwork from 'src/images/concepts/ai-agents/decentralised_network.png'; +import DarkDecentralisedNetwork from 'src/images/concepts/ai-agents/Dark_decentralised_network.svg'; + # Introducing Fetch.ai: pioneering an AI powered decentralized digital economy **Fetch.ai** is developing a platform to enable the development of an AI empowered decentralized digital economy. _Agents_ are programs that can make choices on their own for individuals, companies, and devices. Agents are the actors, and the heart of Fetch.ai ecosystem. @@ -14,7 +22,11 @@ These services make up the core architecture of Fetch.ai Agents register to Almanac so that they can be discovered in the network by other agents. Agents may register their functions to Agentverse so that AI-Engine can index these agents so that they can be called by AI-Engine. The Fetch network offers a layer of truth and trust by inherently being open. -![](../../src/images/concepts/about/High-level-system-diagram.png) + ### Agents: the core @@ -25,14 +37,21 @@ Agents can come together to become multi-agent workflows, single agents which ca Agents are built with the **uAgents Framework**, a lightweight library designed to facilitate the development of decentralized **Agents**. At the uAgents core is an open sourced communication protocol for agents. -![](src/images/concepts/ai-agents/Agents_interacting.png) - + Agents can fundamentally change the way we see complicated systems. For example, supply chain management could deploy Agents using the uAgents Framework to improve operations at various stages. Demand forecasting, inventory control, logistics optimization, supplier relationships monitoring, quality control and risk mitigation in all areas can be done with their help. Agents could transform supply chain operations by increasing efficiency, reducing costs, improving accuracy and providing real-time visibility. These agents are the building blocks that allow developers to gain access to the tools and resources provided by the uAgents Framework, enabling them to create and participate in intelligent and self-managed systems that can be used in various real-world domains. -![](src/images/concepts/ai-agents/decentralised_network.png) + Agents can wrap and cannibalize LLMs to create personalized agents for any task. With the rise of Large Language Models (LLMs) and AI-related products, autonomous intelligent agents have become the link between these models and tools. They are revolutionizing the way we solve problems, make decisions and collaborate with each other. diff --git a/pages/guides/agents/getting-started/whats-an-agent.mdx b/pages/guides/agents/getting-started/whats-an-agent.mdx index 7e9d9cac5..9fd88c882 100644 --- a/pages/guides/agents/getting-started/whats-an-agent.mdx +++ b/pages/guides/agents/getting-started/whats-an-agent.mdx @@ -1,5 +1,10 @@ import { Callout } from 'nextra/components' import PackageVersion from 'components/package-version' +import { ImageByTheme } from "components/mdx" +import AgentsInteracting from 'src/images/concepts/ai-agents/Agents_interacting.png'; +import DarkAgentsInteracting from 'src/images/concepts/ai-agents/Dark_agents_interacting.svg'; +import DecentralisedNetwork from 'src/images/concepts/ai-agents/decentralised_network.png'; +import DarkDecentralisedNetwork from 'src/images/concepts/ai-agents/Dark_decentralised_network.svg'; # Agents - uAgents Framework @@ -13,7 +18,12 @@ The **uAgents Framework** is a lightweight library designed to facilitate the de Current version of the uAgents package is . -![](src/images/concepts/ai-agents/Agents_interacting.png) + + Agents are autonomous software program built using the uAgents framework and that can interact autonomously with other agents in a decentralized environment. These agents can operate in a decentralized manner, but their decentralization remains optional and dependent on individual preferences or needs. @@ -21,7 +31,11 @@ Intelligent agents can fundamentally change the way we see complicated systems. These agents are the basic building blocks that allow developers to gain access to the tools and resources provided by the uAgents Framework, enabling them to create and participate in intelligent and self-managed systems that can be used in various real-world domains. -![](src/images/concepts/ai-agents/decentralised_network.png) + ## Why Agents diff --git a/pages/guides/agents/intermediate/public-private-agents.mdx b/pages/guides/agents/intermediate/public-private-agents.mdx index aa3ff530c..aa98183c4 100644 --- a/pages/guides/agents/intermediate/public-private-agents.mdx +++ b/pages/guides/agents/intermediate/public-private-agents.mdx @@ -1,4 +1,7 @@ import { Callout } from 'nextra/components' +import { ImageByTheme } from "components/mdx" +import PublicAndPrivateAgents from 'src/images/concepts/ai-agents/public_and_private_agents.png' +import DarkPublicAndPrivateAgents from 'src/images/concepts/ai-agents/dark_public_and_private_agents.svg' # Public and private agents @@ -6,7 +9,12 @@ import { Callout } from 'nextra/components' Transparency is a fundamental principle in decentralized finance (DeFi) and blockchain systems. Within the Fetch.ai network, **users have the ability to determine the amount of information they wish to publish**. This is thanks to the ability for users to create Agents as either **public** or **private**, based on their **introspectivity** and **protocol exposure** through the [Agentverse ↗️](/concepts/agent-services/agentverse-intro) platform. -![](src/images/concepts/ai-agents/public_and_private_agents.png) + + This allows users to provide greater flexibility to Agents, creating a balance between transparency and privacy for every operation they perform on the network. diff --git a/src/images/concepts/about/Dark-high-level-system-diagram.svg b/src/images/concepts/about/Dark-high-level-system-diagram.svg new file mode 100644 index 000000000..dfc3b4c3b --- /dev/null +++ b/src/images/concepts/about/Dark-high-level-system-diagram.svg @@ -0,0 +1,129 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/concepts/ai-agents/Dark_agents_interacting.svg b/src/images/concepts/ai-agents/Dark_agents_interacting.svg new file mode 100644 index 000000000..6aacd3bb6 --- /dev/null +++ b/src/images/concepts/ai-agents/Dark_agents_interacting.svg @@ -0,0 +1,180 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/concepts/ai-agents/Dark_decentralised_network.svg b/src/images/concepts/ai-agents/Dark_decentralised_network.svg new file mode 100644 index 000000000..6cca8b866 --- /dev/null +++ b/src/images/concepts/ai-agents/Dark_decentralised_network.svg @@ -0,0 +1,162 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +restaurants + + + + + + + + + + + + + + + + + + + + + + + + + + + + +accomodations + + + + +parking + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/concepts/ai-agents/dark_public_and_private_agents.svg b/src/images/concepts/ai-agents/dark_public_and_private_agents.svg new file mode 100644 index 000000000..0e3125238 --- /dev/null +++ b/src/images/concepts/ai-agents/dark_public_and_private_agents.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/concepts/ai-engine/dark_ai_with_personal_data.svg b/src/images/concepts/ai-engine/dark_ai_with_personal_data.svg new file mode 100644 index 000000000..9ee8c2659 --- /dev/null +++ b/src/images/concepts/ai-engine/dark_ai_with_personal_data.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/concepts/ai-engine/dark_hotel_tasks_go_through_the_engine_to_representative_agents.svg b/src/images/concepts/ai-engine/dark_hotel_tasks_go_through_the_engine_to_representative_agents.svg new file mode 100644 index 000000000..ad61af066 --- /dev/null +++ b/src/images/concepts/ai-engine/dark_hotel_tasks_go_through_the_engine_to_representative_agents.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/concepts/ai-engine/dark_human_text_in.svg b/src/images/concepts/ai-engine/dark_human_text_in.svg new file mode 100644 index 000000000..3436f736a --- /dev/null +++ b/src/images/concepts/ai-engine/dark_human_text_in.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/concepts/ai-engine/dark_system_diagram_ai_engine.svg b/src/images/concepts/ai-engine/dark_system_diagram_ai_engine.svg new file mode 100644 index 000000000..dbfabd860 --- /dev/null +++ b/src/images/concepts/ai-engine/dark_system_diagram_ai_engine.svg @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/dark-an-agent-for-everyone.svg b/src/images/dark-an-agent-for-everyone.svg new file mode 100644 index 000000000..7a9b35df0 --- /dev/null +++ b/src/images/dark-an-agent-for-everyone.svg @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/dark-hosting-name-service_1.svg b/src/images/dark-hosting-name-service_1.svg new file mode 100644 index 000000000..31c2ef950 --- /dev/null +++ b/src/images/dark-hosting-name-service_1.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/dark-mailroom.svg b/src/images/dark-mailroom.svg new file mode 100644 index 000000000..8d9d56e54 --- /dev/null +++ b/src/images/dark-mailroom.svg @@ -0,0 +1,104 @@ + + + + + + +Mailroom + + + + + + + +3 requests +Daemon_542 + + + + + + + +3 requests +Ramon_2458 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/dark-scaling-hosting.svg b/src/images/dark-scaling-hosting.svg new file mode 100644 index 000000000..a1dbbf7fb --- /dev/null +++ b/src/images/dark-scaling-hosting.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles/globals.css b/styles/globals.css index 40a58fbbd..74e3b5293 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -2582,6 +2582,12 @@ span:target + .subheading-anchor:after { border-radius: 8px; } +:is(html[class~="dark"] .nextra-hover:hover) { + background: rgba(95, 56, 251, 0.2); + backdrop-filter: blur(35px); + color: #bfaffd; +} + .nextra-sidebar-ul { display: flex; padding: 0px 12px; @@ -4576,7 +4582,8 @@ div:hover > .\[div\:hover\>\&\]\:nx-opacity-100 { } :is(html[class~="dark"] .list-view:hover) { - background-color: #363841; + background: rgba(95, 56, 251, 0.2); + backdrop-filter: blur(35px); color: #bfaffd; } @@ -4793,7 +4800,8 @@ div:hover > .\[div\:hover\>\&\]\:nx-opacity-100 { } :is(html[class~="dark"] .link-hover) { - background: #363841; + background: rgba(95, 56, 251, 0.2); + backdrop-filter: blur(35px); } .link-text { @@ -5057,7 +5065,8 @@ div:hover > .\[div\:hover\>\&\]\:nx-opacity-100 { } :is(html[class~="dark"] .nextra-nav-icon-wrapper:hover) { - background: #363841; + background: rgba(95, 56, 251, 0.2); + backdrop-filter: blur(35px); } .nextra-nav-icon-wrapper { @@ -5263,6 +5272,12 @@ div:hover > .\[div\:hover\>\&\]\:nx-opacity-100 { color: #5f38fb; } +:is(html[class~="dark"] .tags:hover) { + background: rgba(95, 56, 251, 0.2); + backdrop-filter: blur(35px); + color: #bfaffd; +} + .toggle-view { border-radius: 8px; border: 1px solid #b9c5d4; @@ -5333,3 +5348,25 @@ div:hover > .\[div\:hover\>\&\]\:nx-opacity-100 { :is(html[class~="dark"] .tag-description) { color: #d2d3d5; } + +.grid-container-tag { + display: grid; + grid-template-columns: repeat(4, 1fr); +} + +@media (max-width: 1504px) { + .grid-container-tag { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 698px) { + .grid-container-tag { + grid-template-columns: repeat(2, 1fr); + } +} +@media (max-width: 487px) { + .grid-container-tag { + grid-template-columns: 1fr; + } +} diff --git a/theme/fetch-ai-docs/components/matching-tag-routes.tsx b/theme/fetch-ai-docs/components/matching-tag-routes.tsx index 8cbe5845e..4338e0e33 100644 --- a/theme/fetch-ai-docs/components/matching-tag-routes.tsx +++ b/theme/fetch-ai-docs/components/matching-tag-routes.tsx @@ -192,7 +192,7 @@ export function MatchingRoutesComponent({ ) : (
-
+
{matchedRoutes.map((routeInfo, index) => { const guideInfo = findGuideByPath(content, routeInfo.route); return ( diff --git a/theme/fetch-ai-docs/components/navbar.tsx b/theme/fetch-ai-docs/components/navbar.tsx index 290fadfd6..932be9da7 100644 --- a/theme/fetch-ai-docs/components/navbar.tsx +++ b/theme/fetch-ai-docs/components/navbar.tsx @@ -7,12 +7,9 @@ import type { ReactElement, ReactNode } from "react"; import { useConfig, useMenu } from "../contexts"; import { renderComponent } from "../utils"; import { Anchor } from "./anchor"; -import { useState } from "react"; -import React from "react"; -import { useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; import { Gear } from "src/icons/shared-icons"; -import { useRef } from "react"; -import { ThemeSwitcher } from ".."; +import { ThemeSwitcher } from "./theme-switcher"; export type NavBarProps = { flatDirectories: Item[]; @@ -105,6 +102,8 @@ export function Navbar({ flatDirectories, items }: NavBarProps): ReactElement { }; }, [dropdownRef]); + const handleOpenClose = () => setOpenOs((prev) => !prev); + return (
-
- setOpenOs((prev) => !prev)} /> +
+ {openOs && ( -
+
)} diff --git a/theme/fetch-ai-docs/components/sidebar.tsx b/theme/fetch-ai-docs/components/sidebar.tsx index 88ebf19a3..fdca4fad4 100644 --- a/theme/fetch-ai-docs/components/sidebar.tsx +++ b/theme/fetch-ai-docs/components/sidebar.tsx @@ -46,7 +46,7 @@ const classes = { ), inactive: cn( "nextra-hover", - "dark:nx-text-white-60 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50", + "dark:nx-text-white-60", "contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50", "contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50", ),