@redocly/theme 0.45.5 → 0.45.7

package/lib/components/Search/SearchAiResponse.js

@@ -12,16 +12,19 @@ const DocumentIcon_1 = require("../../icons/DocumentIcon/DocumentIcon");
 const Tag_1 = require("../../components/Tag/Tag");
 const Link_1 = require("../../components/Link/Link");
 const hooks_1 = require("../../core/hooks");
+const Markdown_1 = require("../../components/Markdown/Markdown");
 function SearchAiResponse(props) {
+    const { useMarkdownText } = (0, hooks_1.useThemeHooks)();
     const { question, response, isGeneratingResponse, resources } = props;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    return (react_1.default.createElement(ResponseWrapper, { "data-component-name": "Search/AiResponse" },
+    const markdownResponse = useMarkdownText(response || '');
+    return (react_1.default.createElement(ResponseWrapper, { "data-component-name": "Search/SearchAiResponse" },
         react_1.default.createElement(ResponseHeader, null,
             isGeneratingResponse ? (react_1.default.createElement(Spinner_1.Spinner, { size: "20px", color: "--search-ai-spinner-icon-color" })) : (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { size: "20px", color: "--search-ai-checkmark-icon-color" })),
             react_1.default.createElement(Question, null, question)),
         react_1.default.createElement(ResponseBody, null,
-            response ? (react_1.default.createElement(ResponseText, null, response)) : (react_1.default.createElement(ThinkingResponseText, { "data-translation-key": "search.ai.thinkingText" }, translate('search.ai.thinkingText', 'Thinking...'))),
+            response ? (react_1.default.createElement(ResponseText, Object.assign({ children: markdownResponse, as: "div" }, props))) : (react_1.default.createElement(ThinkingResponseText, { "data-translation-key": "search.ai.thinkingText" }, translate('search.ai.thinkingText', 'Thinking...'))),
             resources.length && !isGeneratingResponse ? (react_1.default.createElement(Resources, null,
                 react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
                     resources.length,
@@ -58,14 +61,20 @@ const ResponseBody = styled_components_1.default.div `
   gap: var(--search-ai-response-body-gap);
   padding: var(--search-ai-response-body-padding);
 `;
-const ResponseText = styled_components_1.default.pre `
+const ResponseText = (0, styled_components_1.default)(Markdown_1.Markdown) `
   color: var(--search-ai-response-text-color);
   font-size: var(--search-ai-response-text-font-size);
   line-height: var(--search-ai-response-text-line-height);
   font-family: inherit;
   white-space: break-spaces;
 `;
-const ThinkingResponseText = (0, styled_components_1.default)(ResponseText) `
+const ThinkingResponseText = styled_components_1.default.pre `
+  color: var(--search-ai-response-text-color);
+  font-size: var(--search-ai-response-text-font-size);
+  line-height: var(--search-ai-response-text-line-height);
+  font-family: inherit;
+  white-space: break-spaces;
+  margin: var(--md-pre-margin) 0;
   animation: fadeIn 2s ease-in-out infinite;
 
   @keyframes fadeIn {

package/lib/components/Search/SearchDialog.js

@@ -167,13 +167,20 @@ const SearchDialogWrapper = styled_components_1.default.div `
   box-shadow: var(--search-modal-box-shadow);
   border-radius: 0;
 
+  @media screen and (max-width: ${utils_1.breakpoints.small}) {
+    /* Ignore resize on mobile */
+    width: 100vw !important;
+    height: 100vh !important;
+  }
+
   @media screen and (min-width: ${utils_1.breakpoints.small}) {
     border-radius: var(--search-modal-border-radius);
     width: var(--search-modal-width);
     min-height: var(--search-modal-min-height);
+    min-width: var(--search-modal-min-width);
     max-width: 95vw;
     max-height: 95vh;
-    height: auto;
+    height: var(--search-modal-min-height);
     resize: both;
   }
 `;
@@ -188,10 +195,7 @@ const SearchDialogBody = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
   flex-grow: 1;
-
-  @media screen and (min-width: ${utils_1.breakpoints.small}) {
-    height: var(--search-modal-min-height);
-  }
+  overflow: hidden;
 `;
 const SearchDialogBodyMainView = styled_components_1.default.div `
   flex: 2;

package/lib/components/Search/variables.js

@@ -7,6 +7,7 @@ exports.search = (0, styled_components_1.css) `
     * @tokens Search
     */
   --search-modal-width: 1100px;
+  --search-modal-min-width: 460px;
   --search-modal-min-height: 705px;
   --search-modal-bg-color: var(--modal-bg-color);
   --search-modal-box-shadow: var(--modal-box-shadow);

package/lib/core/hooks/__mocks__/use-theme-hooks.d.ts

@@ -44,6 +44,7 @@ export declare const useThemeHooks: jest.Mock<{
         setSearchFacet: jest.Mock<any, any, any>;
         setSearchFacetQuery: jest.Mock<any, any, any>;
     }, [], any>;
+    useMarkdownText: jest.Mock<null, [], any>;
     useUserMenu: jest.Mock<{
         userData: {
             isAuthenticated: boolean;

package/lib/core/hooks/__mocks__/use-theme-hooks.js

@@ -52,6 +52,9 @@ exports.useThemeHooks = jest.fn(() => ({
         setSearchFacet: jest.fn(),
         setSearchFacetQuery: jest.fn(),
     })),
+    useMarkdownText: jest.fn(() => {
+        return null;
+    }),
     useUserMenu: jest.fn(() => ({
         userData: {
             isAuthenticated: true,

package/lib/core/types/hooks.d.ts

@@ -70,6 +70,7 @@ export type ThemeHooks = {
             url: string;
         }[];
     };
+    useMarkdownText: (text: string) => React.ReactNode;
     useFacetQuery: (field: string) => {
         searchFacet: SearchFacet | null;
         setSearchFacet: React.Dispatch<React.SetStateAction<SearchFacet | null>>;

package/lib/index.d.ts

@@ -117,6 +117,7 @@ export * from './components/Search/SearchFilter';
 export * from './components/Search/SearchFilterField';
 export * from './components/Search/FilterFields/SearchFilterFieldSelect';
 export * from './components/Search/FilterFields/SearchFilterFieldTags';
+export * from './components/Search/SearchAiResponse';
 export * from './icons/ArrowRightIcon/ArrowRightIcon';
 export * from './icons/ArrowUpRightIcon/ArrowUpRightIcon';
 export * from './icons/ArrowLeftIcon/ArrowLeftIcon';

package/lib/index.js

@@ -168,6 +168,7 @@ __exportStar(require("./components/Search/SearchFilter"), exports);
 __exportStar(require("./components/Search/SearchFilterField"), exports);
 __exportStar(require("./components/Search/FilterFields/SearchFilterFieldSelect"), exports);
 __exportStar(require("./components/Search/FilterFields/SearchFilterFieldTags"), exports);
+__exportStar(require("./components/Search/SearchAiResponse"), exports);
 /* Icons */
 __exportStar(require("./icons/ArrowRightIcon/ArrowRightIcon"), exports);
 __exportStar(require("./icons/ArrowUpRightIcon/ArrowUpRightIcon"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.45.5",
+  "version": "0.45.7",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "timeago.js": "4.0.2",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
-    "@redocly/config": "0.16.0"
+    "@redocly/config": "0.17.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Search/SearchAiResponse.tsx

@@ -7,6 +7,7 @@ import { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
 
 export type SearchAiResponseProps = {
   question: string;
@@ -19,13 +20,15 @@ export type SearchAiResponseProps = {
 };
 
 export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
+  const { useMarkdownText } = useThemeHooks();
   const { question, response, isGeneratingResponse, resources } = props;
 
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
+  const markdownResponse = useMarkdownText(response || '');
 
   return (
-    <ResponseWrapper data-component-name="Search/AiResponse">
+    <ResponseWrapper data-component-name="Search/SearchAiResponse">
       <ResponseHeader>
         {isGeneratingResponse ? (
           <Spinner size="20px" color="--search-ai-spinner-icon-color" />
@@ -36,7 +39,7 @@ export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
       </ResponseHeader>
       <ResponseBody>
         {response ? (
-          <ResponseText>{response}</ResponseText>
+          <ResponseText children={markdownResponse} as="div" {...props} />
         ) : (
           <ThinkingResponseText data-translation-key="search.ai.thinkingText">
             {translate('search.ai.thinkingText', 'Thinking...')}
@@ -98,7 +101,7 @@ const ResponseBody = styled.div`
   padding: var(--search-ai-response-body-padding);
 `;
 
-const ResponseText = styled.pre`
+const ResponseText = styled(Markdown)`
   color: var(--search-ai-response-text-color);
   font-size: var(--search-ai-response-text-font-size);
   line-height: var(--search-ai-response-text-line-height);
@@ -106,7 +109,13 @@ const ResponseText = styled.pre`
   white-space: break-spaces;
 `;
 
-const ThinkingResponseText = styled(ResponseText)`
+const ThinkingResponseText = styled.pre`
+  color: var(--search-ai-response-text-color);
+  font-size: var(--search-ai-response-text-font-size);
+  line-height: var(--search-ai-response-text-line-height);
+  font-family: inherit;
+  white-space: break-spaces;
+  margin: var(--md-pre-margin) 0;
   animation: fadeIn 2s ease-in-out infinite;
 
   @keyframes fadeIn {

package/src/components/Search/SearchDialog.tsx

@@ -292,13 +292,20 @@ const SearchDialogWrapper = styled.div`
   box-shadow: var(--search-modal-box-shadow);
   border-radius: 0;
 
+  @media screen and (max-width: ${breakpoints.small}) {
+    /* Ignore resize on mobile */
+    width: 100vw !important;
+    height: 100vh !important;
+  }
+
   @media screen and (min-width: ${breakpoints.small}) {
     border-radius: var(--search-modal-border-radius);
     width: var(--search-modal-width);
     min-height: var(--search-modal-min-height);
+    min-width: var(--search-modal-min-width);
     max-width: 95vw;
     max-height: 95vh;
-    height: auto;
+    height: var(--search-modal-min-height);
     resize: both;
   }
 `;
@@ -315,10 +322,7 @@ const SearchDialogBody = styled.div`
   display: flex;
   flex-direction: row;
   flex-grow: 1;
-
-  @media screen and (min-width: ${breakpoints.small}) {
-    height: var(--search-modal-min-height);
-  }
+  overflow: hidden;
 `;
 
 const SearchDialogBodyMainView = styled.div`

package/src/components/Search/variables.ts

@@ -5,6 +5,7 @@ export const search = css`
     * @tokens Search
     */
   --search-modal-width: 1100px;
+  --search-modal-min-width: 460px;
   --search-modal-min-height: 705px;
   --search-modal-bg-color: var(--modal-bg-color);
   --search-modal-box-shadow: var(--modal-box-shadow);

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -51,6 +51,9 @@ export const useThemeHooks = jest.fn(() => ({
     setSearchFacet: jest.fn(),
     setSearchFacetQuery: jest.fn(),
   })),
+  useMarkdownText: jest.fn(() => {
+    return null;
+  }),
   useUserMenu: jest.fn(() => ({
     userData: {
       isAuthenticated: true,

package/src/core/types/hooks.ts

@@ -87,6 +87,7 @@ export type ThemeHooks = {
       url: string;
     }[];
   };
+  useMarkdownText: (text: string) => React.ReactNode;
   useFacetQuery: (field: string) => {
     searchFacet: SearchFacet | null;
     setSearchFacet: React.Dispatch<React.SetStateAction<SearchFacet | null>>;

package/src/index.ts

@@ -140,6 +140,7 @@ export * from '@redocly/theme/components/Search/SearchFilter';
 export * from '@redocly/theme/components/Search/SearchFilterField';
 export * from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldSelect';
 export * from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldTags';
+export * from '@redocly/theme/components/Search/SearchAiResponse';
 /* Icons */
 export * from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 export * from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';