feat: add neurosearch component on the search page

demo/src/Components/SearchPage/index.stories.tsx

@@ -1,17 +1,25 @@
+/* eslint-disable no-console */
+
 import React, {useState} from 'react';
 import {ISearchItem, SearchPage} from '@diplodoc/components';
 
 import mockData from './data';
+import generativeSearchData from './searchData';
 
 // eslint-disable-next-line no-console, @typescript-eslint/no-explicit-any
 const log = (...message: any[]) => console.log(...message);
 
 type Args = {
     Mobile: string;
+    GenerativeSearchLoading: boolean;
+    GenerativeSearchError: boolean;
 };
 
 const SearchPageDemo = (args: Args) => {
     const isMobile = args['Mobile'];
+    const generativeSearchLoading = args['GenerativeSearchLoading'];
+    const generativeSearchError = args['GenerativeSearchError'];
+
     const [page, setPage] = useState(1);
     const [items, setItems] = useState(getItems(page, mockData));
 
@@ -35,6 +43,21 @@ const SearchPageDemo = (args: Args) => {
                 relevantOnClick={(item) => log('Click on like  button', item)}
                 itemsPerPage={2}
                 totalItems={mockData.length}
+                generativeSearchData={generativeSearchData}
+                generativeSearchLoading={generativeSearchLoading}
+                generativeSearchError={generativeSearchError}
+                generativeExpandOnClick={(answer) =>
+                    console.log('Click on generative answer expand', answer)
+                }
+                generativeSourceOnClick={(link) =>
+                    console.log('Click on generative answer source', link)
+                }
+                generativeIrrelevantOnClick={(answer) =>
+                    console.log('Click on generative answer dislike button', answer)
+                }
+                generativeRelevantOnClick={(answer) =>
+                    console.log('Click on generative answer like button', answer)
+                }
             />
         </div>
     );
@@ -47,6 +70,12 @@ export default {
         Mobile: {
             control: 'boolean',
         },
+        GenerativeSearchLoading: {
+            control: 'boolean',
+        },
+        GenerativeSearchError: {
+            control: 'boolean',
+        },
     },
 };
 

demo/src/Components/SearchPage/searchData.ts

@@ -0,0 +1,26 @@
+export default {
+    message: {
+        content:
+            '<p>Чтобы работать с YFM, можно следовать таким рекомендациям:</p><ul><li><p><strong>Создайте проект</strong>. <a href="https://diplodoc.com/docs/ru/quickstart">1</a> Он состоит из нескольких конфигурационных файлов и страниц с контентом. <a href="https://diplodoc.com/docs/ru/quickstart">1</a></p></li><li><p><strong>Запустите сборку проекта</strong>. <a href="https://diplodoc.com/docs/ru/quickstart">1</a><a href="https://diplodoc.com/docs/ru/tools/docs/build">3</a> Для этого используйте инструмент Builder в командной строке. <a href="https://diplodoc.com/docs/ru/quickstart">1</a> Укажите обязательные ключи запуска: <strong>input (–i) — путь до директории проекта, output (–o) — путь до директории для выходных данных (статических HTML)</strong>. <a href="https://diplodoc.com/docs/ru/quickstart">1</a><a href="https://diplodoc.com/docs/ru/tools/docs/build">3</a> Пример команды: <code>yfm -i ./input-folder -o ./ouput-folder</code>. <a href="https://diplodoc.com/docs/ru/quickstart">1</a></p></li><li><p><strong>Настройте сборку в YFM</strong>. <a href="https://diplodoc.com/docs/ru/tools/docs/build">3</a> Для этого при выполнении команды yfm укажите ключ запуска <strong>--output-format=md</strong>. <a href="https://diplodoc.com/docs/ru/tools/docs/build">3</a> Сборка в YFM позволяет использовать вставки и условия видимости разделов, условия отображения контента и подстановки переменных. <a href="https://diplodoc.com/docs/ru/tools/docs/build">3</a></p></li><li><p><strong>Используйте готовый проект</strong>. <a href="https://diplodoc.com/docs/ru/quickstart">1</a> Проекты в формате HTML можно использовать локально или разместить на хостинге, в GitHub Pages или S3. <a href="https://diplodoc.com/docs/ru/quickstart">1</a><a href="https://diplodoc.com/docs/ru/index-yfm">4</a></p></li></ul>',
+        role: 'assistant',
+    },
+    links: [
+        'https://diplodoc.com/docs/ru/quickstart',
+        'https://diplodoc.com/docs/ru/syntax/base',
+        'https://diplodoc.com/docs/ru/tools/docs/build',
+        'https://diplodoc.com/docs/ru/index-yfm',
+        'https://diplodoc.com/docs/en/how-it-work',
+    ],
+    titles: [
+        'Быстрый старт | Diplodoc',
+        'Базовая разметка | Diplodoc',
+        'Сборка | Diplodoc',
+        'Yandex Flavored Markdown | Diplodoc',
+        'Main scenarios for Diplodoc usage | Diplodoc',
+    ],
+    final_search_query: 'как работать с yfm',
+    is_answer_rejected: false,
+    is_bullet_answer: false,
+    search_reqid: '1722674507173832-17567698128095587952-ngp6et3xflkdijxp-BAL',
+    reqid: '1722674506477130-4942193876903362238-balancer-l7leveler-kubr-yp-sas-214-BAL',
+};

demo/src/Components/SearchSuggest/index.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import type {FC, PropsWithChildren} from 'react';
 import type {SearchProvider, SearchResult} from '@diplodoc/components';
 
@@ -57,6 +58,9 @@ const SearchSuggestDemo = () => {
                 provider={provider}
                 onFocus={() => setSearch(true)}
                 onBlur={() => setSearch(false)}
+                generativeSuggestOnClick={(link) =>
+                    console.log(`Clicked on generative search banner going to ${link}`)
+                }
             />
         </FakeHeader>
     );