mirror of
				https://github.com/massbug/judge4c.git
				synced 2025-11-04 02:35:16 +00:00 
			
		
		
		
	feat(ai-bot): add empty state UI and improve message handling
This commit is contained in:
		
							parent
							
								
									d560904779
								
							
						
					
					
						commit
						99f8407e2a
					
				@ -7,11 +7,11 @@ import {
 | 
				
			|||||||
  ChatBubbleAvatar,
 | 
					  ChatBubbleAvatar,
 | 
				
			||||||
  ChatBubbleMessage,
 | 
					  ChatBubbleMessage,
 | 
				
			||||||
} from "@/components/ui/chat/chat-bubble";
 | 
					} from "@/components/ui/chat/chat-bubble";
 | 
				
			||||||
import { SendHorizonal } from "lucide-react";
 | 
					 | 
				
			||||||
import { Button } from "@/components/ui/button";
 | 
					import { Button } from "@/components/ui/button";
 | 
				
			||||||
import { useProblem } from "@/hooks/use-problem";
 | 
					import { useProblem } from "@/hooks/use-problem";
 | 
				
			||||||
import MdxPreview from "@/components/mdx-preview";
 | 
					import MdxPreview from "@/components/mdx-preview";
 | 
				
			||||||
import { Textarea } from "@/components/ui/textarea";
 | 
					import { Textarea } from "@/components/ui/textarea";
 | 
				
			||||||
 | 
					import { BotIcon, SendHorizonal } from "lucide-react";
 | 
				
			||||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 | 
					import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 | 
				
			||||||
import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
 | 
					import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -38,15 +38,22 @@ export default function AiBotPage() {
 | 
				
			|||||||
        content: `Current code:\n\`\`\`${currentLang}\n${currentValue}\n\`\`\``,
 | 
					        content: `Current code:\n\`\`\`${currentLang}\n${currentValue}\n\`\`\``,
 | 
				
			||||||
      };
 | 
					      };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      setMessages([...messages, currentCodeMessage]);
 | 
					      setMessages((prev) => [...prev, currentCodeMessage]);
 | 
				
			||||||
      handleSubmit();
 | 
					      handleSubmit();
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    [currentLang, currentValue, handleSubmit, input, messages, problemId, setMessages]
 | 
					    [currentLang, currentValue, handleSubmit, input, problemId, setMessages]
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <div className="h-full flex flex-col">
 | 
					    <div className="h-full flex flex-col">
 | 
				
			||||||
      <div className="flex-1">
 | 
					      <div className="flex-1 relative">
 | 
				
			||||||
 | 
					        {!messages.some((message) => message.role === "user" || message.role === "assistant") && (
 | 
				
			||||||
 | 
					          <div className="absolute bottom-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-muted-foreground flex flex-col items-center gap-2">
 | 
				
			||||||
 | 
					            <BotIcon />
 | 
				
			||||||
 | 
					            <span>Asi Bot</span>
 | 
				
			||||||
 | 
					            <span className="font-thin text-xs">Powered by Vercel Ai SDK</span>
 | 
				
			||||||
 | 
					          </div>
 | 
				
			||||||
 | 
					        )}
 | 
				
			||||||
        <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-238px)]">
 | 
					        <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-238px)]">
 | 
				
			||||||
          <ChatMessageList>
 | 
					          <ChatMessageList>
 | 
				
			||||||
            {messages
 | 
					            {messages
 | 
				
			||||||
@ -71,7 +78,7 @@ export default function AiBotPage() {
 | 
				
			|||||||
            className="h-full bg-muted border-transparent shadow-none rounded-lg"
 | 
					            className="h-full bg-muted border-transparent shadow-none rounded-lg"
 | 
				
			||||||
            placeholder="Bot will automatically get your current code"
 | 
					            placeholder="Bot will automatically get your current code"
 | 
				
			||||||
          />
 | 
					          />
 | 
				
			||||||
          <Button type="submit" variant="ghost" className="absolute bottom-6 right-6 h-6 w-auto px-2">
 | 
					          <Button type="submit" variant="ghost" className="absolute bottom-6 right-6 h-6 w-auto px-2" aria-label="Send Message">
 | 
				
			||||||
            <SendHorizonal className="size-4" />
 | 
					            <SendHorizonal className="size-4" />
 | 
				
			||||||
          </Button>
 | 
					          </Button>
 | 
				
			||||||
        </form>
 | 
					        </form>
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user