@redocly/theme 0.59.0-next.0 → 0.59.0-next.1

package/src/icons/RedoclyIcon/RedoclyIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_4053_1165)">
+      <path
+        d="M14.625 6.19973C14.625 8.69176 12.6173 10.712 10.1406 10.712H2.8125V10.2717C5.04753 10.2717 6.85938 8.44864 6.85938 6.19973C6.85938 3.95082 5.04753 2.12772 2.8125 2.12772V1.6875H10.1406C12.6173 1.6875 14.625 3.70769 14.625 6.19973Z"
+        fill="#2467F2"
+      />
+      <path
+        d="M14.625 16.875C14.625 14.383 12.6173 12.3628 10.1406 12.3628H2.8125V12.803C5.04753 12.803 6.85938 14.6261 6.85938 16.875H14.625Z"
+        fill="#2467F2"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4053_1165">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const RedoclyIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/RedoclyIcon/RedoclyIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -32,6 +32,7 @@ export * from '@redocly/theme/components/Buttons/CopyButton';
 export * from '@redocly/theme/components/Buttons/EditPageButton';
 export * from '@redocly/theme/components/Buttons/EmailButton';
 export * from '@redocly/theme/components/Buttons/NewTabButton';
+export * from '@redocly/theme/components/Buttons/AIAssistantButton';
 /* Markdown */
 export * from '@redocly/theme/components/Markdown/Markdown';
 export * from '@redocly/theme/components/Markdown/styles/baseTable';
@@ -282,6 +283,7 @@ export * from '@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon';
 export * from '@redocly/theme/icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 export * from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from '@redocly/theme/icons/RedoclyIcon/RedoclyIcon';
 export * from '@redocly/theme/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from '@redocly/theme/icons/GenericIcon/GenericIcon';
 export * from '@redocly/theme/icons/ShareIcon/ShareIcon';

package/src/layouts/RootLayout.tsx

@@ -5,18 +5,24 @@ import type { JSX } from 'react';
 import { Navbar } from '@redocly/theme/components/Navbar/Navbar';
 import { Footer } from '@redocly/theme/components/Footer/Footer';
 import { SkipContent } from '@redocly/theme/components/SkipContent/SkipContent';
+import { AIAssistantButton } from '@redocly/theme/components/Buttons/AIAssistantButton';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type LayoutConfig = {
   children: React.ReactNode;
 };
 
 export function RootLayout({ children }: LayoutConfig): JSX.Element {
+  const { useSearch } = useThemeHooks();
+  const { askAi } = useSearch();
+
   return (
     <div data-component-name="layouts/RootLayout">
       <SkipContent />
       <Navbar />
       {children}
       <Footer />
+      {askAi && <AIAssistantButton />}
     </div>
   );
 }