feat: Modal UI/UX fixes and updates (#2780)

* feat: Modal UI/UX fixes and updates

* fix: manually handle common HTML entities to prevent XSS

Author: 8bittitan

packages/docsearch-css/src/_variables.css

@@ -23,6 +23,7 @@
   /* modal */
   --docsearch-modal-width: 800px;
   --docsearch-modal-height: 600px;
+  --docsearch-modal-variable-height: 60dvh;
   --docsearch-modal-background: rgb(245, 246, 247);
   --docsearch-modal-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
     rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,

packages/docsearch-css/src/modal.css

@@ -247,7 +247,8 @@
 /* Modal Dropdown */
 
 .DocSearch-Dropdown {
-  height: calc(
+  height: var(--docsearch-modal-variable-height);
+  max-height: calc(
     var(--docsearch-modal-height) - var(--docsearch-spacing) -
       var(--docsearch-footer-height)
   );
@@ -791,7 +792,7 @@ assistive tech users */
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: 16px;
+  gap: 1em;
   font-size: 0.8em;
   margin-bottom: 8px;
   background: var(--docsearch-hit-background);
@@ -802,8 +803,9 @@ assistive tech users */
 }
 
 .DocSearch-AskAiScreen-Query {
-  font-size: 1.5em;
-  line-break: anywhere;
+  font-size: 1.25em;
+  line-break: loose;
+  line-height: 1.4;
   font-weight: 600;
   margin: 0;
 }
@@ -994,7 +996,7 @@ assistive tech users */
 .DocSearch-Markdown-Content {
   color: var(--docsearch-text-color);
   line-height: 1.6;
-  font-size: 1em;
+  font-size: 0.9355em;
   word-wrap: break-word;
 }
 
@@ -1003,7 +1005,7 @@ assistive tech users */
 }
 
 .DocSearch-Markdown-Content p {
-  margin: 1.2em 0;
+  margin: 1em 0;
 }
 
 .DocSearch-Markdown-Content p:last-child {
@@ -1104,7 +1106,7 @@ assistive tech users */
 
 .DocSearch-Markdown-Content li {
   color: var(--docsearch-text-color);
-  margin: 0.5em 0;
+  margin: 0.8em 0;
   padding-left: 0.3em;
   line-height: 1.6;
 }
@@ -1140,7 +1142,7 @@ assistive tech users */
 .DocSearch-Markdown-Content hr {
   border: none;
   border-top: 1px solid var(--docsearch-subtle-color);
-  margin: 2em 0;
+  margin: 1em 0;
 }
 
 .DocSearch-Markdown-Content table {
@@ -1175,9 +1177,10 @@ assistive tech users */
 
 .DocSearch-AskAiScreen-MessageContent-Tool {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   width: 100%;
   color: var(--docsearch-muted-color);
+  line-height: 1.2;
 }
 
 .DocSearch-AskAiScreen-MessageContent-Tool.Tool--Result {

packages/docsearch-react/src/DocSearchModal.tsx

@@ -506,6 +506,12 @@ export function DocSearchModal({
 
   const handleSelectAskAiQuestion = React.useCallback(
     (toggle: boolean, query: string) => {
+      if (toggle && askAiState === 'new-conversation') {
+        // We're starting a new conversation, clear out current messages
+        setMessages([]);
+        setAskAiState('initial');
+      }
+
       onAskAiToggle(toggle);
       setStoppedStream(false);
       sendMessage({
@@ -534,7 +540,7 @@ export function DocSearchModal({
         autocompleteRef.current.setQuery('');
       }
     },
-    [onAskAiToggle, sendMessage],
+    [onAskAiToggle, sendMessage, askAiState, setAskAiState, setMessages],
   );
 
   // feedback handler
@@ -784,7 +790,6 @@ export function DocSearchModal({
   };
 
   const handleNewConversation = (): void => {
-    setMessages([]);
     setAskAiState('new-conversation');
   };
 

packages/docsearch-react/src/Results.tsx

@@ -23,6 +23,16 @@ interface ResultsProps<TItem extends BaseItem>
 }
 
 export function Results<TItem extends StoredDocSearchHit>(props: ResultsProps<TItem>): JSX.Element | null {
+  // The collection title, decoded to handle encoded HTML entities
+  const decodedTitle = React.useMemo(() => {
+    return props.title
+      .replace(/&amp;/g, '&')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&quot;/g, '"')
+      .replace(/&#039;/g, "'");
+  }, [props.title]);
+
   if (!props.collection || props.collection.items.length === 0) {
     return null;
   }
@@ -40,7 +50,7 @@ export function Results<TItem extends StoredDocSearchHit>(props: ResultsProps<TI
   if (props.collection.source.sourceId === 'recentConversations') {
     return (
       <section className="DocSearch-Hits">
-        <div className="DocSearch-Hit-source">{props.title}</div>
+        <div className="DocSearch-Hit-source">{decodedTitle}</div>
         <ul {...props.getListProps({ source: props.collection.source })}>
           {props.collection.items.map((item, index) => {
             return <Result key={[props.title, item.objectID].join(':')} item={item} index={index} {...props} />;
@@ -52,7 +62,7 @@ export function Results<TItem extends StoredDocSearchHit>(props: ResultsProps<TI
 
   return (
     <section className="DocSearch-Hits">
-      <div className="DocSearch-Hit-source">{props.title}</div>
+      <div className="DocSearch-Hit-source">{decodedTitle}</div>
 
       <ul {...props.getListProps({ source: props.collection.source })}>
         {props.collection.items.map((item, index) => {