feat(chat): adjust chat layout and add rewind/fork functionality

- Modify chat max/min width for better responsiveness
- Update UserMessage and AssistantMessage components for improved alignment
- Add rewind and fork functionality to AssistantMessage
- Refactor Artifact component to handle bundled artifacts more clearly

app/components/chat/AssistantMessage.tsx

@@ -4,10 +4,14 @@ import type { JSONValue } from 'ai';
 import Popover from '~/components/ui/Popover';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { WORK_DIR } from '~/utils/constants';
+import WithTooltip from '~/components/ui/Tooltip';
 
 interface AssistantMessageProps {
   content: string;
   annotations?: JSONValue[];
+  messageId?: string;
+  onRewind?: (messageId: string) => void;
+  onFork?: (messageId: string) => void;
 }
 
 function openArtifactInWorkbench(filePath: string) {
@@ -34,7 +38,7 @@ function normalizedFilePath(path: string) {
   return normalizedPath;
 }
 
-export const AssistantMessage = memo(({ content, annotations }: AssistantMessageProps) => {
+export const AssistantMessage = memo(({ content, annotations, messageId, onRewind, onFork }: AssistantMessageProps) => {
   const filteredAnnotations = (annotations?.filter(
     (annotation: JSONValue) => annotation && typeof annotation === 'object' && Object.keys(annotation).includes('type'),
   ) || []) as { type: string; value: any } & { [key: string]: any }[];
@@ -100,11 +104,35 @@ export const AssistantMessage = memo(({ content, annotations }: AssistantMessage
               <div className="context"></div>
             </Popover>
           )}
-          {usage && (
-            <div>
-              Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
-            </div>
-          )}
+          <div className="flex w-full items-center justify-between mb-2">
+            {usage && (
+              <div>
+                Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
+              </div>
+            )}
+            {(onRewind || onFork) && messageId && (
+              <div className="flex gap-2 flex-col lg:flex-row ml-auto">
+                {onRewind && (
+                  <WithTooltip tooltip="Revert to this message">
+                    <button
+                      onClick={() => onRewind(messageId)}
+                      key="i-ph:arrow-u-up-left"
+                      className="i-ph:arrow-u-up-left text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
+                    />
+                  </WithTooltip>
+                )}
+                {onFork && (
+                  <WithTooltip tooltip="Fork chat from this message">
+                    <button
+                      onClick={() => onFork(messageId)}
+                      key="i-ph:git-fork"
+                      className="i-ph:git-fork text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
+                    />
+                  </WithTooltip>
+                )}
+              </div>
+            )}
+          </div>
         </div>
       </>
       <Markdown html>{content}</Markdown>