-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1471 lines (1413 loc) · 69 KB
/
index.html
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Existing links and meta tags -->
<!-- Material Symbols for icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap" />
<!-- Back arrow and close icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=arrow_back_ios_new|close" />
<!-- Noto Sans font -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO Title and Meta Description -->
<title>Hallucinated #product channels</title>
<meta name="description" content="What does AI think product teams are talking about on Slack? See how AI imagines the #product channels of Notion, Stripe, and other top tech companies.">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Hallucinated #product channels">
<meta property="og:description" content="What does AI think product teams are talking about on Slack? See how AI imagines the #product channels of Notion, Stripe, and other top tech companies.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://github.com/malenaohl/productchannel/blob/main/Product%20Channel%20OG%20Image.jpeg">
<style>
/* General CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans', sans-serif;
}
body {
display: flex;
height: 100vh;
overflow: hidden;
}
/* Left Navigation */
#left-nav {
width: 300px;
background-color: #382c96;
color: white;
position: relative;
padding: 20px;
flex-shrink: 0;
display: block;
}
.workspace-selector {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
padding: 10px 0;
}
.workspace-icon-container {
position: relative;
width: 40px;
margin-right: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.workspace-icon {
width: 40px;
height: 40px;
background-color: white;
border-radius: 8px;
overflow: hidden;
position: relative;
z-index: 3;
}
.workspace-icon img {
max-height: 40px;
max-width: 40px;
object-fit: contain;
}
.cascade-icon {
background-color: white;
border-radius: 8px;
opacity: 0.75; /* Initial opacity */
transition: opacity 0.3s ease;
margin-top: 5px;
}
.cascade-icon.first {
width: 36px; /* 20% smaller than 40px */
height: 32px;
opacity: 0.60; /* 25% less than 100% */
margin-top: -29px;
}
.cascade-icon.second {
width: 32.4px; /* 20% smaller than 32px */
height: 25.6px;
opacity: 0.40; /* 25% less than 0.75 */
margin-top:-22px;
}
.workspace-selector:hover .cascade-icon {
opacity: 0;
}
.workspace-title {
font-weight: bold;
font-size: 18px;
}
.workspace-dropdown {
position: absolute;
margin-top:10px;
top: 60px;
background-color: #130080;
border-radius: 8px;
display: none;
padding: 10px;
width: calc(100%); /* 20px padding on each side */
z-index: 1000;
}
.workspace-dropdown div {
padding: 10px;
cursor: pointer;
}
.workspace-dropdown div:hover {
background-color: #1f1f5e;
}
.workspace-dropdown img {
width: 30px;
height: 30px;
margin-right: 10px;
vertical-align: middle;
}
.channel-list {
margin-top: 20px;
}
.channel {
padding: 10px;
border-radius: 8px;
cursor: pointer;
}
.channel.selected {
background-color: #130080;
color: #E9D8FD;
}
.mention {
color: #1264A3; /* Slack-like blue color */
text-decoration: none;
cursor: pointer;
}
.mention:hover {
text-decoration: underline;
}
/* Hide mobile workspace list on desktop */
#mobile-workspace-list {
display: none;
}
/* Main Content Area */
#main-content {
background-color: #FFFFFF;
position: relative;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
overflow-y: auto;
flex-grow: 1;
transition: margin-right 0.3s ease;
z-index: 1;
display: flex;
flex-direction: column;
}
#main-content.drawer-open {
margin-right: 350px;
}
.channel-info {
display: flex;
align-items: center;
position: sticky;
top: 0;
left: 0;
width: 100%;
background-color: #FFFFFF;
padding-top: 20px;
padding-bottom: 20px;
z-index: 10;
transition: border-bottom 0.3s ease;
}
.channel-info.scrolled {
border-bottom: 1px solid #E0E0E0;
}
.channel-title {
font-size: 20px;
font-weight: bold;
white-space: nowrap; /* Prevents wrapping */
display: flex;
align-items: center;
}
.channel-title .hash-symbol {
font-stretch: 180%;
font-weight: lighter;
font-size: 24px;
}
.back-arrow {
display: none;
font-size: 24px;
cursor: pointer;
margin-right: 10px;
}
.channel-description {
font-size: 12px;
color: #757575;
margin-left: 20px;
margin-top: 5px;
}
.member-thumbnails {
display: flex;
align-items: center;
margin-left: auto;
}
.member-thumbnails img {
width: 30px;
height: 30px;
border-radius: 8px;
margin-left: -10px;
border: 2px solid #FFFFFF;
}
.member-count {
margin-left: 8px;
font-size: 14px;
}
.date-divider {
text-align: center;
position: relative;
margin: 10px 0;
font-weight: 600;
font-size: 14px;
}
.date-divider span {
background-color: #FFFFFF;
padding: 5px 15px;
border-radius: 50px;
border: 1px solid #E0E0E0;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
position: relative;
z-index: 1;
}
.horizontal-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #E0E0E0;
z-index: 0;
}
.message {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
}
.profile-pic {
width: 40px;
height: 40px;
border-radius: 8px;
cursor: pointer;
margin-top: 2px;
}
.message-content {
display: block;
margin-left: 12px;
vertical-align: top;
}
.message-author {
font-weight: bold;
font-size: 14px;
margin-bottom: 1px;
cursor: pointer;
}
.time-stamp {
font-size: 12px;
color: #757575;
margin-left: 9px; /* Moved 1px closer */
font-weight: lighter;
}
.message-text {
margin-bottom: 10px;
line-height: 1.6;
font-size: 14px;
white-space: pre-wrap; /* Preserve line breaks */
}
.reactions {
display: flex;
margin-top: -5px;
margin-bottom:2px;
}
.reaction {
background-color: #F0F0F0;
padding: 3px 8px;
border-radius: 50px;
display: inline-flex;
align-items: center;
margin-right: 10px;
}
.reaction .emoji {
font-size: 12px;
margin-right: 5px;
}
.reaction .count {
color: #555555;
font-size: 12px;
font-weight: 325;
}
/* Drawer */
#drawer {
position: fixed;
top: 0;
right: -350px;
width: 350px;
height: 100%;
background: #FFFFFF;
box-shadow: -2px 0 16px rgba(0,0,0,0.1);
padding: 20px;
transition: right 0.3s ease;
z-index: 11;
}
#drawer.open {
right: 0;
}
#drawer .close-drawer, #drawer .drawer-back-arrow {
position: absolute;
top: 10px;
cursor: pointer;
color: #A0A0A0;
font-size: 24px;
}
#drawer .close-drawer {
right: 10px;
display: inline-block;
}
#drawer .drawer-back-arrow {
left: 10px;
display: none;
}
#drawer .profile-picture {
width: 300px;
height: 300px;
border-radius: 8px;
margin: 40px auto;
display: block;
}
.profile-name {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}
.bio {
text-align: center;
margin-top: 10px;
font-size: 16px;
}
.status {
text-align: center;
margin-top: 10px;
font-size: 14px;
color: #757575;
}
/* Mobile Styles */
@media (max-width: 768px) {
body {
flex-direction: column;
}
#left-nav {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: -100%;
z-index: 20;
overflow-y: auto;
transition: left 0.3s ease;
padding-top: 60px;
}
#left-nav.show {
left: 0;
}
.workspace-selector {
display: none;
}
#desktop-channel-list {
display: none;
}
#mobile-workspace-list {
display: block;
}
.channel-list {
margin-top: 0;
}
.channel {
padding: 20px;
font-size: 18px;
}
.channel.selected {
background-color: #130080;
color: #E9D8FD;
}
#main-content {
margin-right: 0;
flex-grow: 1;
}
#main-content.drawer-open {
margin-right: 0;
}
.back-arrow {
display: inline-flex;
}
.member-thumbnails {
display: none;
}
#drawer {
width: 100%;
right: -100%;
}
#drawer.open {
right: 0;
}
#drawer .profile-picture {
width: 200px;
height: 200px;
}
.pinned-message {
display: block; /* Ensure pinned message is visible on mobile */
}
#drawer .close-drawer {
display: none;
}
#drawer .drawer-back-arrow {
display: inline-block;
}
}
/* Pinned Message */
.pinned-message {
background: #F9F9F9;
padding: 15px;
text-align: center;
border-radius: 8px;
border: 1px solid #E0E0E0;
color: #757575;
margin: 40px 0;
position: sticky;
bottom: 0;
left: 0;
font-size:12px;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
justify-content: center;
align-items: center;
z-index: 15;
}
.modal-content {
background: #FFFFFF;
width: 760px;
max-width: 90%;
padding: 40px;
border-radius: 8px;
text-align: center;
font-size: 14px;
line-height: 1.6;
position: relative;
}
.modal-content .close-modal {
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
color: #A0A0A0;
font-size: 24px;
}
</style>
</head>
<body>
<!-- Left Navigation -->
<div id="left-nav">
<!-- Desktop Workspace Selector -->
<div class="workspace-selector" id="workspace-selector">
<div class="workspace-icon-container">
<div class="workspace-icon">
<img src="https://cdn.worldvectorlogo.com/logos/intercom-2.svg" alt="Intercom Logo">
</div>
<div class="cascade-icon first"></div>
<div class="cascade-icon second"></div>
</div>
<span class="workspace-title">Intercom</span>
<div class="workspace-dropdown" id="workspace-dropdown">
<div onclick="changeWorkspace('Intercom', 'https://cdn.worldvectorlogo.com/logos/intercom-2.svg')"><img src="https://cdn.worldvectorlogo.com/logos/intercom-2.svg" alt="Intercom"> Intercom</div>
<div onclick="changeWorkspace('Figma', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoUX5LMRa7atIsNfl0nP3DaUaV4URhV0PHfA&s')"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoUX5LMRa7atIsNfl0nP3DaUaV4URhV0PHfA&s" alt="Figma"> Figma</div>
<div onclick="changeWorkspace('Stripe', 'https://pbs.twimg.com/profile_images/1618575477781807105/iDuRlqTe_400x400.jpg')"><img src="https://pbs.twimg.com/profile_images/1618575477781807105/iDuRlqTe_400x400.jpg" alt="Stripe"> Stripe</div>
<div onclick="changeWorkspace('Linear', 'https://pageflows.com/media/logos/linear.png')"><img src="https://pageflows.com/media/logos/linear.png" alt="Linear"> Linear</div>
<div onclick="changeWorkspace('Webflow', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpmab2aeRSYdlQ3sVlxIMNqY03iOxWZB6WPA&s')"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpmab2aeRSYdlQ3sVlxIMNqY03iOxWZB6WPA&s" alt="Webflow"> Webflow</div>
<div onclick="changeWorkspace('Notion', 'https://upload.wikimedia.org/wikipedia/commons/4/45/Notion_app_logo.png')"><img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Notion_app_logo.png" alt="Notion"> Notion</div>
<div onclick="changeWorkspace('Airtable', 'https://cdn.prod.website-files.com/625d41a24ba26520fa739e33/62cb2323b008c0f333f24b82_628d09d1fddf444893db0476_airtable%2520logo.png')"><img src="https://cdn.prod.website-files.com/625d41a24ba26520fa739e33/62cb2323b008c0f333f24b82_628d09d1fddf444893db0476_airtable%2520logo.png" alt="Airtable"> Airtable</div>
</div>
</div>
<!-- Desktop Channel List -->
<div class="channel-list" id="desktop-channel-list">
<div class="channel selected">
<span class="hash-symbol">#</span> product
</div>
</div>
<!-- Mobile Workspace List -->
<div class="channel-list" id="mobile-workspace-list">
<div class="channel" onclick="changeWorkspace('Intercom', 'https://cdn.worldvectorlogo.com/logos/intercom-2.svg'); hideLeftNav();">
<img src="https://cdn.worldvectorlogo.com/logos/intercom-2.svg" alt="Intercom" style="width: 24px; height: 24px; margin-right: 10px; vertical-align: middle;"> Intercom
</div>
<div class="channel" onclick="changeWorkspace('Figma', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoUX5LMRa7atIsNfl0nP3DaUaV4URhV0PHfA&s'); hideLeftNav();">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoUX5LMRa7atIsNfl0nP3DaUaV4URhV0PHfA&s" alt="Figma" style="width: 24px; height: 24px; margin-right: 10px; vertical-align: middle;"> Figma
</div>
<div class="channel" onclick="changeWorkspace('Stripe', 'https://pbs.twimg.com/profile_images/1618575477781807105/iDuRlqTe_400x400.jpg'); hideLeftNav();">
<img src="https://pbs.twimg.com/profile_images/1618575477781807105/iDuRlqTe_400x400.jpg" alt="Stripe" style="width: 24px; height: 24px; margin-right: 10px; vertical-align: middle;"> Stripe
</div>
<div class="channel" onclick="changeWorkspace('Linear', 'https://pageflows.com/media/logos/linear.png'); hideLeftNav();">
<img src="https://pageflows.com/media/logos/linear.png" alt="Linear" style="width: 24px; height: 24px; margin-right: 10px; vertical-align: middle;"> Linear
</div>
<div class="channel" onclick="changeWorkspace('Webflow', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpmab2aeRSYdlQ3sVlxIMNqY03iOxWZB6WPA&s'); hideLeftNav();">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpmab2aeRSYdlQ3sVlxIMNqY03iOxWZB6WPA&s" alt="Webflow" style="width: 24px; height: 24px; margin-right: 10px; vertical-align: middle;"> Webflow
</div>
<div class="channel" onclick="changeWorkspace('Notion', 'https://upload.wikimedia.org/wikipedia/commons/4/45/Notion_app_logo.png'); hideLeftNav();">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Notion_app_logo.png" alt="Notion" style="width: 24px; height: 24px; margin-right: 10px; vertical-align: middle;"> Notion
</div>
<div class="channel" onclick="changeWorkspace('Airtable', 'https://cdn.prod.website-files.com/625d41a24ba26520fa739e33/62cb2323b008c0f333f24b82_628d09d1fddf444893db0476_airtable%2520logo.png'); hideLeftNav();">
<img src="https://cdn.prod.website-files.com/625d41a24ba26520fa739e33/62cb2323b008c0f333f24b82_628d09d1fddf444893db0476_airtable%2520logo.png" alt="Airtable" style="width: 24px; height: 24px; margin-right: 10px; vertical-align: middle;"> Airtable
</div>
</div>
</div>
<!-- Main Content Area -->
<div id="main-content">
<div class="channel-info" id="channel-info">
<span class="material-symbols-outlined back-arrow" onclick="showLeftNav()">arrow_back_ios_new</span>
<div class="channel-title">
<span class="hash-symbol">#</span> product
</div>
<div class="channel-description">AI-generated fan fiction of Notion’s product channel. Select another company from the top left corner.</div>
<div class="member-thumbnails">
<img src="https://raw.githubusercontent.com/malenaohl/productchannel/main/Martin%20Thompson.jpeg" alt="Member">
<img src="https://raw.githubusercontent.com/malenaohl/productchannel/main/Cora%20Lee.jpeg" alt="Member">
<img src="https://raw.githubusercontent.com/malenaohl/productchannel/main/Felix%20Reyes.jpeg" alt="Member">
<span class="member-count">28</span>
</div>
</div>
<div class="date-divider" id="date-divider">
<div class="horizontal-line"></div>
<span>Tuesday, October 16</span>
</div>
<div id="messages-container">
<!-- Messages will be dynamically inserted here -->
</div>
<div class="pinned-message">
Only AI can post in this channel. <a href="#" onclick="openModal()">Learn more</a>
</div>
</div>
<div id="drawer">
<span class="material-symbols-outlined drawer-back-arrow" onclick="closeDrawer()">arrow_back_ios_new</span>
<span class="material-symbols-outlined close-drawer" onclick="closeDrawer()">close</span>
<img src="https://raw.githubusercontent.com/malenaohl/productchannel/main/Martin%20Thompson.png" alt="Profile Picture" class="profile-picture">
<div class="profile-name">Martin Thompson</div>
<div class="bio">Senior Product Manager</div>
<div class="status">Status: Away</div>
</div>
<div class="modal" id="learn-more-modal" onclick="closeModal(event)">
<div class="modal-content">
<span class="material-symbols-outlined close-modal" onclick="closeModal(event)">close</span>
<img src="https://raw.githubusercontent.com/malenaohl/productchannel/main/Robot%20Talking.jpeg" alt="Robot Talking" style="width: 250px; height: auto; margin-bottom: 14px; margin-top: 5px; border-radius: 8px;">
<p>These messages were AI-generated for entertainment purposes only and are not affiliated with any brands or products mentioned.</p>
</div>
</div>
<script>
const teamMembers = {
'Martin Thompson': {
'title': 'Senior Product Manager',
'profilePic': 'https://raw.githubusercontent.com/malenaohl/productchannel/main/Martin%20Thompson.png'
},
'Vince Brenner': {
'title': 'Engineering Manager',
'profilePic': 'https://raw.githubusercontent.com/malenaohl/productchannel/main/Vince%20Brenner.jpeg'
},
'Cora Lee': {
'title': 'Product Designer',
'profilePic': 'https://raw.githubusercontent.com/malenaohl/productchannel/main/Cora%20Lee.jpeg'
},
'Lauren Chen': {
'title': 'Product Manager',
'profilePic': 'https://raw.githubusercontent.com/malenaohl/productchannel/main/Lauren%20Chen.jpeg'
},
'Felix Reyes': {
'title': 'Software Engineer',
'profilePic': 'https://raw.githubusercontent.com/malenaohl/productchannel/main/Felix%20Reyes.jpeg'
},
'Rahul Singh': {
'title': 'Tech Lead',
'profilePic': 'https://raw.githubusercontent.com/malenaohl/productchannel/main/Rahul%20Singh.jpeg'
},
'Dan Redman': {
'title': 'VP of Product',
'profilePic': 'https://raw.githubusercontent.com/malenaohl/productchannel/main/Dan%20Redman.jpeg'
}
};
const workspaces = {
'Notion': {
'channelDescription': "AI imagines Notion’s product channel. Choose another company from the top left.",
'messages': [
{
'author': 'Lauren Chen',
'time': '11:21 AM',
'text': "heads up - seeing a pattern in user research around search results from connected apps\nmost users spending like 3 hours a day just searching for info across slack and google drive",
'reactions': []
},
{
'author': 'Cora Lee',
'time': '11:22 AM',
'text': "yeah watched a user try to piece together project context yesterday\nhad to jump between notion docs, old slide decks, and slack threads\ngave up halfway through",
'reactions': []
},
{
'author': 'Martin Thompson',
'time': '11:23 AM',
'text': "feels like we could solve this with the AI chat\nlet users ask natural questions like \"what's the latest on project x?\" and pull relevant info from all sources",
'reactions': [{'emoji': '💡', 'count': 1}]
},
{
'author': 'Felix Reyes',
'time': '11:24 AM',
'text': "could stream results like the other AI tools do\nstart with notion content immediately\nthen bring in slack/gdrive as they load",
'reactions': []
},
{
'author': 'Rahul Singh',
'time': '11:25 AM',
'text': "would need solid permission handling though\nmake sure we're respecting access rights across all connected apps",
'reactions': []
},
{
'author': 'Lauren Chen',
'time': '11:26 AM',
'text': "nice - perfect for project updates\nlike \"catch me up on the mobile app redesign\" and it'll pull from specs in notion + relevant slack threads",
'reactions': [{'emoji': '🚀', 'count': 1}]
},
{
'author': 'Cora Lee',
'time': '11:27 AM',
'text': "we should make it super clear which sources the AI is pulling from\nand let people click through to the original convos/docs",
'reactions': []
},
{
'author': 'Dan Redman',
'time': '11:28 AM',
'text': "this could be huge for reducing meeting load\ncatch up on projects through chat instead of sitting in update meetings",
'reactions': []
},
{
'author': 'Felix Reyes',
'time': '11:29 AM',
'text': "starting on the prototypes\n@Rahul want to sync on permissions model tomorrow?",
'reactions': []
}
]
},
'Linear': {
'channelDescription': "AI imagines Linear's product channel. Choose another company from the top left.",
'messages': [
{
'author': 'Martin Thompson',
'time': '9:14 AM',
'text': "looking at doc subscription defaults for the upcoming release\ncurrent thinking: auto-subscribe people when they're added as collaborators or @mentioned\nsimilar to how github handles it",
'reactions': []
},
{
'author': 'Lauren Chen',
'time': '9:15 AM',
'text': "feels like we might need more granular controls\nespecially for project docs where whole teams are collaborators",
'reactions': []
},
{
'author': 'Vince Brenner',
'time': '9:16 AM',
'text': "yeah could get noisy for active docs\nmight want different defaults for different doc types",
'reactions': []
},
{
'author': 'Cora Lee',
'time': '9:17 AM',
'text': "did some testing last week - people already feel overwhelmed by issue notifications\nif we add doc notifications they want way more control over what they get",
'reactions': []
},
{
'author': 'Felix Reyes',
'time': '9:18 AM',
'text': "we could auto-subscribe based on existing permissions\nlike if you're a project lead or doc owner",
'reactions': [{'emoji': '👍', 'count': 1}]
},
{
'author': 'Rahul Singh',
'time': '9:19 AM',
'text': "that's way easier technically too\nwe already have those relationships in the data model",
'reactions': []
},
{
'author': 'Martin Thompson',
'time': '9:20 AM',
'text': "good point, what about:\n\n• auto-subscribe doc creator\n• auto-subscribe project leads\n• let people manually add others",
'reactions': []
},
{
'author': 'Lauren Chen',
'time': '9:21 AM',
'text': "yep and we should notify on:\ncontent changes, moves/deletes, comments",
'reactions': []
},
{
'author': 'Dan Redman',
'time': '9:22 AM',
'text': "this feels right\nkeeps signal high but gives people control when they need it",
'reactions': [{'emoji': '✅', 'count': 1}]
},
{
'author': 'Felix Reyes',
'time': '9:23 AM',
'text': "starting on this now\nshould have something to test by end of week",
'reactions': []
}
]
},
'Stripe': {
'channelDescription': "AI imagines Stripe’s product channel. Choose another company from the top left.",
'messages': [
{
'author': 'Martin Thompson',
'time': '10:03 AM',
'text': "team, looking for input on the invoice grace period feature implementation\ncurrent proposal: single global grace period setting that applies to all invoices\nseems simpler to implement and explain to users",
'reactions': []
},
{
'author': 'Lauren Chen',
'time': '10:04 AM',
'text': "i've been talking to some of our larger customers about this\nthey actually need different grace periods for different types of usage\nespecially ones with both subscription and usage-based billing",
'reactions': []
},
{
'author': 'Rahul Singh',
'time': '10:05 AM',
'text': "that's an interesting point Lauren\nwe'd need to consider how grace periods interact with subscription cycles too\nif someone sets a 72hr grace period on a daily subscription, they could end up with overlapping billing periods 🤔",
'reactions': []
},
{
'author': 'Felix Reyes',
'time': '10:06 AM',
'text': "definitely need to prevent that edge case\nwe could add validation to ensure grace period < subscription period",
'reactions': []
},
{
'author': 'Vince Brenner',
'time': '10:07 AM',
'text': "another consideration: webhook failures\nshould we enforce a standard grace period for failed webhook deliveries?\nlonger grace period would give customers time to fix their endpoints",
'reactions': []
},
{
'author': 'Cora Lee',
'time': '10:09 AM',
'text': "from the UI side, we need to think about how to make these rules clear in the dashboard\nespecially if we're supporting multiple conditions:\n\n• subscription-based\n• usage-based\n• combination of both",
'reactions': []
},
{
'author': 'Martin Thompson',
'time': '10:10 AM',
'text': "ok, so maybe instead of a single setting, we need:\n\n• account default (1hr)\n• configurable rules with conditions\n• rule ordering for conflict resolution",
'reactions': []
},
{
'author': 'Rahul Singh',
'time': '10:11 AM',
'text': "+1 to rule ordering\nsuggestion: for invoices that match multiple rules, we should use the longer grace period\nsafer to give more time than less",
'reactions': [{'emoji': '👍', 'count': 2}]
},
{
'author': 'Lauren Chen',
'time': '10:12 AM',
'text': "absolutely agree with Rahul\nalso we should make it clear that first subscription invoice finalizes immediately\nthat's caught a few customers by surprise in beta testing",
'reactions': []
},
{
'author': 'Felix Reyes',
'time': '10:13 AM',
'text': "implementation note: we'll need to modify the meters API to handle the variable grace periods\nand add validation for the 24hr usage cancellation window",
'reactions': []
},
{
'author': 'Dan Redman',
'time': '10:14 AM',
'text': "important that we get this right. let's move forward with:\n\n• rule-based approach with account default fallback\n• 72hr grace period for webhook failures\n• conservative resolution (longer period wins) for multiple matches\n• clear validation preventing grace period >= subscription period\n\nwe'll need to document regional compliance considerations clearly",
'reactions': [{'emoji': '✅', 'count': 1}]
},
{
'author': 'Martin Thompson',
'time': '10:15 AM',
'text': "thanks Dan - will add the compliance section to the spec\nshould we mention the 24hr limit on canceling usage events?",
'reactions': []
},
{
'author': 'Lauren Chen',
'time': '10:16 AM',
'text': "definitely include that\nand we should emphasize that canceled usage won't trigger correction invoices\nthat's been a common source of confusion",
'reactions': []
},
{
'author': 'Rahul Singh',
'time': '10:17 AM',
'text': "I'll start breaking down the technical implementation\n@Felix want to pair on the meters API modifications tomorrow?",
'reactions': []
},
{
'author': 'Felix Reyes',
'time': '10:17 AM',
'text': "👍 blocked off my morning for it",
'reactions': []
},
{
'author': 'Cora Lee',
'time': '10:18 AM',
'text': "working on the dashboard UI flows now\nwill share mockups in the design review tomorrow",
'reactions': []
}
]
},
'Airtable': {
'channelDescription': "AI imagines Airtable’s product channel. Choose another company from the top left.",
'messages': [
{
'author': 'Cora Lee',
'time': '2:15 PM',
'text': "need some eyes on the ProductCentral feedback from our enterprise beta\ncustomers love the feedback collection but they're struggling to understand release impact\nthey can't easily see if their changes are actually improving things",
'reactions': []
},
{
'author': 'Lauren Chen',
'time': '2:16 PM',
'text': "makes sense - right now they'd have to manually correlate release dates with feedback\nare they asking for something more automated?",
'reactions': []
},
{
'author': 'Cora Lee',
'time': '2:17 PM',
'text': "yeah exactly\nthey want to see how feedback changes after releases\nlike \"did our UI refresh actually reduce confusion complaints\" or \"did the new onboarding help with setup issues\"",
'reactions': []
},
{
'author': 'Martin Thompson',
'time': '2:18 PM',
'text': "thinking we could show feedback themes as line charts with release markers\nwould help teams see if their changes are actually moving the needle",
'reactions': [{'emoji': '📈', 'count': 1}]
},
{
'author': 'Felix Reyes',
'time': '2:19 PM',
'text': "we'll need good theme detection and volume normalization\nespecially for customers pulling in tons of zendesk tickets",
'reactions': []
},
{
'author': 'Rahul Singh',
'time': '2:20 PM',
'text': "we can adapt our existing ML pipeline for themes\nbut might want to cache sentiment calculations, gets expensive at scale",
'reactions': []
},
{
'author': 'Dan Redman',
'time': '2:21 PM',
'text': "how are we thinking about surfacing the sentiment data?",
'reactions': []
},
{
'author': 'Cora Lee',
'time': '2:22 PM',
'text': "small indicator above the chart showing positive/neutral/negative split with trend arrows\nkeeps it scannable for product teams",
'reactions': [{'emoji': '👍', 'count': 1}]
},
{
'author': 'Lauren Chen',
'time': '2:23 PM',
'text': "chase from netflix would love this - updating the launch deck to feature it more prominently\nwant to help me test it with a few more enterprise customers next week?",
'reactions': []
},
{
'author': 'Martin Thompson',
'time': '2:24 PM',
'text': "yes please - will set up some calls",
'reactions': []
}
]
},
'Figma': {
'channelDescription': "AI imagines Figma’s product channel. Choose another company from the top left.",
'messages': [
{
'author': 'Felix Reyes',
'time': '3:45 PM',
'text': "hey team, we need to talk about security for embedkit 2.0\nwith all the new browser privacy changes (ITP, Privacy Sandbox), our current embed auth approach isn't future-proof\nseeing issues in our beta where embeds break in some privacy-focused browsers 🚨",
'reactions': []
},
{
'author': 'Rahul Singh',
'time': '3:46 PM',
'text': "yeah, been looking into this\nthird-party cookies are basically dying\nwe need a more robust auth solution that works with Storage Access API",
'reactions': []
},
{
'author': 'Lauren Chen',
'time': '3:47 PM',
'text': "how many customers are impacted by this?\nespecially concerned about our enterprise customers who embed figma in their internal tools",
'reactions': []
},
{
'author': 'Martin Thompson',
'time': '3:48 PM',
'text': "just checked the data\n~15% of embed loads are failing in safari\nexpect this to get worse as chrome rolls out similar changes",
'reactions': []
},
{
'author': 'Vince Brenner',
'time': '3:49 PM',
'text': "we could use the Storage Access API\nbut that means we need to restructure how embeds handle auth\nalso thinking we should require origin registration for prototype embeds",
'reactions': []
},
{
'author': 'Felix Reyes',
'time': '3:50 PM',
'text': "exactly what i was thinking\nif we require oauth apps to register allowed origins\nwe can prevent prototype events from leaking to unknown domains",
'reactions': [{'emoji': '👍', 'count': 2}]
},
{
'author': 'Cora Lee',
'time': '3:51 PM',
'text': "from a UI perspective, we need to make origin registration super clear\nespecially since it's a new requirement\ncould we add an origins section to the oauth app dashboard?",
'reactions': []
},
{
'author': 'Dan Redman',
'time': '3:52 PM',
'text': "this feels like the right direction\nsecurity has to be rock solid, especially for enterprise\nwe can use this as an opportunity to clean up our embed architecture too",
'reactions': [{'emoji': '🔒', 'count': 1}]
},
{
'author': 'Lauren Chen',
'time': '3:53 PM',
'text': "should we grandfather existing embeds?\nor set a migration deadline?",
'reactions': []
},
{
'author': 'Rahul Singh',
'time': '3:54 PM',
'text': "recommend migration deadline for prototype embeds\nsimple file embeds can stay on v1 indefinitely\nbut prototype message passing needs the new security model",
'reactions': []
},
{
'author': 'Felix Reyes',
'time': '3:55 PM',
'text': "+1 to that split approach\nalso thinking we should move to embed.figma.com domain\nmakes it clearer these are v2 embeds",
'reactions': []
},
{
'author': 'Martin Thompson',
'time': '3:56 PM',
'text': "what's our migration timeline looking like?\nneed to give customers enough heads up",
'reactions': []
},
{
'author': 'Vince Brenner',
'time': '3:57 PM',
'text': "looking at browser roadmaps\nsuggest Dec 5th deadline\nthat's before the major privacy changes ship",
'reactions': [{'emoji': '📅', 'count': 1}]
},
{
'author': 'Cora Lee',
'time': '3:58 PM',
'text': "we should make the migration path super clear in the docs\nmaybe even build a migration helper tool?",
'reactions': []
},
{
'author': 'Lauren Chen',
'time': '3:59 PM',
'text': "love that idea\ncould detect v1 embeds and generate v2 equivalent code",