refactor(docs): upgrade and fix issues (CopilotKit#2811)

Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>

Author: tylerslaton

docs/components/react/coagents/coagents-diagram.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export const CoAgentsDiagram: React.FC = (): JSX.Element => {
+export const CoAgentsDiagram: React.FC = () => {
   return (
     <div className="flex flex-col items-center">
       <div className="flex items-center">
@@ -21,7 +21,7 @@ interface DiagramNodeProps {
   variant?: 'default' | 'colored';
 }
 
-const DiagramNode: React.FC<DiagramNodeProps> = ({ title, variant = 'default' }): JSX.Element => {
+const DiagramNode: React.FC<DiagramNodeProps> = ({ title, variant = 'default' }) => {
   const bgColor = variant === 'colored' 
     ? "bg-blue-100 dark:bg-blue-900" 
     : "bg-gray-50 dark:bg-neutral-900";
@@ -33,7 +33,7 @@ const DiagramNode: React.FC<DiagramNodeProps> = ({ title, variant = 'default' })
   );
 };
 
-const DiagramArrow: React.FC = (): JSX.Element => {
+const DiagramArrow: React.FC = () => {
   return (
     <div className="mx-2">
       <svg

docs/components/react/frame.tsx

@@ -14,15 +14,17 @@ export function Frame({
       <div
         className={`flex space-x-4 w-full mx-auto justify-center ${className}`}
       >
-        {React.Children.map(children, (child) =>
-          React.isValidElement(child)
-            ? React.cloneElement(child as React.ReactElement<any>, {
-                className: `border border-foreground-muted rounded-md shadow-lg ${
-                  child.props.className || ""
-                }`,
-              })
-            : child
-        )}
+        {React.Children.map(children, (child) => {
+          if (React.isValidElement(child)) {
+            const element = child as React.ReactElement<any>;
+            return React.cloneElement(element, {
+              className: `border border-foreground-muted rounded-md shadow-lg ${
+                element.props.className || ""
+              }`,
+            });
+          }
+          return child;
+        })}
       </div>
       {description && <p className="text-sm text-neutral-500 text-center">{description}</p>}
     </>

docs/components/react/multi-provider-content/multi-provider-content.tsx

@@ -105,8 +105,9 @@ export function Interpolate({ children }: { children: React.ReactNode; }) {
 
             // Handle React elements
             if (isValidElement(element)) {
-                const processedChildren = React.Children.map(element.props.children, processElement);
-                return React.cloneElement(element, { ...element.props, children: processedChildren });
+                const reactElement = element as React.ReactElement<any>;
+                const processedChildren = React.Children.map(reactElement.props.children, processElement);
+                return React.cloneElement(reactElement, { ...reactElement.props, children: processedChildren });
             }
 
             // Handle arrays

docs/components/react/tailored-content.tsx

@@ -81,7 +81,7 @@ export function TailoredContent({ children, className, defaultOptionIndex = 0, i
             >
               <div className="my-0">
                 {React.isValidElement(option.props.icon)
-                  ? React.cloneElement(option.props.icon as React.ReactElement, {
+                  ? React.cloneElement(option.props.icon as React.ReactElement<any>, {
                       className: cn(iconCn, selectedIndex === index, "my-0"),
                     })
                   : (

docs/content/docs/agno/generative-ui/backend-tools.mdx

@@ -65,7 +65,6 @@ when your agent is calling tools. CopilotKit allows you to fully customize how t
             tools=[get_weather], # [!code highlight]
             description="A helpful assistant that can answer questions and provide information.",
             instructions="Be helpful and friendly. Format your responses using markdown where appropriate.",
-            show_tool_calls=True,
         )
         ```
     </Tab>

docs/content/docs/aws-strands/generative-ui/agentic.mdx

@@ -39,7 +39,7 @@ is a situation where a user and an agent are working together to solve a problem
     Configure your Strands agent to maintain state. Here's an example that tracks searches:
 
     ```python title="agent/my_agent.py"
-    from aws_strands import Agent, Tool
+    from strands import Agent, Tool
     from typing import TypedDict, List
 
     # Define the agent state schema

docs/content/docs/aws-strands/index.mdx

@@ -4,7 +4,7 @@ icon: "custom/awsStrands"
 description: Bring your AWS Strands agents to your users with CopilotKit via AG-UI.
 hideHeader: true
 ---
-import { AwsStrandsIcon } from "/lib/icons/custom-icons";
+import { AwsStrandsIcon } from "@/lib/icons/custom-icons";
 import { FrameworkOverview } from "@/components/content/landing-pages/framework-overview";
 
 <FrameworkOverview

docs/content/docs/aws-strands/shared-state/in-app-agent-read.mdx

@@ -42,7 +42,7 @@ state updates, you can reflect these updates natively in your application.
     Define your agent's state schema. AWS Strands maintains state throughout execution.
 
     ```python title="agent/my_agent.py"
-    from aws_strands import Agent
+    from strands import Agent
     from typing import TypedDict
 
     # 1. Define the agent state schema

docs/content/docs/aws-strands/shared-state/in-app-agent-write.mdx

@@ -41,7 +41,7 @@ You can use this when you want to provide user input or control to your agent's
     Define your agent's state schema. AWS Strands maintains state throughout execution.
 
     ```python title="agent/my_agent.py"
-    from aws_strands import Agent
+    from strands import Agent
     from typing import TypedDict
 
     # 1. Define the agent state schema

docs/eslint.config.mjs

@@ -0,0 +1,18 @@
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import nextTypescript from "eslint-config-next/typescript";
+
+const eslintConfig = [
+  ...nextCoreWebVitals,
+  ...nextTypescript,
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;