feat/husky-streaming: Added loader and modified action ui

memser-spaceport · Jan 3, 2025 · 674b9c2 · 674b9c2
1 parent b8ce185
commit 674b9c2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/components/core/husky/husky-ai.tsx b/components/core/husky/husky-ai.tsx
@@ -55,7 +55,7 @@ function HuskyAi({ mode = 'chat', initialChats = [], isLoggedIn, blogId, onClose
   const chatCnRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
   const { trackTabSelection, trackUserPrompt, trackAnswerCopy, trackFollowupQuestionClick, trackQuestionEdit, trackRegenerate, trackCopyUrl, trackFeedbackClick, trackAiResponse } = useHuskyAnalytics();
-
+  
   const {
     object,
     isLoading: isLoadingObject,
@@ -79,6 +79,10 @@ function HuskyAi({ mode = 'chat', initialChats = [], isLoggedIn, blogId, onClose
     }),
     onFinish: (data) => {
       console.log(data);
+    },
+    onError: (error) => {
+      console.error(error);
+      setAnswerLoadingStatus(false);
     }
   });
 
@@ -324,7 +328,7 @@ function HuskyAi({ mode = 'chat', initialChats = [], isLoggedIn, blogId, onClose
 
   useEffect(() => {
     if (object?.content && isLoadingObject) {
-
+      setAnswerLoadingStatus(false);
       setChats((prev:any) => {
         if (prev.length === 0) {
 
@@ -400,7 +404,7 @@ function HuskyAi({ mode = 'chat', initialChats = [], isLoggedIn, blogId, onClose
               mode="chat"
               onCopyAnswer={onCopyAnswer}
             />
-            {isAnswerLoading && <div id="answer-loader" />}
+             {isAnswerLoading && <HuskyAnswerLoader question={askingQuestion} data-testid="chat-answer-loader" />}
           </div>
           {((activeTab === 'home' && chats.length !== 0) || activeTab === 'supported-scope') && <div className="huskyai__input" data-testid="input-box">
             <HuskyInputBox isAnswerLoading={isAnswerLoading} selectedSource={selectedSource} onSourceSelected={onSourceSelected} onHuskyInput={onHuskyInput} />

diff --git a/components/core/husky/husky-chat-actions.tsx b/components/core/husky/husky-chat-actions.tsx
@@ -20,19 +20,37 @@ function HuskyChatActions({ actions }: HuskyChatActionsProps) {
         </h3>
         <div className="chat-actions__cn ">
           {actions.map((action: any) => (
-            <div className="chat-actions__cn__item" key={action.directoryLink}>
+            <a target="_blank" href={action.directoryLink} onClick={() => onActionCardClicked(action)}  className="chat-actions__cn__item" key={action.directoryLink}>
+              <div></div>
+              <div className="center">
               <p className="chat-actions__cn__item__name">
-                <img className="actions__cn__item__name__icon" src={action.icon || '/icons/default_profile.svg'}/>
                 <span>{action.name}</span>
               </p>
-              {action.desc && <p className="chat-actions__cn__item__desc">{action.desc}</p>}
-              <a onClick={() => onActionCardClicked(action)} className="chat-actions__cn__item__link" href={action.directoryLink} target="_blank">{`View ${action.type}`}</a>
-            </div>
+              <p className="chat-action-type">{`(${action.type})`}</p>
+              </div>
+              <div></div>
+
+
+            </a>
           ))}
         </div>
       </div>
       <style jsx>
         {`
+          
+          .center {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          
+          }
+
+          .chat-action-type {
+           text-transform: capitalize;
+           margin-top: 3px;
+           width: fit-content;
+          }
           .chat-actions {
             width: 100%;
           }
@@ -56,12 +74,13 @@ function HuskyChatActions({ actions }: HuskyChatActionsProps) {
           }
           .chat-actions__cn__item {
             background: rgba(241, 245, 249, 1);
-            padding: 20px;
+            padding: 8px;
             border-radius: 8px;
             width: 100%;
             display: flex;
             flex-direction: column;
             gap: 12px;
+            cursor: pointer;
           }
           .chat-actions__cn__item__name {
             font-size: 18px;

diff --git a/components/core/husky/husky-chat-answer.tsx b/components/core/husky/husky-chat-answer.tsx
@@ -15,7 +15,7 @@ interface HuskyChatAnswerProps {
 function HuskyChatAnswer({ mode, answer, isLastIndex, question, onCopyAnswer, onQuestionEdit, onRegenerate, onFeedback }: HuskyChatAnswerProps) {
   const anchorWrapper = (props: any) => (
     <a style={{ color: 'blue' }} target="_blank" href={props.href}>
-      {props.children}
+      {`[${props.children}]`}
     </a>
   );