styling + pending message for /fix

packages/jupyter-ai/jupyter_ai/chat_handlers/ask.py

@@ -16,7 +16,6 @@
 Follow Up Input: {question}
 Standalone question:"""
 CONDENSE_PROMPT = PromptTemplate.from_template(PROMPT_TEMPLATE)
-PENDING_MESSAGE = "Searching learned documents"
 
 
 class AskChatHandler(BaseChatHandler):
@@ -72,7 +71,7 @@ async def process_message(self, message: HumanChatMessage):
         self.get_llm_chain()
 
         try:
-            with self.pending(PENDING_MESSAGE):
+            with self.pending("Searching learned documents"):
                 result = await self.llm_chain.acall({"question": query})
                 response = result["answer"]
             self.reply(response, message)

packages/jupyter-ai/jupyter_ai/chat_handlers/default.py

@@ -7,8 +7,6 @@
 
 from .base import BaseChatHandler, SlashCommandRoutingType
 
-PENDING_MESSAGE = "Thinking"
-
 
 class DefaultChatHandler(BaseChatHandler):
     id = "default"
@@ -47,7 +45,7 @@ def create_llm_chain(
 
     async def process_message(self, message: HumanChatMessage):
         self.get_llm_chain()
-        with self.pending(PENDING_MESSAGE):
+        with self.pending("Thinking"):
             response = await self.llm_chain.apredict(
                 input=message.body, stop=["\nHuman:"]
             )

packages/jupyter-ai/jupyter_ai/chat_handlers/fix.py

@@ -92,12 +92,13 @@ async def process_message(self, message: HumanChatMessage):
         extra_instructions = message.body[4:].strip() or "None."
 
         self.get_llm_chain()
-        response = await self.llm_chain.apredict(
-            extra_instructions=extra_instructions,
-            stop=["\nHuman:"],
-            cell_content=selection.source,
-            error_name=selection.error.name,
-            error_value=selection.error.value,
-            traceback="\n".join(selection.error.traceback),
-        )
+        with self.pending("Analyzing error"):
+            response = await self.llm_chain.apredict(
+                extra_instructions=extra_instructions,
+                stop=["\nHuman:"],
+                cell_content=selection.source,
+                error_name=selection.error.name,
+                error_value=selection.error.value,
+                traceback="\n".join(selection.error.traceback),
+            )
         self.reply(response, message)

packages/jupyter-ai/jupyter_ai/chat_handlers/learn.py

@@ -151,8 +151,6 @@ async def process_message(self, message: HumanChatMessage):
         # delete and relearn index if embedding model was changed
         await self.delete_and_relearn()
 
-        # if args.verbose:
-        #     self.reply(f"Loading and splitting files for {load_path}", message)
         with self.pending(f"Loading and splitting files for {load_path}"):
             try:
                 await self.learn_dir(

packages/jupyter-ai/src/components/pending-messages.tsx

@@ -4,6 +4,8 @@ import { Box } from '@mui/material';
 import { AiService } from '../handler';
 import { ChatMessageHeader } from './chat-messages';
 
+const PENDING_MESSAGE_CLASS = 'jp-ai-pending-message';
+
 type PendingMessagesProps = {
   messages: AiService.PendingMessage[];
 };
@@ -22,19 +24,26 @@ type PendingMessageGroup = {
 };
 
 function PendingMessageElement(props: PendingMessageElementProps): JSX.Element {
-  if (!props.ellipsis) {
-    return <span>{props.text}</span>;
-  }
-  const [dots, setDots] = useState('');
+  let text = props.text;
+  if (props.ellipsis) {
+    const [dots, setDots] = useState('');
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setDots(dots => (dots.length < 3 ? dots + '.' : ''));
-    }, 500);
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setDots(dots => (dots.length < 3 ? dots + '.' : ''));
+      }, 500);
 
-    return () => clearInterval(interval);
-  }, []);
-  return <span>{props.text + dots}</span>;
+      return () => clearInterval(interval);
+    }, []);
+    text = props.text + dots;
+  }
+  return (
+    <div>
+      {text.split('\n').map((line, index) => (
+        <p key={index}>{line}</p>
+      ))}
+    </div>
+  );
 }
 
 export function PendingMessages(props: PendingMessagesProps): JSX.Element {
@@ -85,7 +94,11 @@ export function PendingMessages(props: PendingMessagesProps): JSX.Element {
             sx={{ marginBottom: 3 }}
           />
           {group.messages.map((message, j) => (
-            <Box key={j} sx={{ padding: 2 }}>
+            <Box
+              className={PENDING_MESSAGE_CLASS}
+              key={j}
+              sx={{ marginBottom: 1 }}
+            >
               <PendingMessageElement
                 text={message.body}
                 ellipsis={message.ellipsis}

packages/jupyter-ai/style/base.css

@@ -7,3 +7,4 @@
 @import './expandable-text-field.css';
 @import './chat-settings.css';
 @import './rendermime-markdown.css';
+@import './pending-message.css';

packages/jupyter-ai/style/pending-message.css

@@ -0,0 +1,12 @@
+.jp-ai-pending-message {
+  padding-right: 0;
+  color: var(--jp-ui-font-color2);
+}
+
+div.jp-ai-pending-message:not(:last-child) {
+  margin-bottom: 2em;
+}
+
+.jp-ai-pending-message p {
+  line-height: 0.6;
+}