skills/copilotkit__copilotkit
1
0
Fork 0
mirror of https://github.com/CopilotKit/CopilotKit.git synced 2026-09-14 16:26:20 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
fix/langgraph-python-context-propagation
copilotkit__copilotkit/docs/components/ui/integrations-sidebar/skeleton.tsx
T
Alem Tuzlak 7b838547a9 feat: re-architeture the monorepo setup (#3187)
2026-02-13 11:01:44 +01:00

486 lines
20 KiB
TypeScript
Raw Permalink Blame History

import { useState, useEffect } from "react";
const IntegrationSelectorSkeleton = () => {
const [isDark, setIsDark] = useState(false);
useEffect(() => {
const checkTheme = () => {
setIsDark(document.documentElement.classList.contains("dark"));
};
checkTheme();
const observer = new MutationObserver(checkTheme);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"],
});
return () => observer.disconnect();
}, []);
return (
<div className="relative mt-3 w-full">
<div className="absolute z-20 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-4 rounded-lg dark:border dark:border-[#8387FF4D] bg-[#BEC2FF4D] dark:bg-[#6972FF1A] w-full">
<p className="text-xs text-[#484ECF] dark:text-[#C4C6FF] font-medium">
See what CopilotKit and your chosen agentic backend can do.
</p>
</div>
<div className="animate-pulse">
{isDark ? (
<svg
width="236"
height="476"
viewBox="0 0 236 476"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 4C4 1.79086 5.79086 0 8 0H111C113.209 0 115 1.79086 115 4V12C115 14.2091 113.209 16 111 16H8C5.79086 16 4 14.2091 4 12V4Z"
fill="url(#paint0_linear_6714_25035)"
/>
<path d="M123 8H232" stroke="white" strokeOpacity="0.1" />
<path
d="M0 40C0 37.7909 1.79086 36 4 36H192C194.209 36 196 37.7909 196 40V54C196 56.2091 194.209 58 192 58H4C1.79086 58 0 56.2091 0 54V40Z"
fill="url(#paint1_linear_6714_25035)"
/>
<path
d="M0 78C0 75.7909 1.79086 74 4 74H149C151.209 74 153 75.7909 153 78V92C153 94.2091 151.209 96 149 96H4C1.79086 96 0 94.2091 0 92V78Z"
fill="url(#paint2_linear_6714_25035)"
/>
<path
d="M0 116C0 113.791 1.79086 112 4 112H170C172.209 112 174 113.791 174 116V130C174 132.209 172.209 134 170 134H4C1.79086 134 0 132.209 0 130V116Z"
fill="url(#paint3_linear_6714_25035)"
/>
<path
d="M0 154C0 151.791 1.79086 150 4 150H215C217.209 150 219 151.791 219 154V168C219 170.209 217.209 172 215 172H4C1.79086 172 0 170.209 0 168V154Z"
fill="url(#paint4_linear_6714_25035)"
/>
<path
d="M0 192C0 189.791 1.79086 188 4 188H192C194.209 188 196 189.791 196 192V206C196 208.209 194.209 210 192 210H4C1.79086 210 0 208.209 0 206V192Z"
fill="url(#paint5_linear_6714_25035)"
/>
<path
d="M0 230C0 227.791 1.79086 226 4 226H149C151.209 226 153 227.791 153 230V244C153 246.209 151.209 248 149 248H4C1.79086 248 0 246.209 0 244V230Z"
fill="url(#paint6_linear_6714_25035)"
/>
<path
d="M0 268C0 265.791 1.79086 264 4 264H170C172.209 264 174 265.791 174 268V282C174 284.209 172.209 286 170 286H4C1.79086 286 0 284.209 0 282V268Z"
fill="url(#paint7_linear_6714_25035)"
/>
<path
d="M0 306C0 303.791 1.79086 302 4 302H215C217.209 302 219 303.791 219 306V320C219 322.209 217.209 324 215 324H4C1.79086 324 0 322.209 0 320V306Z"
fill="url(#paint8_linear_6714_25035)"
/>
<path
opacity="0.8"
d="M0 344C0 341.791 1.79086 340 4 340H192C194.209 340 196 341.791 196 344V358C196 360.209 194.209 362 192 362H4C1.79086 362 0 360.209 0 358V344Z"
fill="url(#paint9_linear_6714_25035)"
/>
<path
opacity="0.6"
d="M0 382C0 379.791 1.79086 378 4 378H149C151.209 378 153 379.791 153 382V396C153 398.209 151.209 400 149 400H4C1.79086 400 0 398.209 0 396V382Z"
fill="url(#paint10_linear_6714_25035)"
/>
<path
opacity="0.4"
d="M0 420C0 417.791 1.79086 416 4 416H170C172.209 416 174 417.791 174 420V434C174 436.209 172.209 438 170 438H4C1.79086 438 0 436.209 0 434V420Z"
fill="url(#paint11_linear_6714_25035)"
/>
<path
opacity="0.2"
d="M0 458C0 455.791 1.79086 454 4 454H215C217.209 454 219 455.791 219 458V472C219 474.209 217.209 476 215 476H4C1.79086 476 0 474.209 0 472V458Z"
fill="url(#paint12_linear_6714_25035)"
/>
<defs>
<linearGradient
id="paint0_linear_6714_25035"
x1="4"
y1="8"
x2="115"
y2="8"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0.08" />
<stop offset="0.5" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint1_linear_6714_25035"
x1="0"
y1="47"
x2="196"
y2="47"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0.08" />
<stop offset="0.5" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint2_linear_6714_25035"
x1="0"
y1="85"
x2="153"
y2="85"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0.08" />
<stop offset="0.5" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint3_linear_6714_25035"
x1="0"
y1="123"
x2="174"
y2="123"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0.08" />
<stop offset="0.5" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint4_linear_6714_25035"
x1="0"
y1="161"
x2="219"
y2="161"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0.08" />
<stop offset="0.5" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint5_linear_6714_25035"
x1="0"
y1="199"
x2="196"
y2="199"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0.08" />
<stop offset="0.5" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint6_linear_6714_25035"
x1="0"
y1="237"
x2="153"
y2="237"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0.08" />
<stop offset="0.5" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint7_linear_6714_25035"
x1="0"
y1="275"
x2="174"
y2="275"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0.08" />
<stop offset="0.5" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint8_linear_6714_25035"
x1="0"
y1="313"
x2="219"
y2="313"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0.08" />
<stop offset="0.5" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint9_linear_6714_25035"
x1="0"
y1="351"
x2="196"
y2="351"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0.08" />
<stop offset="0.5" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint10_linear_6714_25035"
x1="0"
y1="389"
x2="153"
y2="389"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0.08" />
<stop offset="0.5" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint11_linear_6714_25035"
x1="0"
y1="427"
x2="174"
y2="427"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0.08" />
<stop offset="0.5" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint12_linear_6714_25035"
x1="0"
y1="465"
x2="219"
y2="465"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0.08" />
<stop offset="0.5" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" stopOpacity="0.08" />
</linearGradient>
</defs>
</svg>
) : (
<svg
width="236"
height="476"
viewBox="0 0 236 476"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 4C4 1.79086 5.79086 0 8 0H111C113.209 0 115 1.79086 115 4V12C115 14.2091 113.209 16 111 16H8C5.79086 16 4 14.2091 4 12V4Z"
fill="url(#paint0_linear_6714_22141)"
/>
<path d="M123 8H232" stroke="#010507" strokeOpacity="0.1" />
<path
d="M0 40C0 37.7909 1.79086 36 4 36H192C194.209 36 196 37.7909 196 40V54C196 56.2091 194.209 58 192 58H4C1.79086 58 0 56.2091 0 54V40Z"
fill="url(#paint1_linear_6714_22141)"
/>
<path
d="M0 78C0 75.7909 1.79086 74 4 74H149C151.209 74 153 75.7909 153 78V92C153 94.2091 151.209 96 149 96H4C1.79086 96 0 94.2091 0 92V78Z"
fill="url(#paint2_linear_6714_22141)"
/>
<path
d="M0 116C0 113.791 1.79086 112 4 112H170C172.209 112 174 113.791 174 116V130C174 132.209 172.209 134 170 134H4C1.79086 134 0 132.209 0 130V116Z"
fill="url(#paint3_linear_6714_22141)"
/>
<path
d="M0 154C0 151.791 1.79086 150 4 150H215C217.209 150 219 151.791 219 154V168C219 170.209 217.209 172 215 172H4C1.79086 172 0 170.209 0 168V154Z"
fill="url(#paint4_linear_6714_22141)"
/>
<path
d="M0 192C0 189.791 1.79086 188 4 188H192C194.209 188 196 189.791 196 192V206C196 208.209 194.209 210 192 210H4C1.79086 210 0 208.209 0 206V192Z"
fill="url(#paint5_linear_6714_22141)"
/>
<path
d="M0 230C0 227.791 1.79086 226 4 226H149C151.209 226 153 227.791 153 230V244C153 246.209 151.209 248 149 248H4C1.79086 248 0 246.209 0 244V230Z"
fill="url(#paint6_linear_6714_22141)"
/>
<path
d="M0 268C0 265.791 1.79086 264 4 264H170C172.209 264 174 265.791 174 268V282C174 284.209 172.209 286 170 286H4C1.79086 286 0 284.209 0 282V268Z"
fill="url(#paint7_linear_6714_22141)"
/>
<path
d="M0 306C0 303.791 1.79086 302 4 302H215C217.209 302 219 303.791 219 306V320C219 322.209 217.209 324 215 324H4C1.79086 324 0 322.209 0 320V306Z"
fill="url(#paint8_linear_6714_22141)"
/>
<path
opacity="0.8"
d="M0 344C0 341.791 1.79086 340 4 340H192C194.209 340 196 341.791 196 344V358C196 360.209 194.209 362 192 362H4C1.79086 362 0 360.209 0 358V344Z"
fill="url(#paint9_linear_6714_22141)"
/>
<path
opacity="0.6"
d="M0 382C0 379.791 1.79086 378 4 378H149C151.209 378 153 379.791 153 382V396C153 398.209 151.209 400 149 400H4C1.79086 400 0 398.209 0 396V382Z"
fill="url(#paint10_linear_6714_22141)"
/>
<path
opacity="0.4"
d="M0 420C0 417.791 1.79086 416 4 416H170C172.209 416 174 417.791 174 420V434C174 436.209 172.209 438 170 438H4C1.79086 438 0 436.209 0 434V420Z"
fill="url(#paint11_linear_6714_22141)"
/>
<path
opacity="0.2"
d="M0 458C0 455.791 1.79086 454 4 454H215C217.209 454 219 455.791 219 458V472C219 474.209 217.209 476 215 476H4C1.79086 476 0 474.209 0 472V458Z"
fill="url(#paint12_linear_6714_22141)"
/>
<defs>
<linearGradient
id="paint0_linear_6714_22141"
x1="4"
y1="8"
x2="115"
y2="8"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#010507" stopOpacity="0.08" />
<stop offset="0.5" stopColor="#010507" stopOpacity="0" />
<stop offset="1" stopColor="#010507" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint1_linear_6714_22141"
x1="0"
y1="47"
x2="196"
y2="47"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#010507" stopOpacity="0.08" />
<stop offset="0.5" stopColor="#010507" stopOpacity="0" />
<stop offset="1" stopColor="#010507" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint2_linear_6714_22141"
x1="0"
y1="85"
x2="153"
y2="85"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#010507" stopOpacity="0.08" />
<stop offset="0.5" stopColor="#010507" stopOpacity="0" />
<stop offset="1" stopColor="#010507" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint3_linear_6714_22141"
x1="0"
y1="123"
x2="174"
y2="123"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#010507" stopOpacity="0.08" />
<stop offset="0.5" stopColor="#010507" stopOpacity="0" />
<stop offset="1" stopColor="#010507" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint4_linear_6714_22141"
x1="0"
y1="161"
x2="219"
y2="161"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#010507" stopOpacity="0.08" />
<stop offset="0.5" stopColor="#010507" stopOpacity="0" />
<stop offset="1" stopColor="#010507" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint5_linear_6714_22141"
x1="0"
y1="199"
x2="196"
y2="199"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#010507" stopOpacity="0.08" />
<stop offset="0.5" stopColor="#010507" stopOpacity="0" />
<stop offset="1" stopColor="#010507" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint6_linear_6714_22141"
x1="0"
y1="237"
x2="153"
y2="237"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#010507" stopOpacity="0.08" />
<stop offset="0.5" stopColor="#010507" stopOpacity="0" />
<stop offset="1" stopColor="#010507" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint7_linear_6714_22141"
x1="0"
y1="275"
x2="174"
y2="275"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#010507" stopOpacity="0.08" />
<stop offset="0.5" stopColor="#010507" stopOpacity="0" />
<stop offset="1" stopColor="#010507" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint8_linear_6714_22141"
x1="0"
y1="313"
x2="219"
y2="313"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#010507" stopOpacity="0.08" />
<stop offset="0.5" stopColor="#010507" stopOpacity="0" />
<stop offset="1" stopColor="#010507" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint9_linear_6714_22141"
x1="0"
y1="351"
x2="196"
y2="351"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#010507" stopOpacity="0.08" />
<stop offset="0.5" stopColor="#010507" stopOpacity="0" />
<stop offset="1" stopColor="#010507" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint10_linear_6714_22141"
x1="0"
y1="389"
x2="153"
y2="389"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#010507" stopOpacity="0.08" />
<stop offset="0.5" stopColor="#010507" stopOpacity="0" />
<stop offset="1" stopColor="#010507" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint11_linear_6714_22141"
x1="0"
y1="427"
x2="174"
y2="427"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#010507" stopOpacity="0.08" />
<stop offset="0.5" stopColor="#010507" stopOpacity="0" />
<stop offset="1" stopColor="#010507" stopOpacity="0.08" />
</linearGradient>
<linearGradient
id="paint12_linear_6714_22141"
x1="0"
y1="465"
x2="219"
y2="465"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#010507" stopOpacity="0.08" />
<stop offset="0.5" stopColor="#010507" stopOpacity="0" />
<stop offset="1" stopColor="#010507" stopOpacity="0.08" />
</linearGradient>
</defs>
</svg>
)}
</div>
</div>
);
};
export default IntegrationSelectorSkeleton;
Reference in New Issue View Git Blame Copy Permalink