diff --git a/pyproject.toml b/pyproject.toml
index cd235b58bde..5d5db9f1bc4 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -34,7 +34,7 @@ classifiers = [
 requires-python = ">=3.9"
 dynamic = ["version"]
 dependencies = [
-  "pydantic>=2.0.0",
+  "pydantic>=2.0.0,<2.10.0", # Pinning to resolve issues caused in 2.10.0 release
   "wandb>=0.17.1",
   "packaging>=21.0",         # For version parsing in integrations
   "tenacity>=8.3.0,!=8.4.0", # Excluding 8.4.0 because it had a bug on import of AsyncRetrying
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChatView.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChatView.tsx
index 95d36f2a6e2..727731f18c7 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChatView.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChatView.tsx
@@ -34,7 +34,7 @@ export const ChatView = ({chat}: ChatViewProps) => {
         messages={chat.request?.messages || []}
         scrollLastMessage={scrollLastMessage}
       />
-      {chatResult && chatResult.choices && (
+      {chatResult?.choices && chatResult.choices.length > 0 && (
         <>
           <span className="mt-16 text-sm font-semibold text-moon-800">
             Response
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoiceView.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoiceView.tsx
index d16a12a12ca..c8143f9549e 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoiceView.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoiceView.tsx
@@ -15,6 +15,7 @@ export const ChoiceView = ({choice, isStructuredOutput}: ChoiceViewProps) => {
       index={choice.index}
       message={message}
       isStructuredOutput={isStructuredOutput}
+      isChoice
     />
   );
 };
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessageList.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessageList.tsx
index 75f189a6a69..300dd854f1e 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessageList.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessageList.tsx
@@ -38,17 +38,17 @@ export const MessageList = ({
 const processToolCallMessages = (messages: Messages): Messages => {
   const processedMessages: Message[] = [];
   for (let i = 0; i < messages.length; i++) {
-    const message = messages[i];
+    const message = {
+      ...messages[i],
+      // Store the original index of the message in the message object
+      // so that we can use it to sort the messages later.
+      original_index: i,
+    };
 
     // If there are no tool calls, just add the message to the processed messages
     // and continue to the next iteration.
     if (!message.tool_calls) {
-      processedMessages.push({
-        ...message,
-        // Store the original index of the message in the message object
-        // so that we can use it to sort the messages later.
-        original_index: i,
-      });
+      processedMessages.push(message);
       continue;
     }
 
@@ -58,7 +58,7 @@ const processToolCallMessages = (messages: Messages): Messages => {
     while (i + 1 < messages.length && messages[i + 1].role === 'tool') {
       toolMessages.push({
         ...messages[i + 1],
-        original_index: (messages[i + 1] as any).original_index ?? i + 1,
+        original_index: i + 1,
       });
       i++;
     }
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx
index b482a1ed89f..3dfec966631 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx
@@ -3,27 +3,43 @@ import classNames from 'classnames';
 import _ from 'lodash';
 import React, {useEffect, useRef, useState} from 'react';
 
+import {usePlaygroundContext} from '../PlaygroundPage/PlaygroundContext';
 import {MessagePanelPart} from './MessagePanelPart';
+import {PlaygroundMessagePanelButtons} from './PlaygroundMessagePanelButtons';
+import {PlaygroundMessagePanelEditor} from './PlaygroundMessagePanelEditor';
 import {ShowMoreButton} from './ShowMoreButton';
 import {ToolCalls} from './ToolCalls';
-import {Message} from './types';
+import {Message, ToolCall} from './types';
 
 type MessagePanelProps = {
   index: number;
   message: Message;
   isStructuredOutput?: boolean;
+  isChoice?: boolean;
   isNested?: boolean;
+  pendingToolResponseId?: string;
 };
 
 export const MessagePanel = ({
+  index,
   message,
   isStructuredOutput,
+  isChoice,
   isNested,
+  // The id of the tool call response that is pending
+  // If the tool call response is pending, the editor will be shown automatically
+  // and on save the tool call response will be updated and sent to the LLM
+  pendingToolResponseId,
 }: MessagePanelProps) => {
   const [isShowingMore, setIsShowingMore] = useState(false);
   const [isOverflowing, setIsOverflowing] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const [editorHeight, setEditorHeight] = useState<number | null>(
+    pendingToolResponseId ? 100 : null
+  );
   const contentRef = useRef<HTMLDivElement>(null);
 
+  const {isPlayground} = usePlaygroundContext();
   useEffect(() => {
     if (contentRef.current) {
       setIsOverflowing(contentRef.current.scrollHeight > 400);
@@ -37,10 +53,18 @@ export const MessagePanel = ({
     message.tool_calls != null && message.tool_calls.length > 0;
   const hasContent = message.content != null && message.content.length > 0;
 
+  const responseIndexes: number[] | undefined = hasToolCalls
+    ? message
+        .tool_calls!.map(
+          (toolCall: ToolCall) => toolCall.response?.original_index
+        )
+        .filter((idx): idx is number => idx !== undefined)
+    : undefined;
+
   return (
     <div className={classNames('flex gap-8', {'mt-24': !isTool})}>
       {!isNested && !isSystemPrompt && (
-        <div className="w-32">
+        <div className="w-32 flex-shrink-0">
           {!isUser && !isTool && (
             <Callout
               size="small"
@@ -53,16 +77,19 @@ export const MessagePanel = ({
       )}
 
       <div
-        className={classNames('relative overflow-visible rounded-lg', {
+        className={classNames('relative w-full overflow-visible', {
+          'rounded-lg': !isNested,
           'border-t border-moon-250': isTool,
-          'bg-moon-100': isSystemPrompt,
+          'bg-moon-100': isSystemPrompt || hasToolCalls,
           'bg-cactus-300/[0.24]': isUser,
-          'w-full': !isUser,
-          'max-w-3xl': isUser,
+          'max-w-full': !isUser,
+          'max-w-[768px]': isUser,
           'ml-auto': isUser,
           'mr-auto': !isUser,
           'py-8': hasContent,
-        })}>
+        })}
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}>
         <div>
           {isSystemPrompt && (
             <div className="flex justify-between px-16">
@@ -73,7 +100,7 @@ export const MessagePanel = ({
           )}
 
           {isTool && (
-            <div className={classNames({'px-16': isNested}, 'pb-8')}>
+            <div className={classNames('pb-8')}>
               <div className="text-sm font-semibold text-moon-500">
                 Response
               </div>
@@ -86,39 +113,75 @@ export const MessagePanel = ({
               'max-h-[400px]': !isShowingMore,
               'max-h-full': isShowingMore,
             })}>
-            {hasContent && (
-              <div
-                className={classNames(hasToolCalls ? 'pb-8' : '', ' text-sm', {
-                  'px-16': isSystemPrompt || isUser,
-                })}>
-                {_.isString(message.content) ? (
-                  <MessagePanelPart
-                    value={message.content}
-                    isStructuredOutput={isStructuredOutput}
-                  />
-                ) : (
-                  message.content!.map((p, i) => (
-                    <MessagePanelPart key={i} value={p} />
-                  ))
+            {isPlayground && editorHeight ? (
+              <PlaygroundMessagePanelEditor
+                message={message}
+                index={index}
+                isChoice={isChoice ?? false}
+                editorHeight={editorHeight}
+                isNested={isNested ?? false}
+                pendingToolResponseId={pendingToolResponseId}
+                setEditorHeight={setEditorHeight}
+              />
+            ) : (
+              <>
+                {hasContent && (
+                  <div
+                    className={classNames(
+                      hasToolCalls ? 'pb-8' : '',
+                      ' text-sm',
+                      {'px-16': isSystemPrompt || isUser}
+                    )}>
+                    {_.isString(message.content) ? (
+                      <MessagePanelPart
+                        value={message.content}
+                        isStructuredOutput={isStructuredOutput}
+                      />
+                    ) : (
+                      message.content!.map((p, i) => (
+                        <MessagePanelPart key={i} value={p} />
+                      ))
+                    )}
+                  </div>
                 )}
-              </div>
-            )}
-            {hasToolCalls && (
-              <div
-                className={classNames({
-                  'border-t border-moon-250 pt-8': hasContent,
-                })}>
-                <ToolCalls toolCalls={message.tool_calls!} />
-              </div>
+                {hasToolCalls && (
+                  <div
+                    className={classNames({
+                      'border-t border-moon-250 pt-8': hasContent,
+                    })}>
+                    <ToolCalls toolCalls={message.tool_calls!} />
+                  </div>
+                )}
+              </>
             )}
           </div>
-          {isOverflowing && (
+
+          {isOverflowing && !editorHeight && (
             <ShowMoreButton
               isUser={isUser}
               isShowingMore={isShowingMore}
               setIsShowingMore={setIsShowingMore}
             />
           )}
+
+          {/* Playground buttons (retry, edit, delete) */}
+          {isPlayground && isHovering && !editorHeight && (
+            <div
+              className={classNames(
+                'absolute flex w-full items-center justify-start pt-20',
+                isNested ? 'bottom-0' : 'bottom-[-32px]'
+              )}>
+              <PlaygroundMessagePanelButtons
+                index={message.original_index ?? index}
+                isChoice={isChoice ?? false}
+                isTool={isTool}
+                hasContent={hasContent}
+                contentRef={contentRef}
+                setEditorHeight={setEditorHeight}
+                responseIndexes={responseIndexes}
+              />
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelButtons.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelButtons.tsx
new file mode 100644
index 00000000000..27709403960
--- /dev/null
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelButtons.tsx
@@ -0,0 +1,79 @@
+import {Button} from '@wandb/weave/components/Button';
+import React from 'react';
+
+import {usePlaygroundContext} from '../PlaygroundPage/PlaygroundContext';
+
+type PlaygroundMessagePanelButtonsProps = {
+  index: number;
+  isChoice: boolean;
+  isTool: boolean;
+  hasContent: boolean;
+  contentRef: React.RefObject<HTMLDivElement>;
+  setEditorHeight: (height: number | null) => void;
+  responseIndexes?: number[];
+};
+
+export const PlaygroundMessagePanelButtons: React.FC<
+  PlaygroundMessagePanelButtonsProps
+> = ({
+  index,
+  isChoice,
+  isTool,
+  hasContent,
+  contentRef,
+  setEditorHeight,
+  responseIndexes,
+}) => {
+  const {deleteMessage, deleteChoice, retry} = usePlaygroundContext();
+
+  return (
+    <div className="z-10 flex gap-4 rounded-lg border border-moon-250 bg-white p-4">
+      <Button
+        variant="quiet"
+        size="small"
+        startIcon="randomize-reset-reload"
+        onClick={() => retry?.(index, isChoice)}
+        tooltip={
+          !hasContent
+            ? 'We currently do not support retrying functions'
+            : 'Retry'
+        }
+        disabled={!hasContent}>
+        Retry
+      </Button>
+      <Button
+        variant="quiet"
+        size="small"
+        startIcon="pencil-edit"
+        onClick={() => {
+          setEditorHeight(
+            contentRef?.current?.clientHeight
+              ? // Accounts for padding and save buttons
+                contentRef.current.clientHeight - 56
+              : null
+          );
+        }}
+        tooltip={
+          !hasContent ? 'We currently do not support editing functions' : 'Edit'
+        }
+        disabled={!hasContent}>
+        Edit
+      </Button>
+      <Button
+        variant="quiet"
+        size="small"
+        startIcon="delete"
+        onClick={() => {
+          if (isChoice) {
+            deleteChoice?.(index);
+          } else {
+            deleteMessage?.(index, responseIndexes);
+          }
+        }}
+        tooltip={isTool ? 'Tool responses cannot be deleted' : 'Delete message'}
+        disabled={isTool}>
+        Delete
+      </Button>
+    </div>
+  );
+};
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelEditor.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelEditor.tsx
new file mode 100644
index 00000000000..6d56259125e
--- /dev/null
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelEditor.tsx
@@ -0,0 +1,102 @@
+import {Button} from '@wandb/weave/components/Button';
+import classNames from 'classnames';
+import _ from 'lodash';
+import React, {useEffect, useMemo, useState} from 'react';
+
+import {usePlaygroundContext} from '../PlaygroundPage/PlaygroundContext';
+import {StyledTextArea} from '../PlaygroundPage/StyledTextarea';
+import {Message} from './types';
+
+type PlaygroundMessagePanelEditorProps = {
+  editorHeight: number;
+  isNested: boolean;
+  pendingToolResponseId?: string;
+  message: Message;
+  index: number;
+  isChoice: boolean;
+  setEditorHeight: (height: number | null) => void;
+};
+
+export const PlaygroundMessagePanelEditor: React.FC<
+  PlaygroundMessagePanelEditorProps
+> = ({
+  index,
+  isChoice,
+  setEditorHeight,
+  editorHeight,
+  isNested,
+  pendingToolResponseId,
+  message,
+}) => {
+  const {sendMessage, editMessage, editChoice} = usePlaygroundContext();
+
+  const initialContent = useMemo(
+    () =>
+      _.isString(message.content)
+        ? message.content
+        : message.content?.join('') ?? '',
+    [message.content]
+  );
+
+  const [editedContent, setEditedContent] = useState(initialContent);
+
+  useEffect(() => {
+    setEditedContent(initialContent);
+  }, [initialContent]);
+
+  const handleSave = () => {
+    if (isChoice) {
+      editChoice?.(index, {
+        content: editedContent,
+        role: message.role,
+      });
+    } else {
+      editMessage?.(index, {
+        ...message,
+        content: editedContent,
+      });
+    }
+    setEditorHeight(null);
+  };
+
+  const handleCancel = () => {
+    setEditedContent(initialContent);
+    setEditorHeight(null);
+  };
+
+  return (
+    <div
+      className={classNames(
+        'w-full pt-16 text-sm',
+        isNested ? 'px-2' : 'px-16'
+      )}>
+      <StyledTextArea
+        value={editedContent}
+        onChange={e => setEditedContent(e.target.value)}
+        style={{
+          minHeight: `${editorHeight}px`,
+        }}
+      />
+      <div className="z-100 mt-8 flex justify-end gap-8">
+        <Button variant="quiet" size="small" onClick={handleCancel}>
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          size="small"
+          onClick={
+            pendingToolResponseId
+              ? () =>
+                  sendMessage?.(
+                    'tool',
+                    editedContent ?? '',
+                    pendingToolResponseId
+                  )
+              : handleSave
+          }>
+          Save
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ToolCalls.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ToolCalls.tsx
index 2a108397657..3c259b1f722 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ToolCalls.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ToolCalls.tsx
@@ -3,6 +3,7 @@ import Prism from 'prismjs';
 import React, {useEffect, useRef, useState} from 'react';
 
 import {Alert} from '../../../../../Alert';
+import {usePlaygroundContext} from '../PlaygroundPage/PlaygroundContext';
 import {MessagePanel} from './MessagePanel';
 import {ToolCall} from './types';
 
@@ -12,6 +13,7 @@ type OneToolCallProps = {
 
 const OneToolCall = ({toolCall}: OneToolCallProps) => {
   const [isCopying, setIsCopying] = useState(false);
+  const {isPlayground} = usePlaygroundContext();
 
   const handleCopyText = (text: string) => {
     try {
@@ -56,7 +58,7 @@ const OneToolCall = ({toolCall}: OneToolCallProps) => {
 
   const copyText = `${name}(${parsedArgs})`;
   return (
-    <div className="bg-moon-50 py-8">
+    <div className="bg-moon-100 py-8">
       {/* The tool call header has a copy button */}
       <div className="pb-8">
         <div className="flex justify-between px-16">
@@ -83,10 +85,11 @@ const OneToolCall = ({toolCall}: OneToolCallProps) => {
       </div>
 
       {/* The tool call response */}
-      {toolCall.response && (
+      {(toolCall.response || isPlayground) && (
         <div className="px-16">
           <MessagePanel
             isNested
+            pendingToolResponseId={toolCall.response ? undefined : toolCall.id}
             index={toolCall.response?.original_index ?? 0}
             key={toolCall.id}
             message={
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/PlaygroundChat.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/PlaygroundChat.tsx
index 270f030a1b6..e806ee89294 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/PlaygroundChat.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/PlaygroundChat.tsx
@@ -37,7 +37,6 @@ export const PlaygroundChat = ({
 }: PlaygroundChatProps) => {
   const [chatText, setChatText] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const chatPercentWidth = 100 / playgroundStates.length;
 
   const {handleRetry, handleSend} = useChatCompletionFunctions(
     setPlaygroundStates,
@@ -111,13 +110,15 @@ export const PlaygroundChat = ({
                 height: '100%',
                 display: 'flex',
                 flexDirection: 'column',
+                position: 'relative',
               }}>
               <Box
                 sx={{
                   position: 'absolute',
                   top: '8px',
-                  left: `calc(${idx * chatPercentWidth}% + 8px)`,
-                  width: `calc(${chatPercentWidth}% - 16px)`,
+                  width: 'calc(100% - 16px)',
+                  left: '8px',
+                  right: '8px',
                   zIndex: 10,
                 }}>
                 <PlaygroundChatTopBar
@@ -140,7 +141,7 @@ export const PlaygroundChat = ({
                   paddingX: '16px',
                 }}>
                 <Tailwind>
-                  <div className="mx-auto h-full min-w-[400px] max-w-[800px] pb-8">
+                  <div className=" mx-auto h-full min-w-[400px] max-w-[800px] pb-8">
                     {state.traceCall && (
                       <PlaygroundContext.Provider
                         value={{
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/useChatCompletionFunctions.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/useChatCompletionFunctions.tsx
index 3d902f54a72..4a4115c0cbf 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/useChatCompletionFunctions.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/useChatCompletionFunctions.tsx
@@ -148,7 +148,7 @@ const handleMissingLLMApiKey = (responses: any, entity: string): boolean => {
       handleMissingLLMApiKey(response, entity);
     });
   } else {
-    if (responses && responses.api_key && responses.reason) {
+    if (responses?.api_key && responses.reason) {
       toast(
         <div>
           <div>{responses.reason}</div>