Merge branch 'stampy-redesign' into stampy-redesign-591

app/components/Article/Contents.tsx

@@ -122,8 +122,8 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
       addPopup(
         e as HTMLSpanElement,
         `glossary-${entry.term}`,
-        `<div class="glossary-popup flex-container black small col-${image ? 6 : 4}">
-              <div class="contents col-6 ${image ? '' : 'full-width'}">
+        `<div class="glossary-popup flex-container black small">
+              <div class="contents ${image ? '' : 'full-width'}">
                    <div class="small-bold">${entry.term}</div>
                    <div class="defintion small">${entry.contents}</div>
                    ${link || ''}

app/components/Article/FeedbackForm/index.tsx

@@ -66,7 +66,7 @@ const FeedbackForm = ({
 
   return (
     <div key={pageid} className={className} onBlur={handleBlur} onFocus={onFocus}>
-      <div className={'col-5 feedback-container bordered'}>
+      <div className={'fcol-5 feedback-container bordered'}>
         <span className={'black small'}>What was the problem?</span>
         {hasOptions
           ? options.map((option, index) => (

app/components/Article/KeepGoing/keepGoing.module.css

@@ -6,7 +6,7 @@
   gap: var(--spacing-24);
 }
 
-@media (max-width: 640px) {
+@media (max-width: 780px) {
   .flex_dynamic {
     display: flex;
     flex-direction: column;

app/components/Article/article.css

@@ -1,6 +1,27 @@
 article {
-  max-width: 47.43vw;
-  margin: 0 auto;
+  flex: 100;
+  max-width: 800px;
+  min-height: 100vh;
+  padding-left: var(--spacing-80);
+}
+
+article.loading .contents {
+  overflow: hidden;
+  max-width: 100%;
+  animation: infinite-loader 3s ease-in infinite;
+}
+@keyframes infinite-loader {
+  0% {
+    opacity: 0;
+    max-width: 80px;
+  }
+  30% {
+    opacity: 1;
+    max-width: 100px;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 article .meta {
@@ -58,9 +79,13 @@ article .contents p {
   padding-bottom: var(--spacing-32);
 }
 
+article .contents img {
+  max-width: 100%;
+}
+
 article .glossary-entry {
   border-bottom: 3px dotted var(--colors-cool-grey-500);
-  cursor: pointer;
+  cursor: default;
 }
 
 article .link-popup {
@@ -73,7 +98,8 @@ article .link-popup {
   font-weight: 300;
   line-height: 170%; /* 30.6px */
   z-index: 2;
-  transform: translate(-20vw, var(--spacing-40));
+  left: calc(50% - 200px);
+  transform: translateY(var(--spacing-40));
   transition:
     visibility 0s 300ms,
     opacity cubic-bezier(1, 0, 1, 1) 300ms;
@@ -83,7 +109,7 @@ article .link-popup .footnote {
 }
 
 article .glossary-popup {
-  max-width: 522px;
+  width: 522px;
   height: 304px;
 }
 
@@ -149,9 +175,10 @@ article a.see-more.visible:after {
   content: 'See less';
 }
 
-@media only screen and (max-width: 640px) {
+@media only screen and (max-width: 780px) {
   article {
     max-width: 100%;
+    padding: 0;
   }
   article .footer-comtainer {
     flex-direction: row;

app/components/Article/index.tsx

@@ -49,7 +49,7 @@ const ArticleFooter = (question: Question) => {
           <Button
             className="secondary"
             action={question.answerEditLink || ''}
-            tooltip="Edit article"
+            tooltip="Suggest changes in Google Docs"
             props={{target: '_blank', rel: 'noopener noreferrer'}}
           >
             <EditIcon className="no-fill" />
@@ -107,7 +107,7 @@ const ArticleActions = ({answerEditLink}: Question) => {
       <Button
         className="secondary"
         action={answerEditLink || ''}
-        tooltip="Edit article"
+        tooltip="Suggest changes in Google Docs"
         props={{target: '_blank', rel: 'noopener noreferrer'}}
       >
         <EditIcon className="no-fill" />
@@ -154,7 +154,7 @@ export const Article = ({question, glossary, className}: ArticleProps) => {
   const {title, text, pageid} = question
 
   return (
-    <article className={className}>
+    <article className={`${className} ${isLoading(question) ? 'loading' : ''}`}>
       <h1 className="teal-500 padding-bottom-24">{title}</h1>
       <ArticleMeta question={question} className="padding-bottom-56" />
 

app/components/ArticlesDropdown/dropdown.css

@@ -29,7 +29,7 @@
   border-right: 1px solid var(--colors-cool-grey-200);
 }
 
-@media (max-width: 640px) {
+@media (max-width: 780px) {
   .articles-dropdown-container .toc {
     border-right: 0;
   }

app/components/ArticlesDropdown/index.tsx

@@ -18,9 +18,9 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
   // it, so it's always shown (until the mouse is moved out, of course). To get around
   // this, use this variable to simply not render the dropdown for one render, which
   // will reset the CSS onHover checker.
-  const [shown, setShown] = useState(false)
-  const hide = () => setShown(true)
-  useEffect(() => setShown(false), [shown])
+  const [hidden, setHidden] = useState(false)
+  const hide = () => setHidden(true)
+  useEffect(() => setHidden(false), [hidden])
   const mobile = useIsMobile()
   const Link = ({
     to,
@@ -64,9 +64,9 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
     </div>
   )
 
-  return shown ? null : (
-    <div className="articles-dropdown-container bordered col-8">
-      <div className="col-5 toc">
+  return hidden ? null : (
+    <div className="articles-dropdown-container bordered fcol-8">
+      <div className="fcol-5 toc">
         <ArticlesSection
           category={INTRODUCTORY}
           toc={toc}
@@ -78,7 +78,7 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
           className={mobile ? 'padding-bottom-40' : ''}
         />
       </div>
-      <div className="col-4">
+      <div className="fcol-4">
         {/*sorted right side*/}
         <div className="default-bold">Browse by category</div>
 

app/components/ArticlesNav/Menu.tsx → app/components/ArticlesNav/ArticleNav.tsx

@@ -2,7 +2,7 @@ import {Link} from '@remix-run/react'
 import ChevronRight from '~/components/icons-generated/ChevronRight'
 import {questionUrl} from '~/routesMapper'
 import type {TOCItem} from '~/routes/questions.toc'
-import './menu.css'
+import './articlenav.css'
 
 type Article = {
   article: TOCItem
@@ -73,17 +73,24 @@ const ArticleLevel = ({article, path, current, hideChildren}: Article) => {
   )
 }
 
-export const ArticlesNav = ({article, path, className}: Article) => {
+export const ArticlesNav = ({
+  tocLoaded,
+  article,
+  path,
+  className,
+}: {tocLoaded: boolean} & Partial<Article>) => {
   const current = path ? path[path.length - 1] : ''
 
-  return (
-    <div className={`articles-group col-4-5 small ${className || ''}`}>
+  return article ? (
+    <div className={`articles-group small ${className || ''}`}>
       <ArticleLevel article={article} path={path} current={current} hideChildren />
       <hr />
 
       {article.children?.map((item) => (
         <ArticleLevel key={item.pageid} article={item} path={path} current={current} />
       ))}
     </div>
+  ) : (
+    <div className={`articles-group ${tocLoaded ? 'none' : 'loading'}`}></div>
   )
 }

app/components/ArticlesNav/menu.css → app/components/ArticlesNav/articlenav.css

@@ -2,11 +2,25 @@
   display: none;
 }
 .articles-group {
+  flex: none;
+  width: clamp(230px, 30vw, 400px);
   height: fit-content;
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
   overflow-y: scroll;
   overflow-x: hidden;
+  opacity: 1;
+  transition:
+    opacity 200ms,
+    width 200ms;
+}
+
+.articles-group.loading {
+  opacity: 0;
+}
+
+.articles-group.none {
+  width: clamp(0px, calc(100vw - 1100px), 400px);
 }
 
 .articles-title {
@@ -35,10 +49,10 @@
   cursor: pointer;
 }
 
-/* 
+/*
   https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#default_style
   "For Webkit-based browsers, such as Safari, it is possible to control the icon display
-  through the non-standard CSS pseudo-element ::-webkit-details-marker. 
+  through the non-standard CSS pseudo-element ::-webkit-details-marker.
   To remove the disclosure triangle, use summary::-webkit-details-marker { display: none }."
 */
 .articles-group details summary::-webkit-details-marker {
@@ -57,10 +71,10 @@
   height: 8px;
   position: relative;
   top: 25px;
-  left: -5px;
+  left: -8px;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 780px) {
   .articles-group {
     width: 100%;
   }

app/components/CategoriesNav/Menu.tsx → app/components/CategoriesNav/CategoriesNav.tsx

@@ -3,7 +3,7 @@ import {Link} from '@remix-run/react'
 import {SearchInput} from '../SearchInput/Input'
 import {Tag as TagType} from '~/server-utils/stampy'
 import {tagUrl} from '~/routesMapper'
-import './menu.css'
+import './categoriesnav.css'
 import useIsMobile from '~/hooks/isMobile'
 
 interface CategoriesNavProps {
@@ -25,7 +25,7 @@ export const CategoriesNav = ({categories, activeCategoryId, className}: Categor
   const [search, onSearch] = useState('')
   const mobile = useIsMobile()
   return (
-    <div className={['categoriesGroup bordered col-4-5', className].join(' ')}>
+    <div className={['categoriesGroup bordered', className].join(' ')}>
       {mobile ? <h1>Categories</h1> : <p className={'small-bold'}>Categories</p>}
       <div>
         <SearchInput onChange={onSearch} placeholderText="Filter by keyword" />

app/components/CategoriesNav/Page.tsx

@@ -3,7 +3,7 @@ import {Link} from '@remix-run/react'
 import {SearchInput} from '../SearchInput/Input'
 import {Tag as TagType} from '~/server-utils/stampy'
 import {tagUrl} from '~/routesMapper'
-import './menu.css'
+import './categoriesnav.css'
 
 interface CategoriesPageProps {
   /**
@@ -15,7 +15,7 @@ interface CategoriesPageProps {
 export const CategoriesPage = ({categories}: CategoriesPageProps) => {
   const [search, onSearch] = useState('')
   return (
-    <div className={'categoriesPage col-12'}>
+    <div className={'categoriesPage fcol-12'}>
       <h1>Categories</h1>
       <div>
         <SearchInput onChange={onSearch} placeholderText="Filter by keyword" />

app/components/CategoriesNav/menu.css → app/components/CategoriesNav/categoriesnav.css

@@ -1,5 +1,7 @@
 .categoriesGroup {
   padding: var(--spacing-12);
+  flex: none;
+  width: clamp(230px, 30vw, 400px);
 }
 .categoriesGroup > * {
   padding: var(--spacing-16);
@@ -26,7 +28,7 @@
   flex: 1;
   flex-basis: 21vw;
 }
-@media (max-width: 640px) {
+@media (max-width: 780px) {
   .categoriesGroup {
     width: 100%;
     height: 100%;

app/components/Chatbot/ChatEntry.tsx

@@ -3,6 +3,7 @@ import {Link} from '@remix-run/react'
 import MarkdownIt from 'markdown-it'
 import QuestionMarkIcon from '~/components/icons-generated/QuestionMark'
 import BotIcon from '~/components/icons-generated/Bot'
+import LinkIcon from '~/components/icons-generated/Link'
 import PersonIcon from '~/components/icons-generated/Person'
 import StampyIcon from '~/components/icons-generated/Stampy'
 import Contents from '~/components/Article/Contents'
@@ -104,8 +105,9 @@ const Reference = ({id, title, authors, source, url, index}: Citation) => {
         <div>
           <Authors authors={authors} />
           <span>{'  ·  '}</span>
-          <Link className="source-link" to={url}>
-            {referenceSources[source as keyof typeof referenceSources] || new URL(url).host}
+          <Link className="source-link" to={url} target="_blank" rel="noopener noreferrer">
+            {referenceSources[source as keyof typeof referenceSources] || new URL(url).host}{' '}
+            <LinkIcon width="16" height="16" />
           </Link>
         </div>
       </div>
@@ -158,7 +160,12 @@ const ChatbotReply = ({phase, content, citationsMap}: AssistantEntry) => {
           }
         })}
       </div>
-      {citations?.slice(0, MAX_REFERENCES).map(Reference)}
+      {citations && citations.length > 0 && (
+        <>
+          <hr />
+          <div className="padding-top-32">{citations?.slice(0, MAX_REFERENCES).map(Reference)}</div>
+        </>
+      )}
       {phase === 'followups' ? <p>Checking for followups...</p> : undefined}
     </div>
   )

app/components/Chatbot/index.tsx

@@ -3,7 +3,7 @@ import {Link, useFetcher} from '@remix-run/react'
 import StampyIcon from '~/components/icons-generated/Stampy'
 import SendIcon from '~/components/icons-generated/PlaneSend'
 import Button from '~/components/Button'
-import {queryLLM, Entry, AssistantEntry, StampyEntry, Followup} from '~/hooks/useChat'
+import {queryLLM, Entry, AssistantEntry, StampyEntry, Followup, ChatSettings} from '~/hooks/useChat'
 import ChatEntry from './ChatEntry'
 import './widgit.css'
 import {questionUrl} from '~/routesMapper'
@@ -139,7 +139,12 @@ const SplashScreen = ({
   </>
 )
 
-export const Chatbot = ({question, questions}: {question?: string; questions?: string[]}) => {
+type ChatbotProps = {
+  question?: string
+  questions?: string[]
+  settings?: ChatSettings
+}
+export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
   const [followups, setFollowups] = useState<Followup[]>()
 
   // FIXME: Generate session id
@@ -232,7 +237,8 @@ export const Chatbot = ({question, questions}: {question?: string; questions?: s
       [...history, message],
       updateReply,
       sessionId,
-      newController
+      newController,
+      settings
     )
     if (!newController.signal.aborted) {
       updateReply(result)