Hugging Face's logo

Spaces:
dorkai
/
freedomgpt
Runtime error

App Files Community
freedomgpt
File size: 2,611 Bytes 
a5e87d0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
import { useMessageFetching } from "../context/MessageFetch";
import { MessageType } from "../types/types";

const Reply = ({ message, id }: { message: string; id: string }) => {
  const { messageFetching, messages } = useMessageFetching();

  const trimmedMessage = message.slice(2);

  return (
    <div>
      {!messageFetching && messages[messages.length - 1].id === id && (
        <div
          dangerouslySetInnerHTML={{ __html: trimmedMessage }}
          style={{
            whiteSpace: "pre-wrap",
          }}
        />
      )}

      {messages[messages.length - 1].id !== id && (
        <div
          dangerouslySetInnerHTML={{ __html: trimmedMessage }}
          style={{
            whiteSpace: "pre-wrap",
          }}
        />
      )}
      {messageFetching && messages[messages.length - 1].id === id && (
        <p>
          {trimmedMessage}
          <span
            className={`cursor`}
            style={{
              marginLeft: "5px",
            }}
          >
            ||
          </span>
        </p>
      )}
    </div>
  );
};

export default function Message({ user, message, id }: MessageType) {
  return (
    <div
      style={{
        width: "100%",
        backgroundColor: !user ? "#444654" : "transparent",
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        padding: "25px 0",
        borderRadius: "5px",
        marginTop: "10px",
        justifyContent: "center",
      }}
    >
      <div
        className="messages_wrapper"
        style={{
          display: "flex",
          flexDirection: "row",
          alignItems: "flex-start",
          width: "100%",
          alignSelf: "center",
        }}
      >
        <div
          style={{
            width: "25px",
            marginLeft: "15px",
            alignItems: "flex-start",
          }}
        >
          {user ? (
            <p
              style={{
                fontSize: "40px",
                marginTop: "-15px",
              }}
            >
              🗣️
            </p>
          ) : (
            <p
              style={{
                fontSize: "45px",
                marginTop: "-15px",
              }}
            >
              🗽
            </p>
          )}
        </div>
        <div
          style={{
            marginLeft: "50px",
            marginRight: "15px",
            fontSize: "15px",
            lineHeight: "25px",
            width: "100%",
          }}
        >
          {user ? message.trim() : <Reply message={message} id={id} />}
        </div>
      </div>
    </div>
  );
}