chat-list.tsx 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import { useState, useRef, useEffect, useLayoutEffect } from "react";
  2. import DeleteIcon from "../icons/delete.svg";
  3. import styles from "./home.module.scss";
  4. import {
  5. Message,
  6. SubmitKey,
  7. useChatStore,
  8. ChatSession,
  9. BOT_HELLO,
  10. } from "../store";
  11. import Locale from "../locales";
  12. export function ChatItem(props: {
  13. onClick?: () => void;
  14. onDelete?: () => void;
  15. title: string;
  16. count: number;
  17. time: string;
  18. selected: boolean;
  19. }) {
  20. return (
  21. <div
  22. className={`${styles["chat-item"]} ${
  23. props.selected && styles["chat-item-selected"]
  24. }`}
  25. onClick={props.onClick}
  26. >
  27. <div className={styles["chat-item-title"]}>{props.title}</div>
  28. <div className={styles["chat-item-info"]}>
  29. <div className={styles["chat-item-count"]}>
  30. {Locale.ChatItem.ChatItemCount(props.count)}
  31. </div>
  32. <div className={styles["chat-item-date"]}>{props.time}</div>
  33. </div>
  34. <div className={styles["chat-item-delete"]} onClick={props.onDelete}>
  35. <DeleteIcon />
  36. </div>
  37. </div>
  38. );
  39. }
  40. export function ChatList() {
  41. const [sessions, selectedIndex, selectSession, removeSession] = useChatStore(
  42. (state) => [
  43. state.sessions,
  44. state.currentSessionIndex,
  45. state.selectSession,
  46. state.removeSession,
  47. ],
  48. );
  49. return (
  50. <div className={styles["chat-list"]}>
  51. {sessions.map((item, i) => (
  52. <ChatItem
  53. title={item.topic}
  54. time={item.lastUpdate}
  55. count={item.messages.length}
  56. key={i}
  57. selected={i === selectedIndex}
  58. onClick={() => selectSession(i)}
  59. onDelete={() => confirm(Locale.Home.DeleteChat) && removeSession(i)}
  60. />
  61. ))}
  62. </div>
  63. );
  64. }