feat(news-widget): fix loading animation

closes #889

src/app/globals.css

@@ -20,6 +20,15 @@
   }
 }
 
+@layer utilities {
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+}
+
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   select,
   textarea,

src/components/MessageBox.tsx

@@ -69,9 +69,7 @@ const MessageBox = ({
 
   return (
     <div className="space-y-6">
-      <div
+      <div className={'w-full pt-8 break-words'}>
-        className={'w-full pt-8 break-words'}
-      >
         <h2 className="text-black dark:text-white font-medium text-3xl lg:w-9/12">
           {section.userMessage.content}
         </h2>

src/components/NewsArticleWidget.tsx

@@ -29,15 +29,13 @@ const NewsArticleWidget = () => {
   return (
     <div className="bg-light-secondary dark:bg-dark-secondary rounded-2xl border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/25 flex flex-row items-stretch w-full h-24 min-h-[96px] max-h-[96px] p-0 overflow-hidden">
       {loading ? (
-        <>
+        <div className="animate-pulse flex flex-row items-stretch w-full h-full">
-          <div className="animate-pulse flex flex-row items-center w-full h-full">
+          <div className="w-24 min-w-24 max-w-24 h-full bg-light-200 dark:bg-dark-200" />
-            <div className="rounded-lg w-16 min-w-16 max-w-16 h-16 min-h-16 max-h-16 bg-light-200 dark:bg-dark-200 mr-3" />
+          <div className="flex flex-col justify-center flex-1 px-3 py-2 gap-2">
-            <div className="flex flex-col justify-center flex-1 h-full w-0 gap-2">
+            <div className="h-4 w-3/4 rounded bg-light-200 dark:bg-dark-200" />
-              <div className="h-4 w-3/4 rounded bg-light-200 dark:bg-dark-200" />
+            <div className="h-3 w-1/2 rounded bg-light-200 dark:bg-dark-200" />
-              <div className="h-3 w-1/2 rounded bg-light-200 dark:bg-dark-200" />
-            </div>
           </div>
-        </>
+        </div>
       ) : error ? (
         <div className="w-full text-xs text-red-400">Could not load news.</div>
       ) : article ? (

src/lib/hooks/useChat.tsx

@@ -399,6 +399,7 @@ export const ChatProvider = ({
           (m, j) =>
             j > i &&
             m.role === 'source' &&
+            m.sources &&
             (nextUserMessageIndex === -1 || j < nextUserMessageIndex),
         ) as SourceMessage | undefined;
 
@@ -417,7 +418,7 @@ export const ChatProvider = ({
             const closeThinkTag =
               processedMessage.match(/<\/think>/g)?.length || 0;
 
-            if (openThinkTag > closeThinkTag) {
+            if (openThinkTag && !closeThinkTag) {
               processedMessage += '</think> <a> </a>';
             }
           }
@@ -426,7 +427,11 @@ export const ChatProvider = ({
             thinkingEnded = true;
           }
 
-          if (sourceMessage && sourceMessage.sources.length > 0) {
+          if (
+            sourceMessage &&
+            sourceMessage.sources &&
+            sourceMessage.sources.length > 0
+          ) {
             processedMessage = processedMessage.replace(
               citationRegex,
               (_, capturedContent: string) => {
@@ -635,23 +640,22 @@ export const ChatProvider = ({
             },
           ]);
           added = true;
+          setMessageAppeared(true);
+        } else {
+          setMessages((prev) =>
+            prev.map((message) => {
+              if (
+                message.messageId === data.messageId &&
+                message.role === 'assistant'
+              ) {
+                return { ...message, content: message.content + data.data };
+              }
+
+              return message;
+            }),
+          );
         }
-
-        setMessages((prev) =>
-          prev.map((message) => {
-            if (
-              message.messageId === data.messageId &&
-              message.role === 'assistant'
-            ) {
-              return { ...message, content: message.content + data.data };
-            }
-
-            return message;
-          }),
-        );
-
         recievedMessage += data.data;
-        setMessageAppeared(true);
       }
 
       if (data.type === 'messageEnd') {

src/lib/outputParsers/lineOutputParser.ts

@@ -4,7 +4,7 @@ interface LineOutputParserArgs {
   key?: string;
 }
 
-class LineOutputParser extends BaseOutputParser<string> {
+class LineOutputParser extends BaseOutputParser<string | undefined> {
   private key = 'questions';
 
   constructor(args?: LineOutputParserArgs) {
@@ -18,7 +18,7 @@ class LineOutputParser extends BaseOutputParser<string> {
 
   lc_namespace = ['langchain', 'output_parsers', 'line_output_parser'];
 
-  async parse(text: string): Promise<string> {
+  async parse(text: string): Promise<string | undefined> {
     text = text.trim() || '';
 
     const regex = /^(\s*(-|\*|\d+\.\s|\d+\)\s|\u2022)\s*)+/;
@@ -26,7 +26,7 @@ class LineOutputParser extends BaseOutputParser<string> {
     const endKeyIndex = text.indexOf(`</${this.key}>`);
 
     if (startKeyIndex === -1 || endKeyIndex === -1) {
-      return '';
+      return undefined;
     }
 
     const questionsStartIndex =

src/lib/search/metaSearchAgent.ts

@@ -453,7 +453,6 @@ class MetaSearchAgent implements MetaSearchAgentType {
         event.event === 'on_chain_end' &&
         event.name === 'FinalSourceRetriever'
       ) {
-        ``;
         emitter.emit(
           'data',
           JSON.stringify({ type: 'sources', data: event.data.output }),