From c4cd5fb7ea9883ee4aae566ce329c482516b83c5 Mon Sep 17 00:00:00 2001
From: Ofer Mendelevitch <ofermend@gmail.com>
Date: Tue, 9 Jan 2024 14:20:33 -0800
Subject: [PATCH] initial

---
 README.md                                    |  5 ++++-
 src/views/search/controls/SearchControls.tsx | 12 ++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index f730593a..e68bfd65 100644
--- a/README.md
+++ b/README.md
@@ -100,10 +100,11 @@ corpus_id: "123,234,345"
 These configuration parameters enable you to configure the look and feel of the search header, including the logo.
 
 ```yaml
-# Define the title to render next to the logo.
+# Define the title to render above the search bar (next to the logo if it exists)
 search_title: "Search your data"
 
 # Define the description to render opposite the logo and title.
+# Note that this description is rendered as markdown, to enable for example link to a website
 search_description: "Data that speaks for itself"
 
 # Define the placeholder text inside the search box.
@@ -298,6 +299,8 @@ By default, Vectara Answer runs locally on your machine using `npm run start`. T
 
 Please see these detailed [instructions](DOCKER.md) for more details on using Docker.
 
+Note: the latest release of Vectara Answer is hosted on [docker-hub](https://hub.docker.com/repository/docker/vectara/vectara-answer/general), so if you want to pull it locally (instead of building) you can always use that image.
+
 ## Author
 
 👤 **Vectara**
diff --git a/src/views/search/controls/SearchControls.tsx b/src/views/search/controls/SearchControls.tsx
index 676a7899..a7d0b29f 100644
--- a/src/views/search/controls/SearchControls.tsx
+++ b/src/views/search/controls/SearchControls.tsx
@@ -18,6 +18,7 @@ import { useSearchContext } from "../../../contexts/SearchContext";
 import "./searchControls.scss";
 import { HistoryDrawer } from "./HistoryDrawer";
 import { OptionsDrawer } from "./OptionsDrawer";
+import Markdown from "markdown-to-jsx";
 
 type Props = {
   hasQuery: boolean;
@@ -102,11 +103,14 @@ export const SearchControls = ({ hasQuery }: Props) => {
             <VuiFlexContainer alignItems="center" spacing="m">
               {searchHeader.description && (
                 <VuiFlexItem grow={false}>
-                  <VuiTitle size="xxs" align="right">
+                  <VuiTitle size="xs" align="right">
                     <VuiTextColor color="subdued">
-                      <h2 style={{ whiteSpace: "pre-line" }}>
-                        {searchHeader.description.replaceAll("\\n", "\n")}
-                      </h2>
+                      <Markdown
+                        children={searchHeader.description}
+                        options={{
+                          forceBlock: true,
+                        }}
+                      />
                     </VuiTextColor>
                   </VuiTitle>
                 </VuiFlexItem>