Scaffold web frontend: mock-backed chat + PDF split-view, Tailwind/shadcn

packages/api-client/package.json

@@ -2,5 +2,12 @@
   "name": "@duoc-thu/api-client",
   "private": true,
   "version": "0.0.0",
-  "main": "src/index.ts"
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "dependencies": {
+    "@duoc-thu/shared-types": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.0"
+  }
 }

packages/api-client/src/index.ts

@@ -1 +1 @@
-export {};
+export * from "./sendChatMessage";

packages/api-client/src/mockFixtures.ts

@@ -0,0 +1,26 @@
+import type { SendMessageResponse } from "@duoc-thu/shared-types";
+
+let nextId = 1;
+
+export function buildMockResponse(userContent: string): SendMessageResponse {
+  const id = String(nextId++);
+  return {
+    message: {
+      id,
+      role: "assistant",
+      content:
+        `(Mock) Paracetamol được chỉ định để giảm đau, hạ sốt. Liều thường dùng ở người ` +
+        `lớn là 500-1000mg mỗi 4-6 giờ, tối đa 4g/ngày. Đây là dữ liệu giả lập cho câu hỏi: "${userContent}".`,
+      citations: [
+        {
+          drugName: "PARACETAMOL",
+          sectionType: "lieu_dung",
+          sourcePageRange: [412, 413],
+        },
+      ],
+      disclaimer:
+        "Câu trả lời chỉ mang tính tham khảo, không thay thế chỉ định của bác sĩ hoặc dược sĩ.",
+      createdAt: new Date().toISOString(),
+    },
+  };
+}

packages/api-client/src/sendChatMessage.ts

@@ -0,0 +1,9 @@
+import type { SendMessageResponse } from "@duoc-thu/shared-types";
+import { buildMockResponse } from "./mockFixtures";
+
+const MOCK_LATENCY_MS = 400;
+
+export async function sendChatMessage(content: string): Promise<SendMessageResponse> {
+  await new Promise((resolve) => setTimeout(resolve, MOCK_LATENCY_MS));
+  return buildMockResponse(content);
+}

packages/api-client/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../config/tsconfig-base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

packages/shared-types/package.json

@@ -2,5 +2,9 @@
   "name": "@duoc-thu/shared-types",
   "private": true,
   "version": "0.0.0",
-  "main": "src/index.ts"
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "devDependencies": {
+    "typescript": "^5.5.0"
+  }
 }

packages/shared-types/src/dto/chat.ts

@@ -0,0 +1,18 @@
+export interface Citation {
+  drugName: string;
+  sectionType: string;
+  sourcePageRange: [number, number];
+}
+
+export interface ChatMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  citations?: Citation[];
+  disclaimer?: string;
+  createdAt: string;
+}
+
+export interface SendMessageResponse {
+  message: ChatMessage;
+}

packages/shared-types/src/index.ts

@@ -1 +1 @@
-export {};
+export * from "./dto/chat";

packages/shared-types/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../config/tsconfig-base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

packages/ui/package.json

@@ -2,5 +2,21 @@
   "name": "@duoc-thu/ui",
   "private": true,
   "version": "0.0.0",
-  "main": "src/index.ts"
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "peerDependencies": {
+    "react": "^18.3.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.400.0",
+    "tailwind-merge": "^2.4.0"
+  },
+  "devDependencies": {
+    "@duoc-thu/shared-types": "workspace:*",
+    "@types/react": "^18.3.0",
+    "typescript": "^5.5.0"
+  }
 }

packages/ui/src/ChatBubble.tsx

@@ -0,0 +1,22 @@
+import type { ChatMessage } from "@duoc-thu/shared-types";
+import { cn } from "./lib/utils";
+
+export interface ChatBubbleProps {
+  message: ChatMessage;
+}
+
+export function ChatBubble({ message }: ChatBubbleProps) {
+  const isUser = message.role === "user";
+  return (
+    <div
+      className={cn(
+        "max-w-lg rounded-2xl px-4 py-3 text-[1.02rem] leading-relaxed shadow-sm",
+        isUser
+          ? "ml-auto rounded-br-sm bg-primary text-primary-foreground"
+          : "mr-auto rounded-bl-sm bg-muted text-foreground"
+      )}
+    >
+      <p className="m-0 whitespace-pre-wrap">{message.content}</p>
+    </div>
+  );
+}

packages/ui/src/CitationCard.tsx

@@ -0,0 +1,39 @@
+import { FileText } from "lucide-react";
+import type { Citation } from "@duoc-thu/shared-types";
+import { badgeVariants } from "./primitives/badge";
+import { cn } from "./lib/utils";
+
+export interface CitationCardProps {
+  citation: Citation;
+  onClick?: () => void;
+}
+
+export function CitationCard({ citation, onClick }: CitationCardProps) {
+  const [fromPage, toPage] = citation.sourcePageRange;
+  const className = cn(
+    badgeVariants({ variant: "outline" }),
+    "mr-1.5 mt-1 border-primary/20 bg-primary/5 font-normal text-foreground",
+    onClick && "cursor-pointer transition-colors hover:bg-primary/10"
+  );
+  const content = (
+    <>
+      <FileText className="h-3.5 w-3.5 text-primary" aria-hidden="true" />
+      <span className="font-bold text-primary">{citation.drugName}</span>
+      <span className="text-muted-foreground">{citation.sectionType}</span>
+      <span className="text-muted-foreground">
+        tr. {fromPage}
+        {toPage !== fromPage ? `–${toPage}` : ""}
+      </span>
+    </>
+  );
+
+  if (onClick) {
+    return (
+      <button type="button" className={className} onClick={onClick}>
+        {content}
+      </button>
+    );
+  }
+
+  return <div className={className}>{content}</div>;
+}

packages/ui/src/DisclaimerBanner.tsx

@@ -0,0 +1,28 @@
+import { TriangleAlert } from "lucide-react";
+import { Alert, AlertDescription } from "./primitives/alert";
+import { cn } from "./lib/utils";
+
+const DEFAULT_TEXT =
+  "Nội dung trả lời được tổng hợp từ Dược thư quốc gia Việt Nam và chỉ mang tính tham khảo, " +
+  "không thay thế chỉ định của bác sĩ hoặc dược sĩ.";
+
+export interface DisclaimerBannerProps {
+  text?: string;
+  className?: string;
+}
+
+export function DisclaimerBanner({ text = DEFAULT_TEXT, className }: DisclaimerBannerProps) {
+  return (
+    <Alert
+      variant="warning"
+      className={cn(
+        "flex items-center justify-center gap-2 rounded-none border-x-0 border-t-0 py-2.5 text-center",
+        "[&>svg]:static [&>svg]:left-auto [&>svg]:top-auto [&>svg~*]:pl-0",
+        className
+      )}
+    >
+      <TriangleAlert className="h-4 w-4 shrink-0" aria-hidden="true" />
+      <AlertDescription>{text}</AlertDescription>
+    </Alert>
+  );
+}

packages/ui/src/index.ts

@@ -1 +1,9 @@
-export {};
+export * from "./ChatBubble";
+export * from "./CitationCard";
+export * from "./DisclaimerBanner";
+export * from "./primitives/button";
+export * from "./primitives/card";
+export * from "./primitives/input";
+export * from "./primitives/alert";
+export * from "./primitives/badge";
+export * from "./lib/utils";

packages/ui/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

packages/ui/src/primitives/alert.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-3.5 [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        warning: "border-warning/40 bg-warning text-warning-foreground [&>svg]:text-warning-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = "Alert";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("leading-relaxed", className)} {...props} />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertDescription };

packages/ui/src/primitives/badge.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        outline: "border-border bg-accent text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

packages/ui/src/primitives/button.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-11 px-5 py-2",
+        sm: "h-9 px-3",
+        lg: "h-12 px-8 text-base",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

packages/ui/src/primitives/card.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-xl border bg-card text-card-foreground shadow-sm", className)}
+      {...props}
+    />
+  )
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col gap-1.5 p-6", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardContent, CardFooter };

packages/ui/src/primitives/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-11 w-full rounded-md border border-input bg-background px-4 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };

packages/ui/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../config/tsconfig-base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}